LottieFilesでFigmaのアニメーションを書き出そう
LottieFilesというFigmaプラグインを使うと、Figmaのプロトタイプのアニメーションをそのまま抜き出せるって言うじゃないですか。こりゃやるしかないでしょと言うことで数時間やってみた結果です。
筆者のスキルはこのくらい：
- AfterEffects経験者
- アニメーション自体はまだまだ
- Figmaのプロトタイプは好きで、色々弄り回してる
アニメーションやプロトタイピングをまったく理解していない場合はちょっときついかもしれないです。
が、このタイプのプラグインをやろうという方はおそらく少しは触れたことがあると思います。
LottieFilesの主な使い方
LottieFilesは、Figmaでフレームごとに実装されたプロトタイプの間を読んで、「よしなに」アニメーションを作ってくれるという非常に優れたプラグインです。
ですが、「よしなに」なので、AIと同じで、こちらの指示が適当だと変なアニメーションが上がってきます。
以降で、綺麗なアニメーションが上がってくるコツを手順を追いながら語りたいと思います。指示、と書きましたが、プロンプトではなく、あくまでも、アニメーションしやすい素材にする、プロトタイピングを適切に行うことが大事です。また、アニメーションの具体的なイメージを持つためにも、事前にたくさんのアニメーションを見て準備するといいと思います。
準備
１）Lottieに登録をします。無料で大丈夫です。
２）FigmaにLottieFilesのプラグインを呼び出します。こちらも無料版、Draftsでできます。すごい時代になりましたね。
これで準備は完了です！
アニメーションの作り方
これはものによりますが、私が今回つくろうとしたのは、よくマイクロインタラクションで使われる、はじけるようなアニメーションをつくってみようと思いました。
このはじけるアニメーションですが、Figmaでつくろうとすると、真ん中をそろえるとか等間隔で放射状に飛ぶようにするのが難しかったので、Illustratorで基本の素材をつくり、Figmaにコピペすることにしました。イラレを立ち上げる手間はありますが、AfterEffects立ち上げるよりは、PCに負荷がかかりません(笑)。
Illustratorで素材をつくる時は、Figmaのフレームを意識して作ります。フレームのかわりに正方形を並べて中心をずらさないように、アニメーションの「はじまり」「途中」「終わり」をつくります。
小さい丸が出て、それが拡大し、等間隔で45度ずつ放射状に散っていき、最後はそのドットが小さくなって消えるようなイメージです。
このアニメーションをループ化する時は、途中で空白のフレームを入れます。でないと縮小アニメーションが発生します。
Figmaにイラレから直接コピペし、調整する
イラレからコピペすると、長方形が残ったままなどになっているので、グループの解除などを含め調整します。フレームの大きさはすべて同じに揃えます。うっかりフレームのサイズが変わらないよう気をつけて作業をします。
フレーム間のプロトタイピングを行う
LottieFilesの場合ここがキモになります。
アニメーションは「アフターディレイ」をトリガーにします。これは基本です。
設定したmsの後アニメーションが発生します。なので、すぐにスタートしたいときは0を入れるのですが自動で「1」って入ります。1msはほぼ時間が無いのと同じなのであまり気にしなくて良いです。
その次にスマートアニメートを設定し、イージングを選びます。そのイージングにもmsで長さを設定できます。
この辺は試行錯誤するしかありません。
少しそのままにしたい場合は、300msくらい入れたりします。これもお好みです。
イージングは以下のようなサイトを見ると参考になると思います。
- イーズイン：入り方が遅い
- イーズアウト：終わり方が遅い
- イーズインイーズアウト：遅く入って、中間が速く、終わり方が遅い
https://ics.media/entry/18730/
LottieFilesでLottieに書き出す
Figmaのプロトタイプ再生で意図したアニメーションが得られたら、あとは早いです。
フレームを選択し、LottieFilesのプラグインを立ち上げましょう。
ここで、下のプルダウンに、自分が作ったプロトタイプのフロー名が出ているはずです。それを選択します。次にプレビューが見えますので、再度確認しましょう。
OKでしたら、自分のLottieアカウントにSaveします。
Lottieのサイトにログインした状態でダッシュボードを見ると、自分のアニメーションが保存されていると思います。
ここでOKだ！と再確認したら、各種形式で保存しましょう。
Lottieの最大の特徴は、JSON形式
Lottieの最大の特徴は、JSON形式なので、ちょっとここで設置してみましょう。
Lottieのサイトで「Enable Asset Link」を選択すると、EMBEDソースコードがゲットできます。これを貼ってみました。
このWEBサイトはWordpresでできていますが、HTMLを直接編集、でいけました！
WordPressの記事への実装でも、拡大縮小などパラメーターがいじれるのには感動です。最近一部で流行っている、幅100%でダイナミックにアニメーションなんかも簡単にできそうなので、やってみました。
とても簡単ですね！！拡大しても綺麗（SVG）なのが最大のメリットだと思いました！
LottieFilesのデメリット
LottieFilesはあまり複雑なアニメーションには向いてないですが、インタラクション用であれば正直あまり気になりません。
要はお手軽ツールなので。AfterEffectsって普段はあまり触っていないので急いでいる時に思い出すのが大変な時もありますよね。
ただ個人的には、結局Illustratorで素材を作っていたので、AfterEffectsにアニメーションの元ネタを持っていた方が汎用性は高いかなと感じました。
また、LottieFiles特有の「よしなに」してくれた結果が微妙な時もあるので、できればAfterEffectsで作った方がいいかなと思います。