XD プロトタイプを Figma に自動変換 — どこまで再現できて、何ができないのか

「Adobe XD でつくったプロトタイプ接続、Figma に移行したら全部つなぎ直しなのか」「タップやホバー、Smart Animate はそのまま動くのか」「Component States の切替も自動で再現されるのか」— XD から Figma に移行する際、プロトタイプの再現範囲 は手戻りに直結する重要なポイントです。

XD には Trigger / Action / Destination / Animation を組み合わせた強力なプロトタイプ機能があり、画面遷移・オーバーレイ・Smart Animate・Component States の切替などをノーコードで設計できます。これを Figma に移すとき、手動でつなぎ直す前提なのか、自動変換できるのか は、移行コストの見積もりを大きく左右します。

この記事では、Pixel Fine Converter の実際のプロトタイプ変換挙動をもとに、XD プロトタイプ → Figma インタラクションのマッピングを詳細に解説 します。Pro 機能として包括的に自動変換される範囲、Component States → バリアントの自動切替、そして Figma API 由来で再現できない限界まで、移行担当者が把握すべき技術的詳細を網羅します。

XD → Figma 移行の全体プロセス は Adobe XD から Figma への移行実践ガイドを参照。アートボード単位のマッピング詳細 は XD アートボードを Figma フレームに変換、Free / Pro 境界の全体像 は XD から Figma へ無料で変換 — 有料プラグインに切り替えるタイミングを参照。本記事は プロトタイプ単位の自動変換 に焦点を絞っています。

📝 はじめに — XD プロトタイプを Figma でどう扱うか

XD で構築したプロトタイプを Figma に変換するとき、現実的には次の 3 つのシナリオが考えられます。

全部手動でつなぎ直す — 接続を一つひとつ Figma で再構築する。確実だが、画面数が増えると工数が爆発する
部分的に自動変換 + 残りを手動補正 — シェイプやコンポーネントは自動変換、プロトタイプ接続だけ手動。多くの変換ツールがこの構成
プロトタイプも含めて自動変換 — トリガー・アクション・アニメーション・ステート切替まで一括で再現。Pixel Fine Converter の Pro 機能 が該当

本記事の主題はシナリオ 3 です。XD のプロトタイプ機能のどこまでが Figma に自動で再現されるのか、そして コード上の処理 + Figma API の仕様で再現できない部分はどこか を、実装レベルで整理していきます。

以下のポイントが論点になります。

Trigger（タップ / ホバー / ドラッグ）はどう対応付けられるか
Action（画面遷移 / オーバーレイ / 前画面に戻る / Smart Animate / スクロール）の自動変換範囲
Animation（dissolve / slide / push / smart-animate）と easing の対応
Component States の切替が Figma バリアントの state-transition に変換されるか
Figma API の仕様上、再現できない挙動 はどこにあるか

これらを順に整理します。

🎯 XD プロトタイプの基本要素

まず、XD プロトタイプを構成する 4 つの要素を整理します。Figma 側の対応概念も併記します。

要素	XD	Figma	役割
Trigger	tap / hover / drag	`ON_CLICK` / `ON_HOVER` / `ON_DRAG`	ユーザー入力の種類
Action	画面遷移 / オーバーレイ / 前へ / Smart Animate / スクロール	`NAVIGATE` / `OVERLAY` / `BACK` / `SCROLL_TO`	遷移の種類
Destination	遷移先アートボード ID	`destinationId`（Frame ID）	遷移先の参照
Animation	dissolve / slide / push / auto-animate	`DISSOLVE` / `SLIDE_IN` / `PUSH` / `SMART_ANIMATE`	遷移時のアニメーション

XD と Figma はプロトタイプの設計思想が近く、4 要素はほぼ 1:1 で対応します。ただし、Easing の種類 / Push の方向 / Drag 距離 / オーバーレイのアンカー位置 など、細部の挙動は微妙に違います。次節以降で詳しく見ていきます。

🔧 Pixel Fine Converter のプロトタイプ変換挙動

Pixel Fine Converter は、XD ファイルに含まれる interactions.json（プロトタイプ接続情報）を読み取り、Figma の setReactionsAsync API を呼び出して接続を復元します。

処理フロー

Pixel Fine Converter は、プロトタイプ接続を以下の順序で復元します。

ノード ID の対応付け: 変換時に XD の各ノードと Figma の対応ノードを紐付け
ステート遷移の対応付け: シンボル定義と各ステートを Figma のバリアント名（State=xxx）に対応付け
インスタンスの収集: シンボルごとに変換済みインスタンスを集約
インタラクションの適用: 各接続のトリガー / アクション / 遷移先を解決し、Figma のリアクション（setReactionsAsync）として設定

