Adobe XD のスタックとリピートグリッドを Figma Auto Layout に変換する

XD から Figma に移行するとき、実は変換ツール選びで最大の差が出るのは Auto Layoutです。色やフォント、シェイプの再現はある程度どのツールも揃えてきますが、XD のスタックやリピートグリッドを Figma の Auto Layout に正確に持ち込めるか、そして Auto Layout 化された Frame の整列（Alignment）をどこまで自然に再現できるか は、ツールごとの実装力で大きく分かれます。

この記事では、Adobe XD のレイアウト概念（フリー配置 / スタック / リピートグリッド）が Figma 側でどう扱われるか を整理し、Pixel Fine Converter の Alignment 推定の仕組みと 4 つの整列推定モードの使い分け、そして 推定が効かないケースで手動補正をどう判断するか までを通しで解説します。

この記事で得られること

XD の 3 つのレイアウト概念と Figma Auto Layout の対応関係
Auto Layout に変換される対象は XD のスタック / リピートグリッドのみ（フリー配置はそのまま絶対配置として残る）という前提の理解
Alignment 推定が「投票」「降格」「偶然一致の検出」という 3 段階で動く仕組み
4 つの整列推定モード（Off / Strict / Balanced / Native-first）の使い分け基準
Alignment 推定の限界（偶然 CENTER 一致パターン等）と手動補正の指針

この記事の位置づけ

Auto Layout 機能の 正式仕様・全パラメータ は Features: Auto Layout 変換に、Auto Layout を含む変換全体のリファレンス は Guide: Auto Layout にまとまっています。本記事は 「XD ユーザーが移行時に何を理解しておくべきか」 に特化した読み物寄りの解説です。

📝 はじめに — Auto Layout 変換が変換ツールの差を分ける

XD ファイルを Figma に変換した後、こんな違和感を覚えたことはないでしょうか。

XD でスタックにしていたボタン群が Figma で Auto Layout になっておらず、要素を増やすたびに手で並べ直す必要がある
ボタンの中身（アイコン + ラベル）が Auto Layout 化されているが、整列が中央寄せになるべきところが左上寄せ（MIN）になっている
カードの繰り返しが Repeat Grid → 個別フレームに展開されていて、デザイントークンの恩恵を受けにくい

これらは変換ツールが、

XD の Stack / Repeat Grid 情報を Figma Auto Layout に正しく引き継げていない、または
Auto Layout 化はできたが、整列（Alignment）の推定を間違えた

のいずれかで起きます。逆に言えば、両方を高精度で処理できるツールほど、移行後の 編集効率と保守性 が大きく向上します。

まず押さえておきたい前提

Pixel Fine Converter の Auto Layout 化の対象は、XD で Stack（オートレイアウト）または Repeat Grid として定義された要素のみ です。XD でフリー配置の要素は、Figma 側でも Frame（layoutMode=NONE）として絶対配置のまま変換 されます。「Alignment 推定」と呼ぶ機能は、Auto Layout 化された Frame の中で 整列をどう決めるか を判定するもので、フリー配置を Auto Layout に作り変える機能ではありません。

📐 XD の 3 つのレイアウト概念

Adobe XD のレイアウトは大きく 3 つに分類できます。

概念	概要	特徴
フリー配置	親アートボード内に絶対座標で要素を配置	レイアウトルールなし、要素ごとに位置指定
スタック	グループ内の要素を縦 or 横に自動整列、間隔を一定に保つ	要素の追加・削除で他要素が連動して動く
リピートグリッド	同一テンプレートを繰り返し配置（リスト・カード列等）	テンプレートを編集すると全インスタンスに反映

XD ではこの 3 つを組み合わせてデザインを構成します。例えば「カードのリピートグリッドの中に、アイコン + テキストのスタックがある」のような入れ子構造です。フリー配置とスタック / リピートグリッドの違いが、Figma 移行時の挙動を分ける ため、現状の XD ファイルでどの要素がどの種類かを把握しておくことが移行成功の前提になります。

