WebTecNote

FigmaによるSVG生成とアニメーションSVG作成

炭治郎かわいいよ炭治郎

完成品

Figmaでお絵かき

最近鬼滅の刃にハマってるので、何か出来ることないかな~と思った結果
Figmaの練習がてら炭治郎を描いてみることにしたのでした。

数日でこのような炭治郎が出来上がる。

かわいいぞ!

Piggとかマクパペットのアバター構造に触れた経験が生きた。
こうして構造考えながら描いてみるとピグってすげぇなとしみじみ思う。

Figmaはベクターがイラレ並に描きやすいという評判は確かにそうだと思いました。
イラレ経験者ならFigmaでも息をするようにお絵かき出来るはずです。
これは個人アカウントで作ったので無料プラン。

羽織の柄はpatternifyで作成。

FigmaのSVG出力

書き出したいパーツにExportをSVGで設定するだけである。

Figmaの場合は大枠のフレームにExport設定すれば、中のパーツはすべてSVG内のパスやグループになって出力される。

パーツごとにSVG化する場合は個別に設定する。

レイヤーの名前でスラッシュを利用した場合、出力時にディレクトリになる。

出力時にフォルダにまとめたい場合はスラッシュ区切りにしておくと良いが、
ID属性をつける設定(Include “id” Attribute)をONにしているとレイヤー名がそのままIDになるので、スラッシュを利用している場合はIDにもスラッシュが含まれるし、スペースなどもそのままIDに使われてしまう。
ID属性で使用できない文字は自動で変換して欲しかったが、残念ながらそのような機能はまだ無いです。

SVGatorによるアニメーションSVG作成

アバター構造で作ったら動かしたくなるのが人の性…

残念ながらFigmaにはアニメーションツールは備わってない。
SVGをお手軽にアニメーションさせるもの何かないかな~と思ってググった結果、SVGatorが1位だったので試してみることにした。

試用期間は7日で終了後は有料に切り替わる。
気になるお値段は月額18ドル~年間払で月額12ドル。

svgatorは作成済みのSVGを読み込んだら、SVGに含まれているパーツ毎にタイムラインと各種プロパティのアニメーションが設定出来るツールだった。
アニメーションはすべてCSS keyframesに変換され、出力時はアニメーションSVGになる。

使い方はめっちゃ簡単でほぼ直感だけで操作できる。

  1. アニメーションさせたいパーツを選択、名前の左側にあるプラスアイコンを押す
  2. タイムラインにパーツが追加される
  3. アニメーションさせたいプロパティを選んでプラスアイコンを押す
  4. キーフレームを設定したいところにタイムラインのバーを動かす
  5. 設定するプロパティの値を入力
  6. このアイコン押すかエンターキー押すとキーフレームを追加できる
  7. 設定済みのキーフレーム。黄色になってるのは選択中の証
  8. transform-originを設定できる

作ってるときにこれ出来ないのか~と思ったところ

SVG自体の操作ができない所が難点かなと思った。

制限はあるにしろGUIがあるとないとではわかりやすさが段違いなので、アニメーションSVGを量産する人ならお金払う価値はあるかも。

ver2.0で激変

2019/11/20にリリースされたver2.0で、上記に挙げてた不満点が全部解消されてました。
まだ軽く触ってみただけなんだけど、かなりすごい。
ネイティブアプリと錯覚するくらいGUIが整っている。

こちらver1.2の炭治郎を2.0のSVGatorで読み込んだ所。
残念ながら前バージョンでは反映されていたパターン背景が無かったことにされてしまったが、他は概ね同じ状態になった。

パターンが無きものにされた袖のSVGを選択してみた所。
操作できるプロパティがめちゃくちゃ増えている。

最大の難点だと思ったtransform-originが任意の位置に変更できない件も、マウスのドラッグでスッと変更できるようになっている…!

パーツを動かしてアニメーションつけれるようになってるし、前フレームがシャドウ表示されるようになっててキーフレーム間の差分も一目瞭然。
分かりやすいの極み!

説明読まなくても直感でアニメーションガンガン作れますよこれは。
さらにFigmaにあるライブラリ機能みたいなのも搭載されててSVGパーツがめっちゃお手軽にインポートできる。
前バージョンは派手に目立つ難点があったせいで、課金はちょっとな~という感想になってたんだけど、殆ど解消された2.0からなら金払う価値があると思いました。

でもまだ気になる所はあります:

その他のSVGアニメーション作成ツール

GUIがあるものをリストアップしてみた。

モバイルバージョンを終了