XD アートボードを Figma フレームに変換 — マッピング詳細と Pixel Fine Converter の精度設計

「Adobe XD から Figma へ移行したとき、アートボードの名前やサイズはそのまま入るのか」「複数のアートボードを一気に移したい」「背景色や座標系はどう扱われるのか」— Figma への移行を本格的に進めると、アートボードがフレームにどうマッピングされるのか は気になりやすいポイントです。

アートボードは XD ファイルの最上位構造で、画面単位のデザイン領域として機能します。Figma にも対応する概念として フレーム（Frame） があり、両者は概念的に近いものの、内部表現には違いがあります。何が 1:1 で保持され、何が変わり、何が制限されるのか を押さえておくと、移行後の修正コストが大きく変わります。

この記事では、Pixel Fine Converter の実際の変換コードを根拠に、XD アートボード → Figma フレームのマッピングを詳細に解説 します。名前 / サイズ / 背景色 / クリッピング / 座標系の挙動、Free プランの 3 アートボード制限と Pro プランの上限解除、グループ階層の扱いまで、移行担当者が把握すべき技術的な詳細を網羅します。

XD → Figma 移行の全体プロセス を確認したい場合は Adobe XD から Figma への移行ガイドを参照。プラグインの比較 は XD → Figma 変換プラグインを比較する、チーム移行のプレイブック はエンジニアリングチーム向け 5 ステップ移行プレイブックを参照。変換後に Figma 側でフレームをどう作成・サイズ変更・書き出しするか（操作方法）は Figma に「アートボード」はない？ — XD 経験者のためのフレームガイドで解説しています。本記事は アートボード単位のテクニカルマッピング に焦点を絞っています。

📝 はじめに — XD アートボードと Figma フレームの関係

XD と Figma は両方ともベクターベースのデザインツールで、画面単位の領域を扱う仕組みがあります。XD はそれを アートボード（Artboard）、Figma は フレーム（Frame） と呼びます。両者は概念的に近く、移行時には基本的に 1:1 対応します。

ただし、内部表現にはいくつかの違いがあります。

XD のアートボード:

ファイルの最上位構造として配置される画面領域
名前 / サイズ / 背景色 / 子要素を持つ
アートボード間の絶対座標は「ファイル全体での位置」として保持

Figma のフレーム:

ページ内の任意の階層に配置できる「コンテナ要素」
アートボード相当の最上位フレーム + ネストされた内部フレームの両方に使える
位置はページ内のローカル座標

つまり、XD のアートボードは 「最上位フレームに限定されたフレーム」 と考えると整理しやすいです。XD では子要素や別のアートボードを「アートボード化」できないのに対し、Figma のフレームは任意の階層で使える点が違います。

この違いがあるため、変換時には以下のポイントが論点になります。

名前 / サイズ / 背景色 はそのまま 1:1 で保持できるか
座標系 はどう変換されるか（XD のグローバル座標 → Figma のローカル座標）
クリッピング（境界外の要素を切り取る挙動）はどう扱われるか
大量のアートボード を扱うときのプラン制限はあるか

この記事の残りで、これらを Pixel Fine Converter の変換コードを根拠に順に整理していきます。

🎯 アートボード → フレームの基本マッピング

まず、XD アートボードと Figma フレームの 1:1 対応を表で整理します。

属性	XD	Figma	対応
名前	`artboard.name`	`frame.name`	✅ そのまま保持
サイズ	`width`, `height`	`frame.resize(w, h)`	✅ ピクセル単位で保持
背景色	`style.fill` (SOLID + alpha)	`frame.fills` (SOLID + opacity)	✅ 透明度を含めて保持
クリッピング	境界外を非表示（暗黙）	`clipsContent: true`	✅ 明示的に有効化
座標系	グローバル座標 `(x, y)`	ローカル座標 `(0, 0)` 起点	⚙️ 変換時に正規化
プロトタイプ ID	AGC アートボードノード `id`	内部 ID マップで保持	✅ インタラクション接続用

5 つの属性のうち 4 つが そのまま保持 され、座標系のみ 正規化 されます。座標系の変換は「XD ではファイル全体での絶対位置だったものを、Figma ではフレーム内の相対位置として扱う」ための処理です。

具体例で見ると、XD で (100, 200) の位置に置かれていた要素が、アートボード自体は (50, 50) にあった場合、Figma のフレーム内では (50, 150) というローカル座標に変換されます。子要素の見た目は変わらず、座標表現だけがフレーム原点を基準に書き換わる のがこの処理のねらいです。

