タップもホバーも画面遷移も！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ノード超）ではメモリ制約によりバリアント生成が制限されることがあります
全オプションの挙動は Guide: Export オプションリファレンスで確認できます

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

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

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

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

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

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