Figma to After Effects Exporter

Figmaで選択したフレーム / グループを、After Effectsで再構成するツールです。

Booth：Figma to After Effects Exporter

同梱物

Figma Plugin/
  manifest.json
  dist/
    code.js
    ui.html
After Effects/
  import-from-figma.jsxbin
README_ja.md
LICENSE.txt

対応環境

• Figma デスクトップアプリ
• Adobe After Effects
• マスクの自動適用は After Effects 22.3 以降推奨

Figmaプラグインのインストール

1. このフォルダを任意の場所に置きます。
2. Figmaデスクトップアプリを開きます。
3. メニューから Plugins → Development → Import plugin from manifest... を選びます。
4. Figma Plugin/manifest.json を選択します。
5. Plugins → Development から Figma to After Effects Exporter を起動できます。

書き出し手順

1. Figmaで書き出したいフレーム / グループを1つ選択します。
2. Figma to After Effects Exporter を起動します。
3. 必要に応じて書き出し倍率を変更します。通常は 2 のままで大丈夫です。
4. ZIPを書き出し を押します。
5. manifest.json と images/ が入ったZIPが保存されます。

After Effectsへの読み込み

1. Figmaから書き出したZIPを展開します。
2. After Effectsを開きます。
3. File → Scripts → Run Script File... を選びます。
4. After Effects/import-from-figma.jsx を選択します。
5. ダイアログで、展開したZIP内の manifest.json を選択します。
6. Figmaのフレームサイズに合わせたコンポジションが作成され、PNGレイヤーが配置されます。

仕様

• テキスト、シェイプ、画像をPNGとして書き出します。
• Figmaのレイヤー位置、回転、スケール、透明度、表示状態、対応範囲のブレンドモードをAEへ渡します。
• フレーム自体の塗りは背景レイヤーとして書き出されます。
• テキストは元のテキストボックスの余白を保った状態で画像化されます。
• 同一PNGはZIP内で重複保存されず、AE側で同じ素材を再利用します。

注意点

• AEに読み込んだテキストは画像レイヤーです。AE側で文字編集はできません。
• Figmaの一部効果や複雑な表現は、見た目をPNGに焼き込んで再現します。
• ZIPは必ず展開してから読み込んでください。ZIPの中の manifest.json を直接選ぶことはできません。
• Figmaプラグインを更新した場合は、Figma側でプラグインを再読み込みしてから書き出してください。