タップもホバーも画面遷移も！Adobe XDで組んだプロトタイプをFigmaでそのまま動かします！

XDで組み上げたプロトタイプ — 画面遷移、オーバーレイ、ホバーエフェクト、ボタンの押下ステート。これらを手作業でFigmaに再現するのは、デザインの再構築以上に手間のかかる作業です。（構造側の変換については『XDで作成したコンポーネントを忠実に再現！Figmaでもそのまま使えます！』『XDのスタックを組み直す手間はもう不要！Figmaのオートレイアウトへ忠実に変換します！』で解説していますので、合わせてご覧ください！）

画面数が多くなればなるほど、接続の数は指数的に増えていきます。100画面のアプリなら、画面遷移だけで数百本の矢印 — どこかで繋ぎ忘れが起こります。

Pixel Fine Converter は、XDのプロトタイプ接続をFigmaのプロトタイプフローとして復元します。さらに、XDのコンポーネントステート（hover、pressed等）はFigmaバリアントへのインタラクティブな切替として変換され、Figma上でそのまま動作するプロトタイプが得られます。変換直後にプレビューボタンを押せば、XDで組んだ動きがそのまま再生される — そんな体験を目指しています。

ご注意: プロトタイプ変換は Pro プラン（買い切り $29） の機能です。プラグイン本体は無料でインストールでき、Free プランでも構造・スタイル・グループなどの基本変換はご利用いただけます。

📋 変換で再現されるインタラクション

🖱️ トリガー

XDで設定したユーザー操作のトリガーを、Figmaの対応するトリガーへ変換します。

XD トリガー	Figma トリガー	用途
Tap	`ON_CLICK`	ボタンやリンクのクリック/タップ
Hover	`ON_HOVER`	マウスオーバー時のエフェクト
Drag	`ON_DRAG`	スワイプやドラッグ操作

🎯 ナビゲーション

トリガーに続く「何が起こるか」を定義するナビゲーションタイプも、対応する Figma のアクションへ変換されます。

XD ナビゲーション	Figma アクション	説明
画面遷移	`NAVIGATE`	別のアートボード（画面）への遷移
オーバーレイ	`OVERLAY`	モーダルやポップオーバーの表示
前の画面に戻る	`BACK`	直前の画面に戻る（遷移先の指定不要）
Auto-Animate	`SMART_ANIMATE`	XDのオブジェクト補間アニメーション → Figmaのスマートアニメーションへ
スクロール先	`SCROLL_TO`	フレーム内の特定位置へスクロール
ステート変更	`CHANGE_TO`	コンポーネントバリアントの切替（ステート変換と連動）

🎞️ トランジション & イージング

画面遷移に伴うアニメーション効果も変換されます。

XD トランジション	Figma トランジション
Dissolve	`DISSOLVE`
Slide（左/右/上/下）	`SLIDE_IN` + 方向指定
Push	`PUSH` + 方向指定
None	即時遷移（トランジションなし）

イージングカーブ（ease-out / ease-in / ease-in-out / linear）とデュレーション（秒数）もそのまま引き継がれます。細かい「滑らかさ」の調整まで反映されるので、XDで作り込んだ動きの質感がそのままFigmaに持ち込めます。

🔁 ステートからバリアントへの変換

XDではコンポーネントに「ステート」を持たせることができます。Default、Hover、Pressed、Disabled といった状態を1つのコンポーネント内で切り替える仕組みですね。

Figmaにはステートという概念はありませんが、Component Set 内のバリアントで同等の構造を表現できます。Pixel Fine Converter は以下のようにマッピングして変換します。

XD	Figma
コンポーネント + ステート群	Component Set（バリアントプロパティ `State=Default`, `State=Hover` 等）
ステート変更インタラクション	`CHANGE_TO` アクション（バリアント間の切替）
デフォルトステート	`State=Default` バリアント（マスター定義から生成）

プロトタイプとの連動: ステート変換はプロトタイプのインタラクション変換と連携しています。例えば、XDで「ホバー時にHoverステートに切り替わる」というインタラクションは、Figmaでは「ON_HOVER トリガーで State=Hover バリアントに CHANGE_TO」として再現されます。変換後、Figmaのプロトタイプモードでそのまま動作確認が可能です。