ここで重要なのは、XD のノード ID を Figma の対応ノードに正確に解決できなければ接続は復元できない という点です。コンポーネント変換時に削除されたノードや、解決できない遷移先がある場合、その接続は 変換できなかったものとして扱われ、スキップ されます。

自動変換の対象

Pixel Fine Converter が自動変換するインタラクションは、XD の interactions.json に含まれる以下のアクションです。

artboard-transition — 別アートボードへの画面遷移
overlay-transition — オーバーレイ表示
previous-artboard — 直前のアートボードに戻る
auto-animate — Smart Animate（要素の連続変化）
scroll-transition — 同一アートボード内のスクロール位置への遷移
state-transition — Component States の切替（Variant の CHANGE_TO）

XD のプロトタイプモードで設定できるインタラクションのほぼ全てがカバー範囲です。

setReactionsAsync を直接呼び出している意味

Pixel Fine Converter のプロトタイプ変換は、Figma の正式 API（setReactionsAsync）を直接呼び出し て接続を復元しています。これは「Figma のリンク機能を後から手動で組み直す代替手段」ではなく、XD と同じデータモデルを Figma のネイティブ表現で再構築している ということを意味します。プロトタイプビュー（再生モード）でも正しく動作します。

📊 対応するインタラクション一覧

具体的な対応関係を表で整理します。Pixel Fine Converter Pro が自動変換する範囲です。

Triggers（トリガー）

XD	Figma	補足
`tap`	`ON_CLICK`	標準のクリック / タップ
`hover`	`ON_HOVER`	マウスホバー（モバイルでは発火しない）
`drag`	`ON_DRAG`	ドラッグ開始時に発火
未知のトリガー	`ON_CLICK`	フォールバック（ON_CLICK で代替）

XD アクション	Figma navigation	挙動
`artboard-transition`	`NAVIGATE`	別フレームへ画面遷移
`overlay-transition`	`OVERLAY`	オーバーレイ表示（重ねて表示）
`previous-artboard`	`BACK`	直前のフレームに戻る
`auto-animate`	`NAVIGATE` + `SMART_ANIMATE`	同名レイヤーの差分アニメーション
`scroll-transition`	`SCROLL_TO`	同一フレーム内のスクロール位置に移動
`state-transition`	`CHANGE_TO`	Component States を別バリアントに切替（次節で詳述）

Transitions（遷移アニメーション）

XD トランジション	Figma transition	補足
`none`	なし	即座に切替（アニメーション無し）
`dissolve`	`DISSOLVE`	フェードイン / アウト
`auto-animate`	`SMART_ANIMATE`	同名レイヤーの差分補間
`slide-left / right / up / down`	`SLIDE_IN` + 方向	4 方向すべて保持
`push`	`PUSH`	⚠️ 方向は `LEFT` に統一（後述）

Easing（イージング）

XD	Figma
`ease-out`	`EASE_OUT`
`ease-in`	`EASE_IN`
`ease-in-out`	`EASE_IN_AND_OUT`
`linear`	`LINEAR`
未指定 / 未知	`EASE_OUT`（既定値）

なお、duration（持続時間）も properties.duration から保持されます。値が無い場合は既定値 0.3 秒で適用されます。

🔄 Component States → バリアントの自動変換

XD の Component States（コンポーネントステート）機能は、同じシンボルに対して複数の状態（Default / Hover / Pressed など）を持たせ、プロトタイプ上で切り替える仕組みです。Figma では バリアント（Variants） + state-transition という概念で同等の挙動を実装します。

変換の流れ

Pixel Fine Converter は、Component States の変換時に次の対応関係を構築します。

シンボル定義 node.id → symbolId のマッピング — どのコンポーネントが対象かを解決
state.id → “State=xxx” バリアント名 のマッピング — どの状態に切り替わるかを解決
シンボル ID → Default バリアント のリバースマップ — 元の状態に戻る遷移をサポート

XD のステート名はそのまま State=<名前> のバリアント名として保持されます（名前が空の場合は State=Variant にフォールバック）。

適用範囲

state-transition は、変換後に アートボード上に配置されている該当シンボルのインスタンス全て に適用されます。コンポーネント定義そのものではなく、実際にデザイン上で使われている各インスタンスごとに CHANGE_TO リアクションが設定される動きです。

これにより、XD でステート切替を組み込んだボタンやインタラクティブ要素は、Figma 側でも同じトリガー / アニメーションでバリアント切替が動作します。

既存のアクションとマージ

