FigmaからAdobe After Effectsへのエクスポート

After Effectsのワークフロー向けにFigmaのデザインをAdobe XDにエクスポートし、エクスポートオプションを設定します。

動画チュートリアル：FigmaをAdobe After Effectsに変換

この動画では、Convertifyプラグインを使って、Figmaから直接デザインをAfter Effectsに（ワンクリックで）自動変換する方法を紹介しています。

Adobe After Effects向けにFigmaからデザインをエクスポートするには、手順に従って.xdファイルに変換・ダウンロードして開きます。そのファイルをAdobe XDからAdobe After Effectsにエクスポートできます。

Adobe After Effectsで使うために変換するFigmaページを1つ選択する ​

Convertifyプラグインを実行したら、Export from Figmaタブをクリックし、ワークフローの選択メニューからExport Figma to Adobe After Effectsを選んで、Adobe After Effectsで使うために変換したいFigmaページを選択します。

プラグインは、現在表示しているFigmaページを自動的にエクスポートします。エクスポートするページを変更するには、Figmaの左側の列にあるPages見出しの下で、Figmaファイル内の任意のページをクリックします。

Figmaページを選択したら、ConvertifyプラグインのExport This Pageボタンをクリックして、デザインをAdobe XDファイルに変換できます（このファイルをAfter Effectsにエクスポートします）。自動変換処理が始まります。

所要時間の目安 所要時間の目安（例：~14 seconds to convert 555 layers）は、Figmaページ内のレイヤー数をもとに、変換にかかる時間の見込みを示すものです。大きな画像を含むFigmaページでは、Adobe XDファイルへの変換が完了するまでの時間が長くなる可能性があります。

Adobe XDは1つのドキュメントで複数ページを扱えません。複数ページの選択はSketchへのエクスポートにのみ適用されます。Adobe XDアプリは現在、単一ページのファイルにしか対応していないためです。

ページ内の選択したFigmaフレームをXDにエクスポートする ​

Figmaページ全体をAdobe XDファイルに変換（してAfter Effectsにエクスポート）したくない場合は、Figmaデザイン内の特定のフレームレイヤーだけをAdobe XDに変換することもできます。変換したいFigmaフレームを選択し、ConvertifyプラグインのExport Selected Framesボタンをクリックすると、自動変換処理が始まります。

Adobe XDは1つのドキュメントで複数ページを扱えません。複数ページの選択はSketchへのエクスポートにのみ適用されます。Adobe XDアプリは現在、単一ページのファイルにしか対応していないためです。

After Effectsにエクスポートするための.xdファイルをダウンロードする ​

ConvertifyがFigmaページの処理を終えると確認メッセージが表示されます。Download .xd (for exporting to AE) ボタンをクリックすると、.xdファイルをダウンロードできます。

Figmaから.xdファイルをコンピューターにダウンロードしたら、ファイルエクスプローラーで保存先のフォルダを開きます。エクスポートした.xdファイルをダブルクリックすると、コンピューターにインストールされているバージョンのAdobe XDでファイルが開きます。

Figmaからダウンロードしたファイルの保存 Figmaのデスクトップアプリを使っている場合は、ファイルをダウンロードするためのダイアログが表示されます。一方、WebブラウザでFigmaを使っている場合は、デフォルトでファイルが自動的にパソコンにダウンロードされます（通常はパソコンのDownloadsフォルダに保存されます）。

Adobe XDからAfter Effectsにアートボードをエクスポートする ​

Adobe XDのインストール MacまたはWindowsをお使いで、有料のAdobe CCアカウントをお持ちの場合は、Creative CloudでAdobe XDをインストールできます（またはこちらから直接.dmgインストーラーをダウンロードできます）。これでコンピューター上でXDを実行できるはずです。Windows用のスタンドアロンインストーラーもオンラインで入手できます。

