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

ConvertifyでFigmaのページやフレームをAdobe XDファイルにエクスポートする方法と、オプションや制限事項について説明します。

動画チュートリアル：FigmaをAdobe XDに変換する

この動画では、Convertifyプラグインを使って、Figmaから直接デザインをAdobe XDファイルに（ワンクリックで）自動変換する方法を説明しています。

FigmaのデザインをAdobe XD用にエクスポートするには、以下の手順で.xdファイルを変換、ダウンロードして開きます。

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

Adobe XDに変換するFigmaページを1つ選ぶ ​

Convertifyプラグインを起動したら、Export from Figmaタブをクリックし、ワークフローセレクターからExport Figma to Adobe XDを選んで、Adobe XDに変換したいFigmaページを選択します。

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

Figmaページを選んだら、ConvertifyプラグインのExport This Pageボタンをクリックすると、デザインをAdobe XDに変換できます。自動変換の処理が始まります。

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

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

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

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

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

.xdファイルのダウンロード ​

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

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

.xdファイルを開く ​

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

Adobe XDのエクスポートオプションの設定 ​

FigmaからAdobe 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」レイヤーが自動的にグループ解除されます。

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

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

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

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

FigmaとAdobe XDの違いを理解する ​

Convertifyは、Figmaのすべてのレイヤーと属性をできる限りAdobe XDに変換しますが、Adobe XDが標準で対応している機能はFigmaより少ないため、どうしても制限があります。

Adobe XDで再現されないFigmaの機能 ​

以下の機能はFigmaにはありますが、Adobe XDには標準で存在しないため、Convertifyプラグインでは引き継がれません。

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

Adobe XDのプロトタイプが対応しているインタラクションは、On Click、On Drag、Key/Gamepadのみです。

また、Adobe XDが対応しているナビゲーションの種類は、Navigate To、Open Overlay、Scroll To、Backです。

Convertifyが引き継ぐのは、Figmaのプロトタイプリンクのうち、Adobe XDが対応しているこれらのプロトタイプ属性に一致するものだけです。