state-transition は、インスタンスが既に持っている他のリアクション（artboard-transition / overlay-transition 等）と マージして追加 されます。元の接続を上書きしません。

🔓 Free / Pro の境界

プロトタイプの自動変換は Pixel Fine Converter の Pro 機能 です。UI 上では、Convert Options の 「プロトタイプインタラクション変換」（Convert prototype interactions） チェックボックスとして提供されます。

Free プラン: このオプション自体が表示されません（プロトタイプ変換を含む Pro オプションは Pro プランでのみ表示され、Free ではアップグレード案内が出ます）
Pro プラン: オプションが表示され、既定で ON（チェック済み）。明示的にオフにすると変換をスキップできます

Free プランで試す場合

プロトタイプ変換の効果を確かめたい場合、Free プランでは以下のいずれかが現実的です。

小規模なファイルで一度 Pro を試す — Free / Pro の精度の差を実機確認、Pro 購入判断の根拠とする
プロトタイプ無しの基本変換で動作確認 — シェイプ / テキスト / スタイルの変換精度を Free で見極めてから Pro 判断

XD から Figma へ無料で変換 — 有料プラグインに切り替えるタイミングでは、プロトタイプ変換を含む Pro 機能と Free 機能の網羅的な比較を整理しています。

⚠️ Figma API 由来の限界

XD と Figma のプロトタイプ機能はかなり近い設計ですが、Figma 側の API 仕様で 完全には再現できない挙動 がいくつかあります。これらは Pixel Fine Converter の実装の問題ではなく、Figma プラットフォームレベルの制約です。透明性のために明示しておきます。

1. Push の方向は LEFT に統一される

push トランジションは Figma の PUSH + direction: 'LEFT' に変換されます。XD 側で push の方向（上下左右）を区別している場合、すべて LEFT に統一されます。

→ 影響: push を多用しているプロトタイプで方向感が違って見える可能性 → 回避策: 重要な遷移は slide-left/right/up/down を使うことで方向が保持される（slide 系は 4 方向すべてマッピング済）

2. Drag のオフセット距離は保持されない

XD の drag インタラクションでは、特定の距離をドラッグしたときに発火するオフセット値を設定できます。Figma の ON_DRAG トリガーにはこれに相当するパラメータが存在しないため、ドラッグの距離設定は反映されません。

→ 影響: 「特定距離以上ドラッグで発火」という設計が「ドラッグ開始で発火」に変わる → 回避策: ドラッグ距離の制御は Figma 側で別途設計し直す必要があり、Pixel Fine Converter では検出のみ行う

3. Overlay / scroll のアンカー位置とスクロール保持

overlay-transition および scroll-transition の変換では、アンカー位置（オーバーレイの表示位置オフセット） や preserveScrollPosition（背景のスクロール位置を保持するか）は明示的に設定されません。Figma 側のデフォルト挙動が適用されます。preserveScrollPosition を XD から伝播するのは artboard-transition と auto-animate のみで、overlay / scroll 接続では設定が落ちます。

→ 影響: オーバーレイの位置 / 背景のスクロール挙動 / scroll-to 接続が XD と微妙に異なる可能性（特にスクロール多用プロトタイプで顕在化） → 回避策: 重要なオーバーレイやスクロール接続は Figma 側で挙動を確認して微調整

4. 未知のトリガー / アクション / トランジションのフォールバック

XD のバージョンによっては、Pixel Fine Converter の対応マップに存在しないトリガー / アクション / トランジションが含まれる場合があります。実装上は以下のフォールバックが入ります。

未知の trigger → ON_CLICK
未知の transition → DISSOLVE
未知の action → スキップ（変換できなかった接続として扱う）

→ 影響: フォールバックでもプロトタイプは動作するが、原典通りではない → 回避策: 変換後に Figma のプロトタイプビュー（再生モード）で主要な遷移を再生し、意図通り動作しない接続を手動で補正する

5. 遷移先（Destination）の解決失敗時のスキップ

遷移先として参照されるアートボード / ノードがコンポーネント変換時に削除されたり、対応付けに失敗した場合、該当のインタラクションはスキップされます。この場合、接続が反映されないままエラーも出ない ため、気づきにくいケースです。

→ 影響: 大規模ファイルで一部の接続が反映されない可能性 → 回避策: 変換完了後、Figma 側でプロトタイプビューを使い、主要な遷移をひととおり確認

6. `State=Default` variant 名の強制固定

