Adobe XDのスタックを組み直す手間はもう不要！Figmaのオートレイアウトへ忠実に変換します！

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

カードの一覧、フォームの並び、ナビゲーションバー — XDで「スタック（content-aware group）」として整えたレイアウトを、Figmaで一つひとつオートレイアウトとして組み直す作業は、大規模ファイルでは数時間〜数日単位の工数になります 😇

Pixel Fine Converter は、XDのスタック構造をFigmaネイティブのオートレイアウトとして復元します！方向・余白・配置・子要素のサイジングまで、XD側の意図を座標から読み取り、そのままFigmaに落とし込みます。

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

📋 変換で再現される要素

Pixel Fine ConverterのPro版では、以下のオートレイアウト関連プロパティをXDから推論・再現します！

要素	内容
Direction	XDの `contentStackType`（horizontal / vertical）を判定し、Figmaの `layoutMode` へマッピング
Padding	スタックの外周余白を保持
Item spacing	子要素間の余白を計算し、`itemSpacing` として設定
Cross-axis alignment	XDには明示的な alignment プロパティが存在しないため、子要素の座標から MIN / CENTER / MAX を推論
Resizing	子要素の `FIXED` / `FILL` / `HUG` を、XDのサイジングルールから推定
Fallback処理	オートレイアウト化が難しい構造（外れ値を含むspacing、不規則な配置）は、無理に変換せずプレーンフレームとして保持

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

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

XDのスタックとFigmaのオートレイアウトは、見た目こそ似ていても情報の持ち方がまったく違います。この差を埋めるために、Pixel Fine Converter は座標情報から「設計者の意図」を読み解く処理をたくさん走らせています！

🎯 XDには alignment 情報が記録されていない

最大の壁は、「XDには明示的な alignment プロパティが存在しない」 という事実です。XDでは子要素は座標で配置されるため、「この列は中央揃え」「あの列は右寄せ」という情報は、ファイル内に直接記録されていません。

Figma側ではオートレイアウトを成立させるために MIN / CENTER / MAX のいずれかを必ず指定する必要があります。Pixel Fine Converter は、スタック内の子要素の座標分布を統計的に分析し、「この並びは中央寄せに見える」「この並びは左寄せだ」と推論してマッピングします。なかなか地道な処理です！

📏 等間隔かどうかを判定する閾値

オートレイアウトは「子要素間の余白がすべて等しい」ことを前提にしています。一方XDでは、設計者が意図的に不規則な余白を作ることもあります（区切り線を挟むケース、装飾要素を意図的に離して配置するケースなど）。

Pixel Fine Converter は子要素間の余白を計測し、ばらつきが閾値を超えた場合はオートレイアウト化を諦めてプレーンフレームへフォールバックします。無理に等間隔へ均してしまうと、せっかくのデザイン意図が壊れてしまうからです 🛡️

🎁 部分的な余白を持つ子要素の救済

「見出しと本文だけ少し離れている」「カード列の最後だけマージンが大きい」など、一部の子要素だけ特殊な余白を持つケースは、オートレイアウトでは表現が難しい構造です。

Pixel Fine Converter はこのようなケースを検出した場合、透明なラッパーフレームで position を保持し、見た目を崩さずに変換します。オートレイアウトにできない部分を諦めるのではなく、せめて見た目だけは忠実に — そんな判断を1ノードごとに繰り返しています 💪

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

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

XDで意図的に不規則配置したスタックは、オートレイアウトにならずプレーンフレームとして変換されます（誤変換を防ぐための設計です）
cross-axis alignment の推論は Alignment inference モードセレクタで信頼度を切り替えられます（Off / Strict / Balanced（既定） / Native-first）。意図しない中央寄せを避けたい場合は Off、Figma ネイティブの CENTER を最大限維持したい場合は Native-first を選択
大きい要素と小さい要素が混在するコンテナでは、配置がずれることがあります。Alignment inference を Strict または Native-first にするとサイズの大きい要素を優先した重み付き投票が動き、視覚的なずれを最小限に抑えます
配置の推定結果に十分な確信が得られないフレームでは、Skip ambiguous auto-layout オプションを有効にすることでオートレイアウトを適用せず、元の XD 座標を正確に保持するプレーンフレームとして変換できます
幅がコンテナ一杯の要素と狭い要素が混在し、多数決の CENTER で狭い要素だけが中央に飛び出してしまうケースでは、Alignment inference の Balanced（既定） または Strict に内蔵された CENTER 検証が、CENTER 適用時の最大変位を検出して元のレイアウトが崩れる前に MIN 配置へ降格させます
子要素のサイジング（FILL / HUG）の推論は、XDのサイジングルールから「もっともらしい値」を選びます。設計者の意図と完全に一致しない場合は、Figma側で微調整が必要になることがあります
全オプションの挙動は Guide: Auto Layout のリファレンスで確認できます

座標情報からの推論である以上、「完璧」な再現は不可能かもしれませんが、「満足」できるレベルでの再現は可能ではないかと考えています。今後も、お使いいただくユーザーの皆様にご満足いただけるプラグインを目指して、開発を続けてまいります。

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

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

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

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

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