--- url: "/ja/convertify/export/adobe-after-effects.md" description: "After Effectsのワークフロー向けにFigmaのデザインをAdobe XDにエクスポートし、エクスポートオプションを設定します。" --- # FigmaからAdobe After Effectsへのエクスポート > After Effectsのワークフロー向けにFigmaのデザインをAdobe XDにエクスポートし、エクスポートオプションを設定します。 ### 動画チュートリアル：FigmaをAdobe After Effectsに変換 この動画では、Convertifyプラグインを使って、Figmaから直接デザインをAfter Effectsに（ワンクリックで）自動変換する方法を紹介しています。 [Embedded media](https://www.youtube-nocookie.com/embed/-UBknnWT6D0) [Adobe After Effects](https://www.adobe.com/products/aftereffects.html)向けにFigmaからデザインをエクスポートするには、手順に従って`.xd`ファイルに変換・ダウンロードして開きます。そのファイルを[Adobe XDから](https://helpx.adobe.com/after-effects/using/effects-applications.html#WorkingwithAdobeXDandAfterEffects)Adobe After Effectsにエクスポートできます。 ## Adobe After Effectsで使うために変換するFigmaページを1つ選択する {#selecting-a-single-figma-page-to-convert-for-use-in-adobe-after-effects} [Video](/assets/videos/convertify/export/ae-export-page.mp4) 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にエクスポートします）。自動変換処理が始まります。 > **Info:** **所要時間の目安** 所要時間の目安（例：**~14 seconds to convert 555 layers**）は、Figmaページ内のレイヤー数をもとに、変換にかかる時間の見込みを示すものです。*大きな*画像を含むFigmaページでは、Adobe XDファイルへの変換が完了するまでの時間が長くなる可能性があります。 > **Warning:** **Adobe XDは1つのドキュメントで複数ページを扱えません**。*複数ページ*の選択はSketchへのエクスポートにのみ適用されます。Adobe XDアプリは現在、[単一ページ](https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/13958565-multiple-pages-separate-sets-of-artboards)のファイルにしか対応していないためです。 ## ページ内の選択したFigmaフレームをXDにエクスポートする {#exporting-selected-figma-frames-on-your-page-to-xd} [Video](/assets/videos/convertify/export/ae-export-frame.mp4) Figmaページ全体をAdobe XDファイルに変換（してAfter Effectsにエクスポート）したくない場合は、Figmaデザイン内の特定のフレームレイヤーだけをAdobe XDに変換することもできます。変換したいFigmaフレームを選択し、Convertifyプラグインの**Export Selected Frames**ボタンをクリックすると、自動変換処理が始まります。 > **Warning:** **Adobe XDは1つのドキュメントで複数ページを扱えません**。*複数ページ*の選択はSketchへのエクスポートにのみ適用されます。Adobe XDアプリは現在、[単一ページ](https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/13958565-multiple-pages-separate-sets-of-artboards)のファイルにしか対応していないためです。 ## After Effectsにエクスポートするための.xdファイルをダウンロードする {#downloading-your-xd-file-for-exporting-into-after-effects} [Video](/assets/videos/convertify/export/ae-download.mp4) ConvertifyがFigmaページの処理を終えると確認メッセージが表示されます。**Download .xd (for exporting to AE)** ボタンをクリックすると、`.xd`ファイルをダウンロードできます。 Figmaから`.xd`ファイルをコンピューターにダウンロードしたら、ファイルエクスプローラーで保存先のフォルダを開きます。エクスポートした`.xd`ファイルを**ダブルクリック**すると、コンピューターにインストールされているバージョンのAdobe XDでファイルが開きます。 > **Tip:** **Figmaからダウンロードしたファイルの保存** Figmaの**デスクトップアプリ**を使っている場合は、ファイルをダウンロードするためのダイアログが表示されます。一方、**Webブラウザ**でFigmaを使っている場合は、デフォルトでファイルが自動的にパソコンにダウンロードされます（通常はパソコンの**Downloads**フォルダに保存されます）。 ## Adobe XDからAfter Effectsにアートボードをエクスポートする {#exporting-your-artboard-from-adobe-xd-into-after-effects} [Video](/assets/videos/convertify/export/ae-export-xd.mp4) > **Note:** **Adobe XDのインストール** MacまたはWindowsをお使いで、**有料のAdobe CCアカウントをお持ちの場合**は、[Creative CloudでAdobe XDをインストール](https://creativecloud.adobe.com/apps/all/all-platforms/pdp/xd)できます（または[こちらから直接](https://creativecloud.adobe.com/apps/download/xd?promoid=B8NR3RT1&mv=other)`.dmg`インストーラーをダウンロードできます）。これでコンピューター上でXDを実行できるはずです。[Windows用のスタンドアロンインストーラー](https://archive.org/details/adobe-xd-54.1.12.1-for-windows)もオンラインで入手できます。 Adobe XDで`.xd`ファイルを開いたら、XDの標準機能でAfter Effectsに[アートボードをエクスポート](https://helpx.adobe.com/after-effects/using/effects-applications.html#WorkingwithAdobeXDandAfterEffects)できます。ページ内でAfter Effectsで使いたいアートボードをクリックしてから、File → Export → After Effectsをクリックします。 > **Tip:** XDからAfter Effectsにアートボードがエクスポートされない場合は、まず右側のパネルでMark for Exportチェックボックスをオンにしてみてください。 ### エクスポートしたレイヤーをAfter Effectsで確認する {#viewing-your-exported-layers-in-after-effects} [Video](/assets/videos/convertify/export/ae-open-ae.mp4) Adobe XDで選択したアートボードに対してFile → Export → After Effectsをクリックすると、コンピューター上でAdobe After Effectsアプリ（インストールされていることを確認してください）が自動的に開き、選択したアートボードとそのすべてのレイヤーがAdobe XDからAfter Effectsのタイムラインにエクスポートされます。 エクスポートが完了したら、新しいAfter Effectsファイルを保存し、Adobe XDを閉じます。元はFigmaファイルにあったレイヤーをAfter Effectsですべてアニメーションできるので、そのままモーションデザインの作業を続けられます。 ## Adobe After Effectsのエクスポートオプションを設定する {#configuring-your-adobe-after-effects-export-options} FigmaからAdobe After Effectsに（.xdファイルのインポート経由で）デザインをエクスポートする前に、便利な任意の設定をいくつか行えます。 ### 名前が\*で始まるレイヤーを画像としてレンダリングする {#render-layers-with-prefix-as-images} **Render layers with \* prefix (eg. "\* Frame") as images**トグルをオンにすると、レイヤー名が「\*」で始まるFigmaレイヤー（例：「\*Frame 1」）が、通常のレイヤーの種類ではなく画像レイヤーとして自動的にエクスポートされます。 ### アートボードに参照用の画像オーバーレイを含める {#include-reference-image-overlays-for-artboards} **Include reference image overlays for artboards**トグルをオンにすると、エクスポートしたファイル内の各アートボードの上に、そのアートボードの参照画像がレイヤーの不透明度50%で自動的に追加されます。手作業での修正やレイヤー位置の微調整に役立ちます。 ### Figmaアートボードの子レイヤーをすべてグループ解除する {#ungroup-all-figma-artboard-child-layers} **Ungroup all Figma artboard child layers**トグルをオンにすると、Figmaファイル内の「Group」レイヤーが自動的にグループ解除されます。 ### After Effectsのコンポジションを拡大・縮小する {#scale-after-effects-comps} **Scale Comps**オプションを選ぶと、既存のFigmaアートボードが **@0.25x - @4x** の範囲で自動的に拡大・縮小されます（デフォルトは **@1x** で、デザインの倍率は変わりません）。これにより、変換した.xdファイルをAfter Effectsにエクスポートしたときに、コンポジションが拡大または縮小されます。 ### インストール済みフォントの位置をより正確にする {#more-accurate-positioning-for-installed-fonts} Adobe XDはテキストの縦方向の配置などのプロパティに対応しておらず、行の高さの計算方法もFigmaとは異なります。 **More accurate positioning for installed fonts (slower)** トグルをオンにすると、（コンピューターにインストールされているデザイン内のフォントについて）FigmaのテキストをXD向けにより正確な値でエクスポートします。 > **Warning:** **変換に時間がかかります**。**More accurate positioning for installed fonts (slower)** オプションを有効にすると、（テキストレイヤーの数によっては）変換に通常よりかなり時間がかかることがあります。 ## FigmaとAfter Effectsの違いを理解する {#understanding-differences-between-figma-and-after-effects} Convertifyは、After EffectsへのエクスポートのためにFigmaのすべてのレイヤーと属性をできる限りAdobe XDに変換しますが、Adobe XDがネイティブに対応している機能はFigmaより少ないため、どうしても制限があります。 ### Adobe XDにないFigmaの機能（XDからAfter Effectsにはエクスポートされません） {#figma-features-that-are-missing-in-adobe-xd-and-won-t-be-exported-over-to-after-effects-from-xd} 次の機能はFigmaにはありますが、Adobe XDにはネイティブで存在しないため、ファイルをAfter Effectsにエクスポートしても引き継がれません。 - 親アートボードの非表示 - 回転した親アートボード - 「円弧」プロパティを持つ楕円 - 1つのレイヤーへの複数の塗り・線 - 角の半径を使ったベクターレイヤー - グループに適用した線・塗り - テキストレイヤーの縦方向の配置 - ネストされたレイヤーマスク ## Convertifyの関連ガイド {#related-convertify-guides} - [FigmaからAdobe After Effectsへのステップごとのチュートリアル](/convertify/tutorials/convert-figma-to-adobe-after-effects)を参考にしてください。 - ベースとなる[FigmaからAdobe XDへのエクスポートのワークフロー](/ja/convertify/export/adobe-xd)を確認してください。 - ほかのインポート・エクスポート形式については、[Convertify Figmaプラグイン](https://www.hypermatic.com/convertify/)をご覧ください。