XD の Component States 変換時、シンボルの基準状態（default state）は常に Figma の State=Default という variant 名にマッピングされます。XD 側で Off / Idle / Normal などの別名を default として使用していても、Figma 側では State=Default に統一されます。default 以外の状態名は XD 側の名前が保持されます（例: State=Hover / State=Pressed）。

→ 影響: XD 側の「default」状態名に依存していた design system では、変換後に variant 名がずれ、コンポーネントドキュメントと Figma 上の variant セットで整合が取れなくなるケースが該当 → 回避策: 変換後に Figma 側で State=Default variant を design system の命名規則に揃えてリネームするか、design system のドキュメント側を変換後の命名に揃える。どちらでも対応可能だが、明示的にどちらかを選ぶ

変換後はプロトタイプビューで確認を

プロトタイプ接続が意図通り再現されたかは、変換後に Figma の プロトタイプビュー（再生モード） で主要な遷移を実際に再生して確認するのが確実です。特に push の方向 / オーバーレイの表示位置 / スクロール挙動 / Component States の切替は、再生して目視で確認することをおすすめします。

✅ プロトタイプ移行時のチェックリスト

XD → Figma のプロトタイプ移行を進めるときの確認項目を整理します。

移行前

✅ Pixel Fine Converter Pro プランを購入済み（プロトタイプ変換は Pro 機能）
✅ XD ファイルのプロトタイプモードで主要な遷移を一覧化（重要度の優先順位付け）
✅ Component States を使っているシンボルをリストアップ
✅ push 系トランジションの使用箇所を確認（方向統一の影響範囲を把握）

移行直後

✅ Figma 側でプロトタイプビューを起動し、主要な遷移を再生確認
✅ Component States の切替が期待通りのバリアントに遷移するか確認
✅ Smart Animate（同名レイヤーの差分補間）が滑らかに再生されるか
✅ Overlay の表示位置が想定通りか

微調整が必要な項目

📝 Push の方向が意図と違う場合 → Figma 側で方向を手動設定
📝 Drag の距離設定が必要な場合 → Figma 側で別途調整
📝 Overlay のアンカー位置 / スクロール保持 → Figma の OVERLAY 設定で調整
📝 反映されなかった接続 → プロトタイプビューで遷移を確認して手動補正

🚀 Pixel Fine Converter Pro でプロトタイプも一括変換

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

💬 よくある質問

Q: Free プランでプロトタイプ変換は試せますか？

A: いいえ。プロトタイプ自動変換は Pro 機能で、Free プランではこのオプション自体が表示されません（プロトタイプ変換を含む Pro オプションは Pro プランでのみ表示されます）。プロトタイプを含まない基本変換（シェイプ / テキスト / コンポーネント構造）は Free でも試せます。

Q: XD で組んだプロトタイプの全ての接続が再現されますか？

A: トリガー（tap / hover / drag）、アクション（画面遷移 / オーバーレイ / 前画面 / Smart Animate / スクロール）、Component States 切替は包括的に変換されます。ただし、Push 方向の統一 / Drag 距離 / Overlay アンカー位置などの細部は Figma API の制約で完全再現できないケースがあります（Figma API 由来の限界を参照）。

Q: Component States は Figma バリアントとして変換されますか？

A: はい。XD の各 State は Figma の State=<名前> バリアントに変換され、state-transition アクションは Figma の CHANGE_TO リアクションとして該当インスタンスに適用されます。Default ステートは State=Default として保持されます。

Q: 変換できなかったインタラクションはどう確認できますか？

A: 変換後に Figma の プロトタイプビュー（再生モード） で主要な遷移を再生し、意図通り動作しない接続がないかを確認します。特に画面数の多いプロトタイプでは、push の方向 / オーバーレイの位置 / Component States の切替を重点的にチェックすると、補正が必要な箇所を効率的に絞り込めます。

Q: Figma 側で接続を手動で組み直すよりも早くなりますか？

A: 接続数が多いほど効果が大きくなります。10〜20 接続程度の小規模なプロトタイプなら手動でも 30 分程度ですが、画面数が数十を超えると手動再構築は数時間〜数日に膨らみます。Pixel Fine Converter Pro は実行時に一括処理するため、規模が大きいほど時間効率の差が出ます。

Q: 移行後に Figma 側でプロトタイプを修正したら、再変換時にどうなりますか？

A: Pixel Fine Converter の変換は新しい Figma ページに出力するため、既存の Figma 編集を上書きしません。再変換すると別ページに新しい変換結果が生成されるので、手動修正と並行運用できます。

🎯 まとめ

XD から Figma へのプロトタイプ移行は、手動で組み直すと工数が大きく膨らみます。Pixel Fine Converter Pro は トリガー / アクション / アニメーション / Component States を包括的に自動変換 することで、この工数を大幅に削減します。

