Adobe XDファイルをFigmaで開く方法！変換手順とおすすめの代替ツールを解説

個人でデザインをしていた頃は、正直あまり気にしていなかったんです。でも仕事の規模が大きくなって、関わる人が増えてくると「協業のしやすさ」がツール選びの中でどんどん大事な条件になってきました。ディレクターに確認してもらったり、エンジニアにそのまま渡したり、クライアントに共有したり。ファイル形式がバラバラだと、それだけで作業が止まってしまうことってありますよね。

私自身、長年Adobe XDを使ってきたのですが、あるプロジェクトで急にFigmaへの切り替えが必要になり、慌てて調べた経験があります。その時に困ったのが「XDのファイルって、そのままFigmaで開けないの？」という一番シンプルな疑問でした。今回はその答えと、実際にXDのデータをFigmaに持っていくための方法を、自分の経験も交えながらまとめてみます。

そもそも、日本のデザイン現場ではどんな状況なのか

本題に入る前に、少し背景の話をさせてください。

日本のUI/UXデザインの現場では、ここ数年でツールの勢力図がかなり変わりました。以前はAdobe XDを使う会社も多かったのですが、2023年1月にAdobeがXDの単体プランの販売を終了し、いわゆる「メンテナンスモード」に入ったことをきっかけに、新規プロジェクトではFigmaを選ぶチームが急増しました。今ではCreative Cloudコンプリートプランを契約していないと新しくXDを使い始めることすら難しくなっており、既存のXDファイルをどう活かすかが多くのデザイナーの悩みどころになっています。

一方でSketchはどうかというと、日本ではあまり浸透していません。理由は単純で、SketchはMac専用のツールだからです。日本企業はWindows中心の業務環境が多く、チーム全員がMacを使える現場は限られています。その点Figmaはブラウザさえあれば動くので、OSを問わず全員が同じファイルを開ける。この「環境を選ばない」という部分が、日本でFigmaが急速に広まった理由の一つだと感じています。

つまり今、多くの日本のデザイナーが直面しているのは「昔作ったXDの資産を、これからの標準になったFigmaにどう引き継ぐか」という、かなり現実的な課題なんです。

Part1：FigmaはXDファイルを直接開けるのか

先に結論からお伝えすると、FigmaはAdobe XDのファイル（.xd）をそのまま開くことはできません。

これは技術的にできないというより、そもそもFigma側が対応していないというのが正確なところです。考えてみれば当然で、XD側からすればFigmaで自社のファイルがそのまま開けてしまったら、ユーザーがそのまま競合ツールに流れてしまいますよね。なので、両社ともお互いのネイティブ形式を直接サポートするようなことはしていません。

ただし、Figmaがまったく他形式を受け付けないわけではなく、以下のファイルはインポート可能です。

• Figmaファイル（.fig）
• Sketchファイル（.sketch）
• 画像ファイル（PNG、JPG、GIF）
• ベクター形式（SVG）

つまり「.xdのまま開く」ことはできなくても、「別の形式に変換してから読み込む」ことは可能ということです。次のパートで、具体的なやり方を紹介していきます。

なお後半では、そもそも変換という手間自体が不要になる方法（Pixsoというツール）もあわせて紹介するので、変換作業が面倒だと感じる方はそちらも参考にしてみてください。

Part2：XDのファイルをFigmaに持っていく2つの方法

XDからFigmaにデータを移す方法は、大きく分けて2つあります。それぞれメリットとデメリットが結構はっきり分かれるので、自分の作業内容に合わせて選ぶのがおすすめです。

方法1：SVGとして書き出してFigmaに読み込む

一番手軽な方法です。Adobe XDのアートボード上でオブジェクトをコピーして、そのままFigmaのキャンバスに貼り付けることもできますし、以下のようにファイルとして書き出してから読み込むこともできます。

手順

1. Adobe XDでオブジェクトまたはアートボードを選択し、メニューから「ファイル」→「書き出し」を選びます。
2. 書き出し範囲として「選択済み」か「すべてのアートボード」のどちらかを選びます。
   • 選択済み：特定の要素だけを選んで書き出す場合
   • すべてのアートボード：プロジェクト内のすべてのアートボードをまとめて書き出す場合

3. 書き出し形式で「SVG」を選択し、「書き出し」を押して保存します。
4. Figmaを開き、「Import」（インポート）ボタンから先ほど保存したSVGファイルを読み込みます。

ここまでは簡単なのですが、実際にFigma側で開いてみると「あれ、元のデザインと違う…」と感じることが多いです。特にテキストの部分は崩れやすく、しかも要素がひとつのフレームにまとめられてしまうため、結局レイアウトを組み直す作業が発生してしまいます。私も最初にこの方法を試した時、テキストボックスの位置がずれてしまい、結局ひとつずつ手作業で直すはめになりました。

メリット

• ベクター要素をそのまま貼り付けるだけなので、操作自体はとてもシンプル
• テキストとベクター要素だけで構成されたシンプルな作業物であれば、これで十分なことも多い

デメリット

• PNGやJPGなど、ベクターではない画像は一緒に持っていけない
• デザインを完成形に戻すには、結局いくつかの要素を作り直す必要がある
• テキストボックスのサイズがそのまま保持されない
• プロトタイプの遷移設定（画面同士のリンクなど）は引き継がれない
• アートボードの背景がベクター化されてしまい、比率が変わってしまうことがある
• コンポーネントやシンボルには対応していない
• アートボードにつけていた名前がそのまま維持されないことがある

こう見ると、デメリットの数がけっこう多いですよね。なので「ちょっとしたパーツだけ移したい」というライトな用途には向いていますが、プロジェクト全体をまるごと移行するような場面では、正直あまりおすすめできません。

