AEUXを使ってFigmaのデザインデータをAfter Effectsに移動する方法

Sketch のデザインデータを After Effects を経て Lottie でマイクロインタラクションパーツを作るような流れが流行している気がします。また、デザインとフロントエンドが分業のケースでは、インタラクションのイメージを動画で説明する機会も増えてきている気がします。

最近はもっぱら Figma ばかり使っているので、figma→sketchを経由せずに、直接 Figma から After Effects へデータを移す現状最適な方法を調べてみました。

※ Figmaはもうすぐ公式のプラグインの提供が開始されるとの噂なので、それまでの暫定になるかと思います。

##前提

• Figma が インストールされている
• After Effect が インストールされている

##手順

1. AEUXプラグインを After Effect に入れる
   （※ .zxpファイルのインストールは zxp installer などを使う）

2. Figma の Shareボタンより URLをコピーする

3. こちらへ行き、FigmaのURLを貼る。

4. 目的のアートボードを選び Download を押すと AEUX.json ファイルがダウンロードされる。
   ※アートボード中で画像ファイルを使ってる場合はzipが落ちてくるが、その場合は中身の AEUX.json を使う。

5. After Effect の AEUXパネル（ウィンドウ→拡張機能→AEUX）へ AEUX.json を ドラッグ・アンド・ドロップ

6. 動画を作成

7. Bodymovin を経由し Lottie用のデータを出力

##注意点

精度が完璧ではないらしく、アイコンのような複雑なパスの部分が壊れたり、微妙に見た目がおかしくなる場合がある様子。
その場合はFigma側である程度FlattenやRasterizeでまとめておくといい感じでした。

より簡単な方法がありましたら、是非コメントいただければ幸いです。