Adobe XDで作成したコンポーネントを忠実に再現！Figmaでもそのまま使えます！

Adobe XDからFigmaへの移行で、最も再構築のコストが高い作業の1つとしてあげられるのがコンポーネントの変換です。（同じくらい大変な作業として、オートレイアウトの変換があります。こちらについては『Adobe XDのスタックを、Figmaのauto-layoutへ忠実に変換』で解説していますので合わせてご覧ください！）

ボタン、カード、ナビゲーションバー — デザインシステムの中核を担う要素を、手作業でFigmaのコンポーネントとして組み直すのは、大規模ファイルでは現実的ではありません 😇

Pixel Fine Converter は、XDのシンボル定義をFigmaのメインコンポーネントに、シンボルインスタンスをFigmaインスタンスに変換します。テキストやスタイルのオーバーライド、インスタンスごとのリサイズ、さらにはhover・pressedなどのステートをFigmaバリアントとして忠実に復元します！

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

📋 変換で再現される要素

Pixel Fine ConverterのPro版では、以下のコンポーネント関連の構造をXDから再現します！

要素	内容
メインコンポーネント	XDのシンボル定義を Figma のメインコンポーネントに変換。レイヤー階層・スタイル・子ノード構造をそのまま保持
インスタンス	XDのシンボルインスタンスを Figma インスタンスとして配置。メインコンポーネントとの参照関係を維持
テキストオーバーライド	インスタンスごとのテキスト変更を保持。文字単位のカラー指定（range fill）も再現
スタイルオーバーライド	インスタンスごとの色・不透明度・表示/非表示の変更を保持
インスタンスリサイズ	マスターと異なるサイズを持つインスタンスを、ソースサイズに合わせてリサイズ。許容誤差（Strict / Standard / Tolerant）で精度を制御
ステート → バリアント	XDのコンポーネントステート（hover、pressed等）を Figma の Component Set 内バリアントとして変換。`State=Hover` のようなバリアントプロパティで管理

これらの変換は、XDのドキュメント構造を解析してローカル（ユーザーが利用しているパソコンなど）で処理されます。ファイルのデータを外部サーバーなどに送信することは一切ありません。 🔒

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

XDとFigmaではコンポーネントモデルの設計思想が根本的に異なります。この違いが、単純な変換を不可能にしています！

⚡ XDの柔軟性 vs Figmaの厳密性

XDのインスタンスは非常に自由度が高く、マスターシンボルと構造が異なっていても許容されます。子ノードの型が変わったり（矩形がマスクグループになる等）、子ノードの順序や数が変わることもあります。

一方、Figmaのインスタンスはメインコンポーネントと完全に同じ構造でなければなりません。子ノードの追加・削除・型の変更はできず、許可されるのはプロパティのオーバーライドのみです。ここが大きなギャップです！

🔎 構造の一致検証

Pixel Fine Converter はインスタンスを作成する前に、マスターコンポーネントとインスタンスのノードツリーを再帰的に比較し、構造が一致しているかを検証します。

✅ ノード型の一致（GROUP と FRAME 間の揺れは許容）
✅ サイズの一致（寸法の1%、最小1pxの許容誤差）
✅ 子ノードの位置と回転の一致
✅ ベクターパスの整合性

構造が一致しないインスタンスは、無理にインスタンス化せずプレーンフレームにフォールバックします。見た目はできるだけ忠実に再現しつつ、壊れたインスタンスを作らないための安全策です 🛡️

🧬 オーバーライドの選択的マージ

XDのインスタンスプロパティをマスターコンポーネントに重ねる際、すべてを単純に上書きすると構造が壊れます。Pixel Fine Converter は選択的なディープマージを行い、色・不透明度などのプリミティブ値はインスタンスの値を採用しつつ、コンポーネント構造に関わるメタデータ（型情報、制約、レイアウト情報）はマスターコンポーネント側を保持します。なかなか泥臭い処理です！

🔁 ステート変換の循環参照検出

XDのステートは別のステートを参照できるため、循環参照（無限ループ）が起こりえます。変換前にステートの参照グラフを走査し、循環がないことを確認した上でバリアントを生成します。また、大規模コンポーネント（500ノード超）ではメモリ制約を考慮し、バリアントの生成を自動的に制限する安全対策も行っています 💪

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

ここまでPixel Fine Converter の素晴らしい点をお伝えしてきましたが、先述した「XDとFigmaの設計思想の違い」から生じる問題をすべて解決できるわけではありません。技術的に対応が困難な部分、現実的に対応ができない部分もまだ残っています。これについてもここで少しだけお話させていただきます！

マスターコンポーネントと構造が大きく異なるインスタンスは、コンポーネントインスタンスではなくプレーンフレームとして変換されます。見た目は再現されますが、コンポーネントの参照関係は失われます
インスタンスのリサイズは高さがマスターコンポーネントと一致する場合に最も正確に動作します。大幅なサイズ変更があるインスタンスでは、許容誤差の設定による調整が必要な場合があります
テキストオーバーライドのフォント読み込みは非同期で行われるため、利用していないフォントが多いファイルでは変換時間がやや長くなることがあります
全オプションの挙動は Guide: Components オプションリファレンスで確認できます

設計思想の違い、構造的な違いについても「完璧」な再現は不可能かもしれませんが、「満足」できるレベルでの再現は可能ではないかと考えています。今後も、お使いいただくユーザーの皆様にご満足いただけるプラグインを目指して、開発を続けてまいります。

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

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

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

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

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