⚙️ Pixel Fine Converter のアートボード変換に関する挙動

Pixel Fine Converter のアートボード変換は、1 アートボードあたり以下の 6 ステップ で進みます。Pixel Fine Converter の実際の変換処理を順に整理します。

ステップ 1: フレーム生成と命名

frame = backend.createFrame()
frame.name = artboard.name

XD のアートボード名がそのままフレーム名になります。日本語名・英数字混在・スラッシュ区切り（Home/Default）等もすべてそのまま入ります。

ステップ 2: サイズ反映

frame.resize(artboard.width, artboard.height)

ピクセル単位の幅と高さが直接渡されます。XD 側で 375 × 812（iPhone X 想定）のアートボードは Figma でも 375 × 812 のフレームになります。

ステップ 3: クリッピング有効化

frame.clipsContent = true

Figma のフレームは初期状態ではクリッピングが任意ですが、Pixel Fine Converter は アートボード相当のフレームでは常に clipsContent: true を有効化 します。これは「XD のアートボードは境界外を非表示にする」挙動と整合するための処理です。

ステップ 4: 背景色の抽出と適用

XD アートボードの背景色は、artboard.content.children の中から type === 'artboard' のノードを探し、その style.fill から抽出します。fill.type === 'solid' の場合は RGB + alpha を取り出し、Figma の frame.fills に SOLID + opacity として適用します。背景色が指定されていなければ デフォルトの白背景 （{ r: 1, g: 1, b: 1 }）が適用されます。

ステップ 5: 座標系の正規化

coordContext = {
  artboardX, artboardY,
  parentX: 0, parentY: 0,
  artboardWidth, artboardHeight,
  artboardName,
}

XD のグローバル座標を Figma のローカル座標に変換するための 座標コンテキスト を構築します。アートボード自体の位置（artboardX, artboardY）を原点として、子要素の座標を相対化していきます。

ステップ 6: プロトタイプ用 ID の記録

if (artboardNode?.id) {
  ctx.idMap.set(artboardNode.id, frame)
}

XD の AGC アートボードノード ID（XD ファイル内部の識別子）を内部の idMap に記録します。これは、XD 側のプロトタイプ画面遷移（タップ→アートボード A から B へ）を Figma のプロトタイプ機能に接続する際の参照テーブルになります。

精度設計の中核 = 単純で網羅的な 1:1 対応

Pixel Fine Converter のアートボード変換は、派手な最適化ではなく地道な 1:1 対応の徹底 で精度を保っています。名前・サイズ・背景色・クリッピング・座標系・プロトタイプ ID の 6 属性を機械的にマッピングし、欠落や誤解釈を起こしにくい設計です。

💎 Free プランの 3 アートボード制限と Pro プランの上限解除

ここまでの変換挙動は Free プランでも Pro プランでも同じロジック が使われています。違うのは 何アートボードまで変換できるか だけです。

Free プラン: 3 アートボードまで

Pixel Fine Converter Free プランでは アートボードの上限が 3 つに設定されており、4 つ以上のアートボードを持つ XD ファイルを変換すると、最初の 3 つだけが変換され、残りはスキップ されます。

スキップ時には、プログレスバーに「{total} 件の artboard を検出。最初の {limit} 件のみ変換（Free プラン上限）」というメッセージが表示されるため、ユーザーが「制限により省略された」ことを認識できる設計になっています。

Pro プラン: アートボード数の制限なし

Pro プランでは内部的な上限チェックを通さず全アートボードがそのまま処理対象になるため、アートボード数の制限はありません。50 アートボード / 100 アートボードの大規模 XD ファイルもすべて変換対象になります。

どんなときに Free で十分か / Pro に切り替えるか

場面	推奨プラン	理由
変換精度の試用	Free	代表的な 3 アートボードを変換すれば、変換精度の判定材料を取れる
10 アートボード以下の小規模ファイル	Free を分割実行 or Pro	XD ファイルを分割して 3 アートボードずつ変換も可能、ただし手間を考えると Pro の方が早い
20 アートボード以上の本番ファイル	Pro	アートボード制限を解放することで、一度の変換で完結する
複数 XD ファイルの一括移行	Pro	ファイルごとに Free 制限を回避する手間が大きく、Pro 投資が報われる

変換精度自体は Free と Pro で同一 のため、まず Free で 3 アートボードを変換し、精度に納得した段階で Pro に切り替える流れが現実的です。

まず Free で 3 アートボードを試す Figma Community からインストール

