簡単にできる!XDからFigmaへの変換・インポート方法

Webデザインにおいて、Adobe XDとFigmaは人気のあるツールです。
しかし、クライアントやチームの要望により、既存のデザインを継続して異なるツールで引き続き使わなければならない場合、xdからFigmaにデータを移行しなければなりません。

本記事では、そんな時のためにXDからFigmaへの変換・インポート方法について詳しく解説していきます。

AdobeとFigmaについて

Adobe XDとは
まず最初に、Adobe XDについて。Adobe XDは、ユーザーインターフェース(UI)やユーザーエクスペリエンス(UX)デザインの作成に特化したソフトウェアです。シンプルなインターフェースと豊富な機能を備えており、多くのデザイナーに利用されています。
Figmaとは
次に、Figmaについて。Figmaはクラウドベースのデザインツールであり、共同作業やプロトタイピングなどの機能を備えています。XDと同様に、UI/UXデザインの作成に適しており、チームでの協力作業が簡単にできます。
AdobeXD、Figma、Sketchの比較についてはAdobeXD,Sketch,Figmaを徹底比較。それぞれのメリット・デメリットで詳しく書いてますので、気になる方はチェックしてみてください。

Adobe XDファイルをFigmaに変換する前の注意点
- フォントとスタイルの互換性を確認する
- アセットや画像の適切なエクスポート
- レイヤーとグループの構造の保持
- 変換方法の選択
- エフェクトや対応しない機能の確認
- プロトタイプやインタラクションの再作成
- 変換後のデザインの再確認
フォントとスタイルの互換性を確認する
Adobe XDとFigmaは異なるフォントやスタイルの仕組みを持っています。変換後にデザインが正確に表示されるようにするために、Figmaで使用するフォントやスタイルがXDで使用したものと互換性があるかを確認しましょう。フォントがFigmaにインストールされているか、または代替フォントを選択する必要がある場合があります。
アセットや画像の適切なエクスポート
XDファイル内で使用されているアセットや画像は、Figmaに正しく表示されるように適切にエクスポートする必要があります。画像は適切な形式(通常はPNGまたはJPEG)でエクスポートし、アセットは必要に応じて再作成するか、Figma内で再度アップロードする必要があります。
レイヤーとグループの構造の保持
XDファイル内のレイヤーやグループの構造は、Figmaに変換される際にもそのまま継続されることが重要です。レイヤーとグループの命名や階層構造が変換後も維持されるように、注意深く確認しましょう。これにより、デザインの整理や編集の手間が省けます。
変換方法の選択
変換にはいくつかの方法がありますが、それぞれの方法によって変換結果が異なる場合があります。XD2Sketch.comやプラグイン、SVG形式など、利用するツールや手法によって互換性や変換の精度が異なることがあります。自分のプロジェクトに最適な方法を選びぶために、それぞれの方法のメリットとデメリットを理解しておくことが重要です。
エフェクトや対応しない機能の確認
一部のXDのエフェクトや機能は、Figmaに変換される際に完全に表示されない場合があります。影や効果、アニメーションなどの特定の要素が正しく変換されない際は、変換後にデザインが変わっていないかを確認し、必要な修正や調整を行いましょう。
プロトタイプやインタラクションの再作成
Figmaは独自のプロトタイピング機能を備えていますが、XDのプロトタイプやインタラクションは自動的にFigmaに変換されません。必要な場合は、Figmaで再作成や調整を行う必要があります。特に複雑なインタラクションやトリガーがある場合には、手動で再作成する必要があります。
変換後のデザインの再確認
変換後にFigmaに表示されるデザインを再度確認しましょう。フォントの乱れ、アセットの位置やサイズの変更、レイヤーの階層構造の変化など、不正確な変換があるかどうかをチェックし、必要であれば修正を行ってください。
Adobe XDファイルをFigmaに変換する方法

Adobe XDで作成したデザインをFigmaに移行できることで、他のチームメンバーやクライアントとの共同作業やプロジェクトの継続性を保つことができます。ここでは、Adobe XDファイルをFigmaに変換するための3つの方法をご紹介します。
具体的には以下の3つです。
- XD2Sketch.comを使って変換する方法
- Convertify(プラグイン)を使って変換する方法
- SVGを使って変換する方法