🧩 なぜこれが技術的に難しいのか

プロトタイプの変換は、見た目よりも「参照関係」を扱う処理が主役です。ノード同士の接続、ステート同士の参照、削除済みノードへのファントムリンク — これらを壊さずにXDからFigmaへ橋渡しする必要があります。

🔗 ノードIDの橋渡し

プロトタイプの接続は「ノードAのタップでノードBに遷移する」という参照関係です。XDのノードIDとFigmaのノードIDは当然異なるため、変換時にID間のマッピングテーブルを構築する必要があります。

Pixel Fine Converter は、全ノードの変換が完了した後にプロトタイプ接続を適用します。この順序が逆だと、まだ生成されていないノードへの接続が失われてしまうからです。アートボードIDも専用のマップで追跡し、画面遷移の宛先が正しく解決されるようにしています。地味ですが、ここで手を抜くと接続がボロボロになる箇所です。

👻 存在しない宛先への対応

XDファイルの編集履歴によっては、削除されたアートボードやコンポーネントを参照するインタラクションが残っていることがあります。ユーザー側でも気づきにくいゴーストリンクです。

変換時に宛先ノードの存在を検証し、無効な接続はスキップしてカウントします。適用数とスキップ数はログに記録され、変換ノート機能を有効にすればレポートとして確認できます。見えないエラーを可視化する仕組みです。

🛡️ ステート変換の安全性確保

XDのステートは他のステートを参照できる構造のため、理論的には循環参照が発生しえます。変換前にステートの参照グラフを走査し、循環がある場合は安全にスキップします。無限ループで変換が固まる、という最悪の事態を避けるための安全弁です。

また、大規模なコンポーネント（500ノード超）ではFigmaプラグインのメモリ制約を考慮し、デフォルトバリアントの生成を制限する保護機構も入っています。

✨ Auto-Animate → Smart Animate

XDのAuto-AnimateはFigmaのSmart Animateに対応しますが、補間ロジックが完全に同一ではありません。同名レイヤー間のプロパティ補間という基本原理は共通しているため、多くのケースで自然に動作しますが、複雑なパスアニメーションやマスク変化を含む遷移では差異が生じる可能性があります。

ここは「どこまで寄せきれるか」が焦点で、プロパティ単位での変化（位置・サイズ・不透明度・回転など）については忠実に再現できます。

⚠️ 限界とスコープ（正直にお伝えします）

ここまでプロトタイプ変換の仕組みをお伝えしてきましたが、XDとFigmaのプロトタイプシステムには設計上の違いがあり、完全に同一の挙動にはなりません。正直にお伝えしておきたい点をまとめます。

削除されたノードを参照するインタラクション は変換できません（スキップされ、件数がログに記録されます）
XDのAuto-AnimateとFigmaのSmart Animateは完全に同一ではありません。単純なプロパティ変化（位置・サイズ・不透明度・回転）は忠実に再現されますが、複雑なパス変形やマスク変化を含む遷移では差異が出る場合があります
ステートを持つコンポーネントのインスタンスが存在しない場合、CHANGE_TO の接続先が生成されないためスキップされます
大規模コンポーネント（500ノード超） ではメモリ制約によりバリアント生成が制限されることがあります
Push トランジションの方向情報は破棄され、すべて LEFT として変換されます（XD で右 / 上 / 下方向の Push を指定していても Figma 側では LEFT に統一）。SLIDE トランジションは各方向（LEFT / RIGHT / TOP / BOTTOM）が正確に変換されるため、方向を保ちたい場合は SLIDE への置き換えを推奨します
Overlay の anchor 位置 は XD の自由配置と Figma の anchor プリセットの違いから、ピクセル単位で完全一致しないケースがあります
未知のトリガー / ナビゲーションタイプ（XD 側の将来拡張等）が含まれていた場合、安全な fallback として NAVIGATE 相当の挙動に置き換わります
State=Default の命名 はマスターステートを必ず State=Default として固定生成します（XD 側で別名にしていた場合も Figma 側で Default に統一）

