こんな方に読んでほしい
[記事の内容]
Figmaには、XDファイル（.xd）を直接開く機能がありません。
そのため、XDのデータをFigmaで編集するには、何らかの方法で変換する必要があります。
今回は、XDからSVGで書き出し、Figmaに取り込む方法を紹介します。
特別なツールは不要で、無料で実施できます。
XDで作成したデザインが、Figmaのキャンバス上に表示され、編集できる状態になります。
XDからFigmaへの移行は、大きく4つのステップで行います。
流れを先に確認しておきましょう。
それぞれの手順を、画像付きで詳しく解説していきます。
まずは、XDで移行したいデータを開き、書き出す対象を選択します。
アートボードを1つだけ移行する場合は、そのアートボードを選択します。
複数のアートボードをまとめて移行する場合は、すべてのアートボードを選択してください。
.xdファイルを、XDで開きます。
Ctrl + A（MacはCommand + A）で全選択できます。
次に、選択した対象をSVG形式で書き出します。
書き方ではなく、メニューの操作になります。
SVGに変更します。
※XDのバージョンによって、メニュー名や設定項目が異なる場合があります。
書き出したSVGファイルを、Figmaに取り込みます。
操作は、ドラッグ＆ドロップだけです。
取り込み後は、見た目やレイヤー構造を確認します。
SVGは、もともとデザインデータの交換用の形式ではないため、元のデータと細かい部分が異なる場合があります。
以下の点を、順番に確認していきましょう。
SVGでの移行は手軽ですが、完全に同じ状態で引き継げるわけではありません。
事前に、以下の制限を把握しておきましょう。
注意ポイント！
① テキストの再設定が必要になる場合があります
書き出しの設定によっては、テキストが一部アウトライン化されたり、フォントスタイルが外れたりします。
その場合、Figma上でテキストの打ち直しや、フォントの再設定が必要です。
② レイヤー構造は元のデータと異なる場合があります
グループ構造や、レイヤー名が引き継がれない場合があります。
③ XD独自の機能は引き継げません
プロトタイプの設定、コンポーネント、リピートグリッドなどは再現されません。必要なものはFigmaで作り直します。
④ フォントはFigmaで使えるものか確認する
XDで使っていたフォントが、Figmaで使えない場合があります。その場合は、代わりのフォントを設定します。
取り込み後に必ず見た目を確認し、崩れていた部分を手動で調整してください。
特に、文字を多く含むデザインは、調整の手間が増える可能性があります。
SVGでの移行では、レイヤー構造やテキストの調整に手間がかかることがあります。
そこで、より効率的に移行したい方向けに、有料のプラグイン「Convertify」を紹介します。
Convertifyは、XDファイルをFigmaに変換することを目的としたツールです。
SVGよりも、元のデータに近い状態で移行できる点が特徴です。
ただし、料金や仕様は変更される場合があります。利用前に、公式サイトで最新の情報を確認してください。
| SVG書き出し | Convertify | |
|---|---|---|
| 費用 | 無料 | 有料 |
| 手間 | 取り込み後の調整が必要 | 調整の手間を減らしやすい |
| おすすめの場面 | 少量のデータ、小規模な移行 | 大量のデータ、本格的な移行 |
まずは無料のSVG書き出しで試し、手間がかかりすぎる場合に、有料ツールを検討するのがおすすめです。
今回はこれで以上です。
今回は、Adobe XDのデータをFigmaに移行する方法を紹介しました。
XDからSVGで書き出し、Figmaにドラッグ＆ドロップするだけで、無料で移行できます。
ただし、テキストやレイヤー構造は、取り込み後に調整が必要になる場合があります。
データが多い場合や、手間を減らしたい場合は、有料のConvertifyも検討してみてください。
.xdファイルを直接開けません。
2026.11.10
2026.11.05
2026.11.03
2026.10.30
2026.10.27
2026.10.21
2026.10.10
2026.08.14
2026.08.12
2026.04.05
© 2026 shu-naka-blog