それぞれについて詳しくみていきましょう。
XD2Sketch.comを使って変換する方法

XD2Sketch.comは、オンラインのウェブサービスです。このサービスの特徴として、XDファイルを一度Sketchフォーマットに変換し、その後SketchファイルをFigmaにインポートする仕様になっています。比較的に簡単な手順で変換が行えるため、初心者でも利用しやすい方法です。
以下、XD2Sketch.comを使用してAdobe XDファイルをFigmaに変換する手順です。
- webブラウザを開き、XD2Sketch.comのウェブサイト(https://magicul.io/)にアクセスします。
- サイトにアクセスし料金を支払い後、変換したいXDファイルを右側の「Upload your file」の四角い枠にドラッグ&ドロップ、もしくは「Browse」を選択しファイルを取り込む。
- 元ファイルをAdobe XD、変換後のファイルをFigmaに変更しconvertボタンをクリックする。
- 変換が完了すると、変換されたSketchファイルがダウンロードリンクとして提供されます。このリンクをクリックして、ファイルをダウンロードします。
- Figmaで先ほどダウンロードしたファイルを開き、正常に移行されているか確認する。
Convertifyを使って変換する方法
Adobe XDとFigmaには、変換をスムーズに行うためのプラグインが用意されています。ここではConvertifyというプラグインについてご紹介していきたいと思います。このプラグインを使用すると、直接XDファイルをFigmaに変換することができます。追加のソフトウェアや手順なしに、簡単に変換が可能です。
以下Convertifyを使用して、Adobe XDファイルを直接Figmaに変換する具体的な手順です。
ステップ1: プラグインを開く

Figmaを開き、メニューから「Plugins > Find more plugins」を選択します。
ステップ2: Convertifyを検索

プラグインの検索バーに「Convertify」と入力します。
ステップ3: Convertifyを起動

Convertifyプラグインを見つけたら、「Run」をクリックしてプラグインを起動します。
ステップ4: Convertifyのオプション

プラグインが正常に起動されたら変換用メニューが表示されます。
ステップ5: インポート形式を選ぶ

オプションで「XD→Import Adobe XD to Figma[BETA]」を選択します。
ステップ6: インポートするファイルを選ぶ

インポートするファイルをドラッグ&ドロップ、もしくはクリックしてファイルを選びます。
ステップ7: ファイルをインポート

ファイルを選択すると自動でインポートが始まります。変換が完了したら、Figma上にXDファイルのデザインが表示されます。
SVG形式を利用した変換方法
最後の方法は、Adobe XDデザインをSVG形式に変換し、それをFigmaにインポートする方法です。SVGはベクターベースの画像形式であり、様々なデザイン要素を正確に保持しつつ、異なるツール間での互換性も保っています。この方法は非常に簡単かつ無料でできるので、一般的に一番よく利用されています。
以下、SVG形式を使用する方法の手順です。
ステップ1: AdobeXDを開きファイルを選択

Adobe XDを開き、変換したいデザインファイルを全て選択します。
ステップ2: SVGコードのコピー

次に右にクリックでメニューを開き、「SVGコードのコピー」を選択します。
ステップ3: SVGコードのペースト

Figmaを開き、新規ファイルを作成します。新規ファイル上で、右クリックでメニューを開き「Paste here」をクリック。
ステップ4: Figmaでファイルの確認

インポートプロセスが完了すると、Figma上にXDデザインが表示されます。
まとめ
XDからFigmaへの変換・インポートは、デザインワークフローを円滑に進めるために重要なステップです。
本記事では、XD2Sketch.comやプラグイン(Convertify)、SVG形式を利用した変換方法について解説しました。
SVG形式を利用した変換方法が無料かつ簡単にできるので一番のおすすめですが、自分の目的や状況に合わせて最適な方法を選んでください。
これらの手法を使えば、効率的にXDからFigmaへの変換が行えるようになります。デザイナーとしてのスキルをさらに向上させ、クライアントやチームのニーズに応えることができるでしょう。