これらの細部の挙動と回避策はブログ: XD プロトタイプを Figma に自動変換で詳しく解説しています。全オプションの挙動は Guide: Export オプションリファレンスで確認できます。

完全に同一の挙動にはならなくとも、「変換直後にFigmaのプロトタイプモードを開けば、XDで組んだ動きがほぼそのまま再生される」 — そんな体験を目指して日々改善を続けています。今後もユーザーの皆様にご満足いただけるプラグインに育てていきたいと考えています。

❓ よくある質問 (FAQ)

Q1. 対応していない XD のプロトタイプ機能はありますか？

XD には Tap / Hover / Drag に加えて Time（時間ベース） / Voice（音声） / Keys & Gamepad といったトリガーが存在しますが、Pixel Fine Converter では Tap / Hover / Drag のみを変換対象 としています（Figma に Voice トリガーがなく、Time / Keys & Gamepad は利用頻度を踏まえた実装上の判断による）。実用上の利用頻度が高い Tap / Hover / Drag と、それに続くナビゲーション・ステート遷移を中心にカバーしています。

Q2. Auto-Animate と Smart Animate の差はどこまで埋まりますか？

同名レイヤー間でのプロパティ補間という基本原理は共通しているため、位置 / サイズ / 不透明度 / 回転 といった単純な変化はほぼ忠実に再現されます。一方、パス変形やマスク変化を含む遷移 では補間ロジックの差で見た目が一部異なる場合があります。実機で再生して確認するのが確実です。詳細はブログ: XD プロトタイプを Figma に自動変換を参照してください。

Q3. 変換に失敗したインタラクションはどうやって確認できますか？

変換時にスキップされた接続の 件数とノード名がログに記録 されます。Export オプションで 「Generate conversion notes」 を有効にすると、Figma ページ上に変換レポートが生成され、スキップされた接続が視覚的に確認できます。設定詳細は Guide: Export オプションリファレンスを参照してください。

Q4. Push トランジションの方向はすべて変換されますか？

Push トランジションは 方向情報が破棄され、すべて LEFT として変換されます（XD で右 / 上 / 下方向の Push を指定していても Figma 側では LEFT に統一）。一方、SLIDE トランジション は各方向（LEFT / RIGHT / TOP / BOTTOM）が正確に変換されます。Push の方向を保ちたい場合は SLIDE トランジションへの置き換えを検討してください。

Q5. 大規模プロトタイプ（500 ノード超）でも問題なく動きますか？

通常のプロトタイプ接続（画面遷移・オーバーレイ等）は規模に関わらず変換されます。500 ノードを超える単一コンポーネント に限り、Figma プラグインのメモリ制約からバリアント生成が制限される保護機構が働きます。これは変換が固まることを防ぐための安全弁で、該当した場合はログに記録されます。

Q6. XD のステートの命名を Figma 側でカスタマイズできますか？

Pixel Fine Converter はステートを State=<名前> 形式のバリアントプロパティに変換し、マスターステートは 必ず State=Default として固定生成します。XD 側で別名（例: Normal、Idle）にしていた場合も Figma 側では Default に統一されます。変換後に Figma 上でリネームすれば命名は自由に変更可能です。

Q7. プロトタイプ変換は無料プランで試せますか？

プロトタイプ変換とステート → バリアント変換は Pro プラン（買い切り $29） の機能です。プラグイン本体は無料でインストールでき、Free プランでは構造・スタイル・グループなどの基本変換をご利用いただけます。まずは Free プランで基本変換の精度を確認し、プロトタイプ変換が必要になったタイミングで Pro にアップグレードすることをおすすめします。

🚀 まずは無料プランで、変換精度を確かめてください

Pixel Fine Converter はFigma Communityから無料でインストールできます。Free プランでは、shape / text / style / group / mask / image / transform の基本変換がすべてご利用いただけるので、まずは手元の.xdファイルで変換品質を確認してみてください。

プロトタイプ接続、ステートのバリアント変換を必要とされる場合は、Pro プラン（買い切り $29、サブスクリプション無し） へのアップグレードでご利用いただけます。

🚀 Figmaにプラグインをインストール（無料）

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