方法2：変換プラグインを使う

単純なベクター要素だけの移行ではなく、コンポーネントやプロトタイプまで含めてまるごとXDのプロジェクトをFigmaに移したい場合は、変換プラグインを使うほうが圧倒的に効率的です。

日本のデザイナーの間でもよく使われているのが、Figma上で動く「Convertify」というプラグインです。これはFigmaの中にあるプラグイン検索から直接インストールできるタイプのもので、外部のWebサービスにファイルをアップロードする必要がないのが特徴です。手元のXDファイルをそのままドラッグ＆ドロップするだけで、Figmaのネイティブなデータとして変換してくれます。

手順の流れ（実際に触った印象を含めて）

1. Figmaで新規ファイルを開き、上部の「リソース」アイコンからプラグインを検索します。
2. 「Convertify」と入力して検索し、プラグインを実行します。
3. プラグイン内のメニューから「Import Adobe XD to Figma」を選択します。
4. 変換したいXDファイルをドロップエリアにドラッグ＆ドロップします。
5. ファイルサイズにもよりますが、数十秒〜数分ほど待つと変換が完了します。

無料枠として数回分のお試し変換ができるようになっており、それ以上まとめて使いたい場合は有料プランにアップグレードする形になっています。完全に無料というわけではありませんが、SVG方式に比べるとコンポーネントやプロトタイプの遷移もまとめて引き継げるので、実務で使うにはこちらのほうが現実的だと感じています。

メリット

• SVG方式に比べて、変換にかかる作業時間を大幅に短縮できる
• コンポーネント、シンボル、プロトタイプの遷移設定まで含めて、比較的まとまった形でFigmaファイルに変換される
• アートボードの名前がそのまま維持されるので、リネームし直す手間がかからない

デメリット

• 完全無料のサービスではなく、大量に使う場合はコストがかかる
• ファイルの複雑さによっては、変換後に細かい調整（フォントの置き換えやエフェクトの再設定など）が必要になることがある

正直なところ、どちらの方法を使っても「100%完璧に元通り」というのはなかなか難しいです。特に長年運用してきたXDのプロジェクトほど、レイヤー構造が複雑になっていることが多く、変換後には多かれ少なかれチェックと手直しの時間が必要になると考えておいたほうがいいと思います。

Part3：そもそも変換がいらない選択肢「Pixso」について

ここまで紹介した2つの方法は、どちらも「XDのファイルを一度別の形式に変換してからFigmaに持っていく」というアプローチでした。ただ実は、そもそも変換という工程自体を挟まずに済む方法もあります。それが「Pixso」というデザインツールです。

Pixsoは、UI/UXデザインからプロトタイプの作成、そしてチームメンバーとのリアルタイムな共同編集まで、ひとつのツールでまとめて対応できるクラウド型のデザインツールです。複数の企業案件を掛け持ちしていて、取引先ごとに異なるファイル形式でやり取りしなければならないようなデザイナーにとっては、地味にありがたい存在だと思います。

ファイル変換なしで複数フォーマットを読み込める

Pixsoの大きな特徴は、Adobe XDのファイルだけでなく、Figma、Sketch、Axureといった主要なファイル形式をそのまま読み込める点です。つまり変換作業を挟まずに、それぞれのファイルを開いてPixso上でそのまま作業を続けられるということです。これまで紹介してきたような「一部のレイアウトが崩れる」「プロトタイプの設定が消える」といった変換特有の悩みを、根本的に回避できる仕組みになっています。

ブラウザだけで使える、無料の設計ツール

Pixsoはブラウザベースのツールなので、WindowsでもMacでも関係なく、追加のアプリをインストールせずにそのまま使い始めることができます。前半でお話しした通り、日本の現場はWindows中心の環境が多いので、この「OSを選ばない」という点は地味に大きなメリットだと感じます。

ディレクターやエンジニアともリアルタイムで協業できる

UI/UXの案件は、デザイナー一人で完結することはほとんどありません。企画側の要望を反映したり、実装するエンジニアに仕様を伝えたり、関係者との連携が欠かせないですよね。Pixsoでは、同じドキュメントをチーム全員が同時に開いて編集できるようになっており、ワイヤーフレームの設計からビジュアルデザイン、プロトタイプの共有まで一気通貫で進められます。ファイルをメールやチャットで送り合うのではなく、リンクを共有するだけで最新の状態を全員が見られるので、「どのファイルが最新版だっけ」というありがちな混乱も起きにくくなります。

プロジェクト数やクラウド容量に制限がない

Pixsoはプロジェクトの作成数、クラウドの保存容量、チームライブラリ、バージョン管理のいずれにおいても、上限を設けていません。案件が増えてくると地味に気になってくる「容量」や「プラン上限」を気にせずに、必要なだけ使い続けられるのはありがたいポイントだと思います。

まとめ

ここまで、Adobe XDのファイルを別のツールに移す方法をいくつか紹介してきました。SVGでの書き出しは手軽ですが崩れやすく、変換プラグインを使えばかなり近い形で再現できるものの、無料では済まないケースもあります。どちらを選ぶにしても、多少の手直しは覚悟しておいたほうがよさそうです。

もし変換の手間そのものを減らしたいと考えているなら、ブラウザを開いてXDのファイルをそのまま読み込めるPixsoは、一度試してみる価値があると思います。追加費用も面倒な変換作業も必要なく、そのまま作業を続けられるのは、想像以上に楽です。容量やチーム人数を気にせず、関係者と一緒に進めていけるツールを探している方は、ぜひ触ってみてください。