Figma Communityから1クリックで追加できます

📐 グループ階層 + ネスト構造の扱い

XD のアートボード内には、グループや入れ子になった構造が含まれます。Pixel Fine Converter は グループ階層をそのまま Figma 側のグループ / フレームとして再現 します。

XD グループ → Figma グループ / フレームの判定

XD では「グループ」と「コンポーネント」が別概念ですが、Figma 側では用途に応じて以下の使い分けが行われます。

単純なグループ化のみ → Figma の Group（位置とサイズはバウンディングボックス）
背景色やクリッピングが必要な領域 → Figma の Frame（より高機能）
コンポーネント化された要素 → Figma の Component（インスタンス化対応）

Auto Layout 配下のグループの子要素は、Pixel Fine Converter が自動的に SCALE 制約付きの Frame に変換してから Auto Layout を適用するため、子要素の位置決めの際に整合性が保たれます。

ネスト構造の保持

3 階層以上のネストもそのまま保持されます。例えば次のような XD の構造があった場合：

Home (Artboard)
└── Header (Group)
    └── Logo + NavMenu (Group)
        ├── Logo (Image)
        └── NavMenu (Group)
            ├── Item1 (Text)
            ├── Item2 (Text)
            └── Item3 (Text)

Figma 側では同じ階層構造が再現されます。

Home (Frame)
└── Header (Group)
    └── Logo + NavMenu (Group)
        ├── Logo (Image)
        └── NavMenu (Group)
            ├── Item1 (Text)
            ├── Item2 (Text)
            └── Item3 (Text)

名前 / 階層 / 順序 がすべて維持されるため、移行後にレイヤーを探すときも XD 時代の構造感覚がそのまま通用します。

🧭 アートボード間の配置 / レイアウト

複数のアートボードを変換すると、Figma のページ上にどう並べるか という配置の問題が出てきます。Pixel Fine Converter はアートボード本体の配置ロジックを持たず、Figma のデフォルト動作に委ねる設計 になっています。

配置の仕組み

各アートボードは変換結果として frame.x / frame.y が 明示的に設定されません
Figma 側のデフォルト動作で配置されるため、複数のアートボードが 同じ位置に重なって表示される可能性 があります
元の XD ファイルでのアートボード並び順は 変換処理の順序として保持 されますが、Figma ページ上の視覚配置として並び順が再現される保証はありません
必要に応じて、変換完了後に ユーザー側で配置を調整 する前提です

新しいページへの出力

Pixel Fine Converter は変換結果を 新しい Figma ページ に出力します（figma.createPage()）。これにより、既存のページが上書きされる事故を防げます。ページ名には XD ファイル名と変換日時が含まれるため、複数回変換しても履歴が残ります。

変換後の配置調整は前提

Pixel Fine Converter は変換結果を 新しい Figma ページ に出力しますが、アートボード本体の位置調整は行いません。複数のアートボードが重なって見える場合は、Figma 側で個別に位置を調整してください。既存のページには手を加えないため、配置を整えてから本格的に取り込む流れで作業できます。

✅ アートボード移行時のチェックリスト

実際にアートボードを Figma に移行するとき、以下のポイントを順に確認すると見落としが減ります。

1. アートボード名の重複

XD では同名アートボード（例: Home, Home 2, Home Copy）がしばしば発生します。Figma に変換後、同名フレームが複数あっても動作はしますが、後から「どのアートボードが本物か」を見分けにくくなります。変換前に XD 側で命名を整理 しておくと、移行後の運用が楽になります。

2. 背景色の確認

XD では背景色を設定し忘れているアートボードがあると、Pixel Fine Converter はデフォルトの 白背景 で変換します。デザインカンプの想定が「薄いグレー」「ダークモード黒」等の場合、変換後に手で修正する必要があります。

3. アートボードサイズの整合性

複数のアートボードで異なる画面サイズ（モバイル 375 × 812 とデスクトップ 1440 × 900 の混在）が含まれている場合、変換は問題なく行われますが、Figma 上でレスポンシブ確認するときには 画面サイズ別にページを分ける 運用が一般的です。

4. プロトタイプ接続の確認

XD でアートボード間にプロトタイプ接続（タップでアートボード A から B へ）を設定していた場合、Pro プランではプロトタイプ接続が自動変換されます（tap / hover / drag のトリガー、dissolve / smart-animate / slide / push 等のトランジション、画面遷移 / オーバーレイ / 戻る / スクロール遷移、状態遷移）。Free プランではアートボード ID は内部の idMap に記録されますが、プロトタイプ接続自体は自動再現されない ため、Pro へ切り替えるか変換後に Figma 側で手動再構築する必要があります。

