2023.06.29 2023.08.04

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

susan

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

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

すーさん

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

あわせて読みたい

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

Contents

AdobeとFigmaについて

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

Adobe XDとは

まず最初に、Adobe XDについて。Adobe XDは、ユーザーインターフェース（UI）やユーザーエクスペリエンス（UX）デザインの作成に特化したソフトウェアです。シンプルなインターフェースと豊富な機能を備えており、多くのデザイナーに利用されています。

Figmaとは

次に、Figmaについて。Figmaはクラウドベースのデザインツールであり、共同作業やプロトタイピングなどの機能を備えています。XDと同様に、UI/UXデザインの作成に適しており、チームでの協力作業が簡単にできます。

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

あわせて読みたい

【UIデザインツール】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で先ほどダウンロードしたファイルを開き、正常に移行されているか確認する。

注意点：XD2Sketch.comを利用する際には、フォントやスタイルの互換性に注意してください。

Convertifyを使って変換する方法

Adobe XDとFigmaには、変換をスムーズに行うためのプラグインが用意されています。ここではConvertifyというプラグインについてご紹介していきたいと思います。このプラグインを使用すると、直接XDファイルをFigmaに変換することができます。追加のソフトウェアや手順なしに、簡単に変換が可能です。

以下Convertifyを使用して、Adobe XDファイルを直接Figmaに変換する具体的な手順です。