Adobe XDからFigmaへ移行する手順｜SVG・変換ツールと検査表

Adobe XDは現在メンテナンスモードです。本記事はXDを利用できる既存ユーザー向けです。新規利用・再インストールの可否はAdobeアカウントの契約内容と管理者に確認してください。

XDの既存デザインをFigmaで編集したい場合は、移行経路を選び、変換後の差分を検査する必要があります。このページはXDに絞った手順です。SketchやAxureも含む形式別の判断はデザインファイルの移行経路ガイドを参照してください。

1. 原本と検査用データを準備する

XDファイルを複製し、フォント、画像、共有ライブラリとプロトタイプの動きを確認します。原本を上書きせず、代表画面の画像や操作記録を比較用に残してください。最初は文字、部品、画像と遷移を含む小さな範囲で試します。

2. .xdを直接開く方法と中間形式を区別する

Figmaの通常のファイル取り込みで、.xdをそのままネイティブ編集ファイルとして開く前提にはできません。SVGなどの中間形式で見た目を移す方法と、XD対応をうたう外部変換ツールを使う方法を分けて検討します。対応ファイルはFigma公式のインポート案内で確認してください。

SVGは図形を受け渡す形式です。XDのコンポーネント関係やプロトタイプ設定を、同じ編集構造のまま保存する移行形式ではありません。

3. SVGまたは変換ツールで試験移行する

3.1 SVGで画面や部品を移す

• XDで対象のアートボードまたはオブジェクトを選び、書き出しでSVGを選択します。
• 書き出したファイルをFigmaの編集画面に配置し、元の画面と同じ拡大率で比較します。
• フォント、テキストボックス、画像、マスク、影とグラデーションを確認します。画像の埋め込みや参照方法によって結果は変わります。
• Figma側でフレーム、コンポーネント、スタイルと遷移を必要に応じて作り直します。

3.2 変換ツールを評価する

ConvertifyなどXD対応を案内するツールを利用する場合は、提供元の対応表、価格、ファイル送信先と保存方針を確認します。プラグインとして動くことは、外部サーバーへ送信しないことの証明にはなりません。機密ファイルを処理する前に組織の承認を得て、まず機密情報を含まない複製で試しましょう。

対応するバージョン、コンポーネント、文字とプロトタイプの変換範囲を調べます。機能名が並んでいても自分のファイルで同じ結果になるとは限りません。処理時間や手直し量は実際に測り、SVG経路と比較してください。

4. Pixsoを含む別の移行先を検討する場合

Pixsoを移行先にする場合も、現在の取り込み画面と公式案内で対応形式を確認し、同じ検査表を使います。取り込み操作が簡単であることは、内部の変換や差分がないことを意味しません。元ファイルの機能をすべて保持すると断言せず、実ファイルの結果で判断してください。

Pixsoの無料プランには3つのデザインファイルと3つのホワイトボードファイルが含まれます。個人の下書きや閲覧用シートの扱いはチームの編集用ファイル数と区別し、現在の料金と上限を確認してください。

チーム全体の移行は、必要な権限、ファイル所有者、リンク更新とバックアップまで含めて段階的に進めます。対応していない要素を手作業で作り直す時間も予定に含めてください。

5. 受入確認を終えてから切り替える

担当者が見た目、構造、操作と共有の差分を確認し、残る修正を承認したら対象を広げます。旧ファイルは保存方針に沿って残しましょう。複数形式を整理したい場合はXD・Sketch・Axureの移行経路ガイド、XDで画面を確認する場合は既存ユーザー向け基本操作を利用してください。