自動変換の対象:

Triggers: tap / hover / drag
Actions: 画面遷移 / オーバーレイ / 前画面 / Smart Animate / スクロール / state-transition
Animations: dissolve / slide（4 方向）/ push / smart-animate
Easings: ease-out / ease-in / ease-in-out / linear
Component States → Figma バリアントの自動切替

Figma API 由来の限界:

Push 方向の LEFT 統一
Drag のオフセット距離
Overlay のアンカー位置 / スクロール保持
未知の trigger / action / transition のフォールバック

これらの限界は、変換後に Figma のプロトタイプビューで主要な遷移を再生確認することで把握でき、手動補正が必要な箇所を効率的に特定できます。

プロトタイプ移行の判断指針

接続数が多い大規模プロジェクト → Pro でプロトタイプ自動変換、プロトタイプビューで補正点を特定
接続数が少ない単発移行 → Free で基本変換確認後、Pro 判断
Component States を多用 → Pro の state-transition 自動変換が最も効果を発揮する領域

最終的にプロトタイプ移行の精度は、ファイル構造と Component States の設計次第で変わります。実際の変換結果を確かめてから判断するのが確実です。

🚀 Pixel Fine Converter を Figma Community からインストール

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

XD プロトタイプを Figma に自動変換 — どこまで再現できて、何ができないのか

📝 はじめに — XD プロトタイプを Figma でどう扱うか

🎯 XD プロトタイプの基本要素

🔧 Pixel Fine Converter のプロトタイプ変換挙動

処理フロー

自動変換の対象

📊 対応するインタラクション一覧

Triggers（トリガー）

Actions（アクション） / Navigation（ナビゲーション）

Transitions（遷移アニメーション）

Easing（イージング）

🔄 Component States → バリアントの自動変換

変換の流れ

適用範囲

🔓 Free / Pro の境界

Free プランで試す場合

⚠️ Figma API 由来の限界

1. Push の方向は LEFT に統一される

2. Drag のオフセット距離は保持されない

3. Overlay / scroll のアンカー位置とスクロール保持

4. 未知のトリガー / アクション / トランジションのフォールバック

5. 遷移先（Destination）の解決失敗時のスキップ

6. `State=Default` variant 名の強制固定

✅ プロトタイプ移行時のチェックリスト

移行前

移行直後

微調整が必要な項目

💬 よくある質問

Q: Free プランでプロトタイプ変換は試せますか？

Q: XD で組んだプロトタイプの全ての接続が再現されますか？

Q: Component States は Figma バリアントとして変換されますか？

Q: 変換できなかったインタラクションはどう確認できますか？

Q: Figma 側で接続を手動で組み直すよりも早くなりますか？

Q: 移行後に Figma 側でプロトタイプを修正したら、再変換時にどうなりますか？

🎯 まとめ

プロトタイプ移行の判断指針

関連ページ

XD プロトタイプを Figma に自動変換 — どこまで再現できて、何ができないのか

📝 はじめに — XD プロトタイプを Figma でどう扱うか

🎯 XD プロトタイプの基本要素

🔧 Pixel Fine Converter のプロトタイプ変換挙動

処理フロー

自動変換の対象

📊 対応するインタラクション一覧

Triggers（トリガー）

Actions（アクション） / Navigation（ナビゲーション）

Transitions（遷移アニメーション）

Easing（イージング）

🔄 Component States → バリアントの自動変換

変換の流れ

適用範囲

🔓 Free / Pro の境界

Free プランで試す場合

⚠️ Figma API 由来の限界

1. Push の方向は LEFT に統一される

2. Drag のオフセット距離は保持されない

3. Overlay / scroll のアンカー位置とスクロール保持

4. 未知のトリガー / アクション / トランジションのフォールバック

5. 遷移先（Destination）の解決失敗時のスキップ

6. State=Default variant 名の強制固定

✅ プロトタイプ移行時のチェックリスト

移行前

移行直後

微調整が必要な項目

💬 よくある質問

Q: Free プランでプロトタイプ変換は試せますか？

Q: XD で組んだプロトタイプの全ての接続が再現されますか？

Q: Component States は Figma バリアントとして変換されますか？

Q: 変換できなかったインタラクションはどう確認できますか？

Q: Figma 側で接続を手動で組み直すよりも早くなりますか？

Q: 移行後に Figma 側でプロトタイプを修正したら、再変換時にどうなりますか？

🎯 まとめ

プロトタイプ移行の判断指針

関連ページ

6. `State=Default` variant 名の強制固定