🎨 Figma Auto Layout はどう違うか

Figma の Auto Layout は XD のスタックに近い概念ですが、いくつかの拡張があります。

方向: 縦 / 横（XD のスタックと同じ）
間隔: アイテム間の固定値、または space-between
パディング: 上下左右の独立指定（XD のスタックより細かい）
整列: 主軸（縦/横）と交差軸の組み合わせで指定（左上、中央、右下など）
サイズ指定: Hug contents / Fixed / Fill container（XD には対応概念なし、Figma 独自）

XD の リピートグリッドは Figma にそのまま対応する概念がなく、Auto Layout の「縦並び + 1 アイテムをコンポーネント化 + インスタンス複製」という構成で再現することになります。

🗺️ XD レイアウト → Figma Auto Layout のマッピング

Pixel Fine Converter は次のようなマッピングルールで変換します。

XD 側	Figma 側	補足
スタック（縦）	Auto Layout（縦、`layoutMode=VERTICAL`）	間隔・パディングを XD から移植、整列（Alignment）は推定
スタック（横）	Auto Layout（横、`layoutMode=HORIZONTAL`）	同上
リピートグリッド	Auto Layout + コンポーネント + インスタンス	テンプレート要素をコンポーネント化、繰り返しをインスタンスで再現
フリー配置	Frame（`layoutMode=NONE`、絶対配置のまま）	Auto Layout 化されない。必要なら変換後 Figma 側で手動 Auto Layout 化

つまり、Auto Layout 化される対象は XD で Stack / Repeat Grid として定義された要素のみ です。フリー配置の要素は、変換後も Figma 上で絶対配置のまま残ります。「Alignment 推定」と呼ぶ機能は、上の表で Auto Layout 化された Frame について どの整列値（左上 / 中央 / 右下など、主軸 + 交差軸の組み合わせ）を採用するか を判定するもので、フリー配置を Auto Layout に作り変える機能ではありません。次節で具体的に見ていきます。

🔬 Pixel Fine Converter の Alignment 推定の仕組み

Alignment 推定は、Auto Layout 化された Frame の中で primaryAxisAlignItems（主軸の整列） と counterAxisAlignItems（交差軸の整列） を、子要素の座標から決定する仕組みです。3 つの手法 から構成されており、各モード（次節）がこれらをどう組み合わせるかで挙動が決まります。

手法 1: サイズ重み付き投票（Minimize alignment shift）

子要素の座標から、どの整列軸（左 / 中央 / 右、上 / 中央 / 下）が支配的かを投票で決定する際、各要素にサイズ比例の重みを持たせます。大きな要素の整列を優先することで、小さなアイコンの誤差で全体が揺れないようにします。Strict / Native-first モードで有効化されます。

手法 2: 拮抗時の降格（Skip ambiguous auto-layout）

投票結果が 拮抗している場合（例: LEFT 40% / CENTER 35% / RIGHT 25%）、Auto Layout を強制適用すると視覚崩れが起きやすい。このようなケースでは Auto Layout を諦めて plain Frame（layoutMode=NONE）に降格 します。「Auto Layout 化されないこと」を許容する代わりに、誤判定を防ぎます。なお、これはモードとは独立した直交トグルで、任意のモードと組み合わせ可能です。

手法 3: 偶然一致の検出（Guard center alignment）

例えば 2 要素しかない子要素が、たまたま CENTER で一致しているように見えるケース（実際は意図的な整列ではなく、サイズが揃った結果の偶然一致）。これを検出し、意図のない CENTER 推定を防ぎます。Strict / Balanced モードで有効化されます。

3 つの手法をモードで組み合わせる

単一の手法では推定精度に限界があります。「投票で支配的軸を決め → 拮抗時は降格 → 偶然一致をガード」 という 3 つの手法を、モードと直交トグルで適切に組み合わせるのが Pixel Fine Converter の Alignment 推定の中核です。いずれの手法も、Auto Layout 化された Frame の整列を決める処理 であり、フリー配置を Auto Layout に作り変える処理ではない点に注意してください。

