Figma to After Effects Exporter

この機能は、Figmaで作ったデザインをAfter Effectsにレイヤー構造つきで持っていくための書き出しツールです。

通常、Figmaの画面をAEに持っていく場合は、スクリーンショットや単体PNGとして書き出すことが多く、AE側では1枚画像になってしまいます。

このツールでは、Figma上のフレーム内にあるテキスト、図形、画像、背景などをそれぞれPNG化し、位置情報つきで書き出します。AE側のスクリプトで読み込むと、Figmaの見た目に近い状態で各パーツがAEレイヤーとして配置されます。

できること

Figmaのフレーム / グループをZIPで書き出し

各レイヤーをPNGとして保存

レイヤーの位置、サイズ、回転、透明度をAEに反映

フレーム背景の塗りも背景レイヤーとして再現

テキストは画像化して、Figma上の見た目と位置を保つ

同じ画像は重複せず再利用

AE側でコンポジションを自動作成

使い方の流れ

Figmaで対象フレームを選択

プラグインでZIPを書き出し

ZIPを展開

AEで import-from-figma.jsx を実行

manifest.json を選択

FigmaデザインがAEコンポとして再構成される