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

Webデザインにおいて、Adobe XDとFigmaは人気のあるツールです。

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

すーさん

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

おすすめのWebデザインスクール

デジタルハリウッド STUDIO by LIG

実績あるカリキュラムをベースにこれまで9万人以上のクリエイターを輩出。料金→安、授業クオリティ→高。

入学金	0円
料金	165,000円（税込）〜
学び方	通学とオンライン
校舎	上野校、池袋校、大宮校、北千住校、川崎校、町田校他
就職サポート	○
運営会社	株式会社LIG

Webデザインスクール「デジタルハリウッド STUDIO by LIG」

詳しくはこちら

Webデザインが学べるおすすめのスクールに関しては【初心者用】Webデザインが学べるスクール！おすすめの10校を徹底比較で詳しく紹介していますので、興味ある方はぜひチェックしてみてください。

あわせて読みたい

【初心者用】Webデザインが学べるスクール！おすすめの10校を徹底比較

フリーランスクリエイターにおすすめのエージェント

レバテッククリエイター

Webやゲーム業界のフリーランスクリエイター向けのエージェントサービス。案件マッチングから単価交渉、契約代行までを一貫してサポート。

案件数	デザイナー用案件数：1,000以上
リモート案件	◎
勤務日数	週3日〜
高単価	～1,400,000円/月
地域	東京
運営会社	レバテック株式会社

Web案件獲得数、業界最大級！
無料会員登録【レバテッククリエイター】

詳しくはこちら

フリーランスデザイナー用のおすすめのエージェントに関してはフリーランスのデザイナーが登録しておくべきエージェント8選！おすすめはどこ？で詳しく紹介していますので、興味ある方はぜひチェックしてみてください。

あわせて読みたい

フリーランスのデザイナーが登録しておくべきエージェント8選！おすすめはどこ？

AdobeとFigmaについて

Adobe XDとは

まず最初に、Adobe XDについて。Adobe XDは、ユーザーインターフェース（UI）やユーザーエクスペリエンス（UX）デザインの作成に特化したソフトウェアです。

シンプルなインターフェースと豊富な機能を備えており、多くのデザイナーに利用されています。

AdobeXDの学習におすすめの書籍

Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル

created by Rinker

翔泳社

• Amazon
• 楽天市場
• Yahooショッピング

初心者からちゃんとしたプロになる　Adobe XD基礎入門

created by Rinker

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング

Figmaとは

次に、Figmaについて。

Figmaはクラウドベースのデザインツールであり、共同作業やプロトタイピングなどの機能を備えています。

XDと同様に、UI/UXデザインの作成に適しており、チームでの協力作業が簡単にできます。

Figmaの学習におすすめの書籍

これからはじめるFigma Web・UIデザイン入門 (Compass Web Development)

created by Rinker

マイナビ出版

• Amazon
• 楽天市場
• Yahooショッピング

(サンプルDL特典付)はじめてでも迷わないFigmaのきほん やさしく学べるWebサイト・バナーデザイン入門

created by Rinker

インプレス

• Amazon
• 楽天市場
• Yahooショッピング

AdobeXD、Figma、Sketchの比較についてはAdobeXD,Sketch,Figmaを徹底比較。それぞれのメリット・デメリットで詳しく書いてますので、気になる方はチェックしてみてください。

あわせて読みたい

【UIデザインツール】AdobeXD、Figma、Sketchを徹底比較

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を使って変換する方法

XD2Sketch.comは、オンラインのウェブサービスです。

このサービスの特徴として、XDファイルを一度Sketchフォーマットに変換し、その後SketchファイルをFigmaにインポートする仕様になっています。

比較的に簡単な手順で変換が行えるため、初心者でも利用しやすい方法です。

以下、XD2Sketch.comを使用してAdobe XDファイルを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への変換が行えるようになります。

デザイナーとしてのスキルをさらに向上させ、クライアントやチームのニーズに応えることができるでしょう。

すーさん

webデザイナー/webエンジニア

XInstagramLINEContact

30代web業界未経験 →オーストラリアにIT留学 →現地インターンを1年半経験 →フリーランスwebデザイナー・エンジニアとして活動 →月収80万円達成！