🎚 4 つの Alignment 推定モードの使い分け

v1.3.0 から、Alignment 推定の挙動を alignmentInferenceMode というモードセレクタで制御できるようになりました。4 つのモードがあり、それぞれが「重み付き投票（手法 1）」と「偶然一致ガード（手法 3）」を異なる組み合わせで有効化します。

モード	挙動	適合シーン
Off	推定を一切無効化、すべての Auto Layout Frame で左上配置（MIN）	XD の構造をそのまま持ち込みたい / 後で手動で組みたい（Free プランは常にこのモード）
Strict	重み付き投票 + 偶然一致ガード両方 ON、多重検証で誤検出を最小化	誤判定を絶対に避けたい / 手動補正前提で確実なものだけ拾いたい
Balanced（デフォルト）	偶然一致ガード ON のみ、適度な確信度で CENTER 推定を適用	多くのユーザーに推奨、精度と適用率のバランス
Native-first	重み付き投票 ON、偶然一致ガード OFF、Figma ネイティブ寄りに CENTER を残しやすく	Figma 上で CENTER 整列をできるだけ残したい / 後で必要な箇所だけ手動で MIN に戻したい

最初は Balanced で

迷ったら Balanced（デフォルト） から試すのが安全です。変換結果を確認して、意図しない CENTER 整列が目立つ場合は Strict に上げる、CENTER が外れすぎて MIN ばかりになっている場合は Native-first に切り替える という調整が現実的です。

なお alignmentInferenceMode とは別に、Skip ambiguous auto-layout（投票拮抗時に Auto Layout を諦めて plain frame 化）と Preserve cross-axis offset（MIN 配置時の左余白保持）という 2 つの直交トグルがあります。これらは任意のモードと組み合わせ可能で、詳細は Guide: Auto Layout を参照してください。

⚠️ Alignment 推定の限界と手動補正の指針

Alignment 推定は完璧ではなく、いくつかのパターンでは 手動補正が必要 になります。

パターン 1: 偶然一致パターン

要素のサイズが揃っていて、結果的に CENTER で一致しているように見えるケース（並列配置のボタン群やアイコン群、フッター内の要素整列などで起きやすい）。Strict / Balanced モードに搭載されている偶然一致ガード（Guard center alignment）で多くを抑制しますが、すべてのケースを完全に検出できるわけではありません。変換結果を確認し、不自然な CENTER 整列があれば 手動で MIN に戻す、または該当 Frame の Alignment プロパティを Figma 側で調整します。

パターン 2: 入れ子の深いリピートグリッド

リピートグリッドの中にリピートグリッドが入っているような 入れ子構造 では、内側の繰り返し単位の構造復元精度が落ちることがあります。変換後にコンポーネント階層を確認し、必要なら手動で Component → Variant 構造に整理します。

パターン 3: 動的サイジングが必要なコンポーネント

Figma Auto Layout の Hug contents / Fixed / Fill container は、XD には対応概念がないため デフォルト値（Hug contents） で持ち込まれます。テキストやボタンで Fill container を期待するケースでは、変換後に手動で サイジング設定を Fill に変更 する必要があります。

パターン 4: フリー配置で残った要素を Auto Layout 化したい

XD でフリー配置だった要素は、変換後も Figma 上で絶対配置のままです。これを Figma で Auto Layout に整理したい場合は、

該当する要素群を Figma 上で複数選択
Shift + A で Auto Layout を適用
主軸方向 / 整列 / 間隔を手動で設定

という手順で対応します。XD 側で事前に Stack 化しておけば、この手作業を回避できる ため、移行前に XD ファイルを Stack 化しておくのが効率的です。

🔄 変換後のワークフロー

Auto Layout 変換と Alignment 推定の結果を活かすには、変換後に次のステップで整理するのが効率的です。