5. Free プランの上限を超える場合の対応

XD ファイルが 4 アートボード以上ある場合、Free プランでは最初の 3 つしか変換されません。プログレスバーの表示「{total} 件の artboard を検出。最初の {limit} 件のみ変換（Free プラン上限）」を必ず確認 し、Pro 切り替え or ファイル分割の判断をします。

❓ よくある質問

Q1. XD のアートボード名は Figma にそのまま入りますか？

はい、artboard.name がそのまま frame.name になります。日本語名、英数字混在、スラッシュ区切り（Home/Default 等）もすべてそのまま反映されます。

Q2. アートボードのサイズはピクセル単位で保持されますか？

はい、width と height はピクセル単位でそのまま frame.resize(width, height) に渡されます。375 × 812 の XD アートボードは Figma でも 375 × 812 のフレームになります。

Q3. アートボードの背景色は維持されますか？

維持されます。SOLID（単色）の背景色は RGB + alpha がそのまま frame.fills に適用されます。背景色が設定されていない場合は 白背景がデフォルト で適用されます。

Q4. アートボードの座標は変わりますか？

XD のグローバル座標（ファイル全体での位置）は、Figma のフレーム内ローカル座標（フレーム原点 = (0, 0)）に変換されます。子要素の見た目は変わらず、座標表現だけがフレーム原点基準に書き換わる のがこの処理です。

Q5. Free プランで何アートボードまで変換できますか？

最大 3 アートボード までです。4 つ以上ある XD ファイルを変換した場合、最初の 3 つだけが変換され、残りはスキップされます。プログレスバーには「{total} 件の artboard を検出。最初の {limit} 件のみ変換（Free プラン上限）」と表示されます。

Q6. Pro プランにすればアートボード数の制限はなくなりますか？

はい、Pro プランでは内部的な上限チェックを通さず全アートボードがそのまま処理対象になるため、制限はありません。50 アートボード / 100 アートボードの大規模 XD ファイルもすべて変換対象になります。

Q7. XD のプロトタイプ接続（画面遷移）は Figma で再現されますか？

Pro プランでは、XD のプロトタイプ接続（トリガー / トランジション / ナビゲーション / 状態遷移）が Figma 側で自動再現されます。Free プランではアートボード ID のみ idMap に記録され、接続自体は手動再構築が必要です。複雑なカスタム接続は Pro でも一部手動での調整が必要になる場合があります。

Q8. アートボードのネスト（グループ階層）はどうなりますか？

XD のグループ階層はそのまま Figma 側で再現されます。3 階層以上のネストも維持され、名前 / 階層 / 順序 はすべて保持されます。Auto Layout 配下のグループは、変換時に Figma の Frame に置き換えられます。

🎯 まとめ

XD アートボードから Figma フレームへの変換は、5 つの属性の 1:1 対応 + 座標系の正規化 が基本構造です。Pixel Fine Converter は、1:1 マッピングを徹底することで精度を保っています。

重要ポイント

名前 / サイズ / 背景色 / クリッピング: 4 属性は 1:1 で保持される
座標系: グローバル座標 → フレーム内ローカル座標へ正規化（見た目は変わらず）
Free プラン制限: 最大 3 アートボード（変換精度は Pro と同一）
Pro プラン: アートボード数の制限なし、大規模 XD ファイルも一括変換可
グループ階層: 名前 / 階層 / 順序がそのまま保持される
プロトタイプ ID: 内部記録あり、Pro プランではプロトタイプ接続も自動変換、Free プランでは手動再構築

移行の進め方

まず Free で 3 アートボードを試す — 変換精度の判定材料を取れる
精度に納得したら Pro に切り替えて残りも一括変換
変換後は 新しい Figma ページ で結果を確認、既存ページは無傷
プロトタイプ接続は Pro プランで自動変換（Smart Animate / 各種トランジション / 状態遷移含む）、Free プランでは Figma 側で手動再構築

XD から Figma への移行は、ツール変更というよりも デザインデータの永続性確保 という観点で進めると、長期的な視点が明確になります。アートボードのマッピングが 1:1 で揃っていれば、その後のスタイル管理・コンポーネント化・レスポンシブ化はすべて Figma の標準機能で運用できます。

XD アートボードを Figma フレームに 1:1 変換 Figma Community から無料インストール