Lottieとは
Lottieとは民泊などでお馴染みのAirbnbが開発したアニメーションライブラリです。
Lottieを利用すればjpgやgifといった画像を使わないJSONベースの軽量なアニメーションを作ることが可能です。さらにLottieへアップロードしたアニメーションはFigmaに貼り付けられます。
ただLottieでは複雑な動きを作ることはできないため、After Effecsで動きを編集します。
After Effectsについて
After EffectsはAdobeが販売している映像のデジタル合成やモーショングラフィックス、タイトル制作などを目的としたソフトウェアです。AEと略されることも多いため、「○○な動き AE」と検索すればAfter Effectsでの動きの付け方の記事や動画が出てきます。今回はAfter Effectsで実現する動きの付け方は割愛しますが、After Effectsで作成可能でもLottieへエクスポートできない機能や表現が色々あるため制作前に確認が必要です。
IllustratorからAfter Effectsへエクスポート
イラストを動かしたい場合はIllustratorファイルをAfter Effectsにエクスポートします。
Illustratorファイルのレイヤーで一つのベクトルレイヤーになってしまうので、動かしたいパーツごとにレイヤー分けをしましょう。今回準備したイラストはたこ焼きと千枚通しに別々の動きをつけたいためレイヤー分けしました。
Illustratorファイルを保存する際はオプションの「PDF互換ファイルを作成」にチェックを入れてください。また、Illustratorで作成したグラデーションは無効になってしまうので気をつけてください。
After Effectsの画面上で新規コンポジションを作成しましょう。コンポジションは、Flash ProfessionalのムービークリップまたはPremiere Pro のシーケンスに似ています。（と公式サイトに記載されています）
作成したIllustratorはAfter Effectsへドラッグ&ドロップしましょう。読み込みの種類はコンポジションです。
エクスポートしたIllustrator ファイルは、After Effects上でベクトルレイヤーからシェイプレイヤーに変換する必要があります。
レイヤー→作成→ベクトルレイヤーからシェイプを作成（もしくは対象レイヤー右クリックから作成へ）
Lottie用に書き出す際、この操作を忘れるとイラストが表示されなくなるので気をつけましょう。
FigmaからAfter Effectsへエクスポート
UI画面を作成してリッチな動きをつけたい場合はAfter Effectsへエクスポートして動きをつけます。
Figma上でAEUXというプラグインを利用するとFigmaで作成したデータをAfterEffectsに書き出してくれます。
AEUXはAfterEffectsを起動している状態でないと動作しないのでご注意ください。私はIllustratorで描いたイラストを利用して簡単なアニメーションラフを作りました。
Figmaでのデータがどうエクスポートされるか
Figmaで作ったデータがどのようにエクスポートされるか、気になっていたのでやってみました。
下写真はFigmaの画面です。左のレイヤーサイドメニューで、各要素がどのような状態かを示しています。Component、Group、Frame、テキスト状態を作りました。（くいだおれ太郎が食い倒れ太郎表記になっている点は目をつぶってください）
After Effectsの画面です。Figma上でComponentもしくはFrameにしたものはコンポジションに、Group化したものは単独のレイヤーが作成されてグループ化していた要素と親子関係になるようです。
After EffectsからLottieへエクスポート
After Effectsで作成した動画をJSON形式で書き出すためにはBodymovinというプラグインを入れる必要があります。
ウィンドウ→エクステンションで開き、保存先を選んだ上で書き出ししましょう。
書き出した後のJSONファイルはLottieのWeb上のフォルダもしくはFigma上のLottieプラグイン（後述）へエクスポートすればアニメーションの確認が可能です。Lottieを経由することで、Figmaのプロトタイプで確認可能な動画を配置することができます。
完成したアニメーション
FigmaのLottieプラグインから貼り付けたアニメーションです。Figmaだと横幅500pxのgifをFigma上に貼り付けることができます。（1枚目がIllustrator経由で作成したアニメーション、2枚目がFigma経由で作成したアニメーションです）
Lottieからgifファイルに書き出す場合、無料版は150x150pxのみ書き出し可能です。
Illustrator経由で作成したアニメーション
Figmaを経由して作成したアニメーション
Illustrator、Figmaどちらを経由しても仕上がりに差はありません。
After Effectsエクスポート前の素材の準備方法やエクスポート後の工程が若干変わります。個人的な使い分けとしては、Illustratorは単体のモチーフにアニメーションをつけたい場合に利用し、FigmaはUIパーツにリッチな動きをつけたい場合（例えば数が増えたときのバッジ）や絵コンテを作った後アニメーションにしたい場合（例えばちょっと凝ったSplash）に利用していました。
さいごに
動くたこ焼きを見て、たこ焼きを食べたくなりましたか？たこ焼きといえば大阪！
クラスメソッド大阪拠点では各種オフラインイベントが開催予定です！関西の皆様、ぜひたこ焼きを食べに技術話を聞きにきてください！関西以外からの参加も大歓迎です。
私が運営メンバーをしている勉強会
【7/19（水）大阪】DevelopersIO 2023 大阪 #devio2023にもお手伝いとして参加予定です〜。
3