Adobe XDで.xdファイルを開いたら、XDの標準機能でAfter Effectsにアートボードをエクスポートできます。ページ内でAfter Effectsで使いたいアートボードをクリックしてから、File → Export → After Effectsをクリックします。

XDからAfter Effectsにアートボードがエクスポートされない場合は、まず右側のパネルでMark for Exportチェックボックスをオンにしてみてください。

エクスポートしたレイヤーをAfter Effectsで確認する ​

Adobe XDで選択したアートボードに対してFile → Export → After Effectsをクリックすると、コンピューター上でAdobe After Effectsアプリ（インストールされていることを確認してください）が自動的に開き、選択したアートボードとそのすべてのレイヤーがAdobe XDからAfter Effectsのタイムラインにエクスポートされます。

エクスポートが完了したら、新しいAfter Effectsファイルを保存し、Adobe XDを閉じます。元はFigmaファイルにあったレイヤーをAfter Effectsですべてアニメーションできるので、そのままモーションデザインの作業を続けられます。

Adobe After Effectsのエクスポートオプションを設定する ​

FigmaからAdobe After Effectsに（.xdファイルのインポート経由で）デザインをエクスポートする前に、便利な任意の設定をいくつか行えます。

名前が*で始まるレイヤーを画像としてレンダリングする ​

Render layers with * prefix (eg. "* Frame") as imagesトグルをオンにすると、レイヤー名が「*」で始まるFigmaレイヤー（例：「*Frame 1」）が、通常のレイヤーの種類ではなく画像レイヤーとして自動的にエクスポートされます。

アートボードに参照用の画像オーバーレイを含める ​

Include reference image overlays for artboardsトグルをオンにすると、エクスポートしたファイル内の各アートボードの上に、そのアートボードの参照画像がレイヤーの不透明度50%で自動的に追加されます。手作業での修正やレイヤー位置の微調整に役立ちます。

Figmaアートボードの子レイヤーをすべてグループ解除する ​

Ungroup all Figma artboard child layersトグルをオンにすると、Figmaファイル内の「Group」レイヤーが自動的にグループ解除されます。

After Effectsのコンポジションを拡大・縮小する ​

Scale Compsオプションを選ぶと、既存のFigmaアートボードが @0.25x - @4x の範囲で自動的に拡大・縮小されます（デフォルトは @1x で、デザインの倍率は変わりません）。これにより、変換した.xdファイルをAfter Effectsにエクスポートしたときに、コンポジションが拡大または縮小されます。

インストール済みフォントの位置をより正確にする ​

Adobe XDはテキストの縦方向の配置などのプロパティに対応しておらず、行の高さの計算方法もFigmaとは異なります。

More accurate positioning for installed fonts (slower) トグルをオンにすると、（コンピューターにインストールされているデザイン内のフォントについて）FigmaのテキストをXD向けにより正確な値でエクスポートします。

変換に時間がかかります。More accurate positioning for installed fonts (slower) オプションを有効にすると、（テキストレイヤーの数によっては）変換に通常よりかなり時間がかかることがあります。

FigmaとAfter Effectsの違いを理解する ​

Convertifyは、After EffectsへのエクスポートのためにFigmaのすべてのレイヤーと属性をできる限りAdobe XDに変換しますが、Adobe XDがネイティブに対応している機能はFigmaより少ないため、どうしても制限があります。

Adobe XDにないFigmaの機能（XDからAfter Effectsにはエクスポートされません） ​

次の機能はFigmaにはありますが、Adobe XDにはネイティブで存在しないため、ファイルをAfter Effectsにエクスポートしても引き継がれません。

  • 親アートボードの非表示
  • 回転した親アートボード
  • 「円弧」プロパティを持つ楕円
  • 1つのレイヤーへの複数の塗り・線
  • 角の半径を使ったベクターレイヤー
  • グループに適用した線・塗り
  • テキストレイヤーの縦方向の配置
  • ネストされたレイヤーマスク