Sketch のデザインデータを After Effects を経て Lottie でマイクロインタラクションパーツを作るような流れが流行している気がします。また、デザインとフロントエンドが分業のケースでは、インタラクションのイメージを動画で説明する機会も増えてきている気がします。
最近はもっぱら Figma ばかり使っているので、figma→sketchを経由せずに、直接 Figma から After Effects へデータを移す現状最適な方法を調べてみました。
※ Figmaはもうすぐ公式のプラグインの提供が開始されるとの噂なので、それまでの暫定になるかと思います。
前提
- Figma が インストールされている
- After Effect が インストールされている
手順
AEUXプラグインを After Effect に入れる
（※ .zxpファイルのインストールは zxp installer などを使う）Figma の Shareボタンより URLをコピーする
こちらへ行き、FigmaのURLを貼る。
目的のアートボードを選び Download を押すと AEUX.json ファイルがダウンロードされる。
※アートボード中で画像ファイルを使ってる場合はzipが落ちてくるが、その場合は中身の AEUX.json を使う。After Effect の AEUXパネル（ウィンドウ→拡張機能→AEUX）へ AEUX.json を ドラッグ・アンド・ドロップ
動画を作成
Bodymovin を経由し Lottie用のデータを出力
注意点
精度が完璧ではないらしく、アイコンのような複雑なパスの部分が壊れたり、微妙に見た目がおかしくなる場合がある様子。
その場合はFigma側である程度FlattenやRasterizeでまとめておくといい感じでした。
より簡単な方法がありましたら、是非コメントいただければ幸いです。