Balanced モードで変換: まずデフォルト設定で変換
アートボードを目視確認: Auto Layout 化された Frame と、フリー配置で残った Frame を分類
Alignment が不自然な箇所を修正: 偶然一致で CENTER になってしまった等のケースを Figma 側で MIN に戻す
フリー配置の要素を必要に応じて Auto Layout 化: XD でスタックにし忘れた箇所を Figma 側で手動 Auto Layout 化（Shift + A）
コンポーネント階層を整理: リピートグリッド由来のインスタンスを Component → Variant に整理
サイジング設定を調整: Fill container / Fixed が必要な箇所を変更

このフローで、変換時の Alignment 推定と変換後の手動補正を組み合わせて Figma 側に最適な Auto Layout 構造を作れます。

💬 よくある質問

Q: 変換後に Auto Layout になっていない箇所が多いのですが？

A: 変換時に Auto Layout 化される対象は、XD で Stack（オートレイアウト）または Repeat Grid として定義されている要素のみ です。XD でフリー配置のままだった要素は、Figma 側でも絶対配置の Frame として残ります。Auto Layout にしたい場合は、

移行前に XD 側で Stack 化 してから変換する（推奨）
変換後に Figma 側で手動 Auto Layout 化（要素を選択して Shift + A）

のいずれかが必要です。

Q: Auto Layout 化された箇所の整列が意図と違います

A: Alignment 推定は子要素の座標から多数決で整列を決めるため、意図的な CENTER 配置が MIN になる、または MIN 配置が偶然 CENTER に見えるケースがあります。Strict モードで再変換（重み付き投票 + 偶然一致ガード両方 ON）するか、Figma 側で当該 Frame の Alignment プロパティを直接修正してください。

Q: リピートグリッドのインスタンスが変換後にリンクされていません

A: 構造類似性を検出してインスタンス化を試みますが、要素の差異が大きいケースでは個別フレームに展開されることがあります。変換後に Figma で 手動で Component → Variant 構造に整理 することで、編集効率を取り戻せます。

Q: Alignment 推定は Free プランで使えますか？

A: Free プランでは Off モード固定（Alignment 推定なし、Auto Layout Frame は MIN 配置）で利用できます。4 モードの選択や Skip ambiguous / Preserve cross-axis offset の直交トグル は Pro プランの機能です。詳細は Features: Auto Layout 変換を参照してください。

Q: Angel Converter との Auto Layout 変換精度の違いは？

A: 比較は XD→Figma 変換プラグイン徹底比較にまとめています。実際の XD ファイルで両方を試して、自分のデザインに合うほうを選ぶのが確実です。

Q: XD で「グループ」になっているだけの要素は、Auto Layout になりますか？

A: なりません。Pixel Fine Converter は XD の meta.ux データから Stack 設定（isContentAware && contentStackType） を読み取って Auto Layout 化を判断します。XD でグループ化しただけで Stack 化していない要素は、Figma 側でも通常の Frame（layoutMode=NONE）として変換されます。

✅ まとめ

XD のレイアウト構造を Figma の Auto Layout に変換する全体像を整理しました。

記事のポイント

Auto Layout 変換は変換ツール選びで最大の差が出る要素
Auto Layout 化される対象は XD の Stack / Repeat Grid のみ — フリー配置はそのまま絶対配置として残る
Pixel Fine Converter の Alignment 推定は 「投票 → 降格 → 偶然一致ガード」 の 3 段階パイプライン（Auto Layout 化された Frame の整列を決定する処理）
4 つの整列推定モード（Off / Strict / Balanced / Native-first）+ 2 つの直交トグルで、推定の強さと適用範囲を調整
推定の限界を理解し、変換後の手動補正 と組み合わせるのが現実解（フリー配置の Auto Layout 化も手動）

XD ファイルを Figma で開いただけでは Auto Layout は活かせません。移行前に XD で Stack 化しておく、移行時にどのモードを使うか選ぶ、変換後に Alignment と Auto Layout 化対象を整理する — この 3 段階の意思決定が、Figma での編集効率を決めます。

🚀 Auto Layout を活かした変換を体験する — Pixel Fine Converter

Free プランで 3 アートボードまで試せます。Pro 版なら Balanced モードがデフォルトで動作します