Figma オートレイアウト（Auto Layout）の使い方 — 縦・横・グリッドの 3 フロー、折り返し、Hug / Fill の設定

「ボタンの中身を変えたら余白が崩れる」「カードを横に並べたいのに、幅が足りなくなっても次の行に落ちてくれない」「Hug と Fill の違いが結局わかっていない」— Auto Layout は、Figma のレイアウト機能のなかでも特につまずきやすい部分です。

Auto Layout（オートレイアウト）は、フレームの中の要素を自動で並べ、中身の増減に合わせてサイズと余白を追従させる仕組みです。CSS の Flexbox / Grid に近い考え方で、一度身につけるとレイアウトの修正コストが大きく下がります。

本記事では、基本設定 → サイズ設定 → 折り返し → グリッドフロー → 入れ子 → はみ出し制御 → トラブル対処 の順で、実務でそのまま使える形に整理しました。2025 年に加わったグリッドフローや、名称が変わった設定項目など、現行の UI に合わせた内容にしています。

名称の注意 — 「Absolute position」は「Ignore auto layout」に変わりました

Auto Layout の子要素をフローから外す設定は、以前は Absolute position（絶対配置） という名前でしたが、現在は Ignore auto layout に変わっています。公式ヘルプにも「Ignore auto layout は以前 absolute position と呼ばれていた機能で、名前が変わっただけで動作は同じ」と明記されています。旧称で解説している情報も多いため、本記事では現行名で解説し、旧称を併記します。

仕様の注意 — 2026 年 7 月に「レイアウトバージョン」が更新されました

2026 年 7 月 24 日、Auto Layout の挙動を CSS に近づけた更新版のレイアウトバージョンが導入されました。新しく作成したフレームは自動的に更新版になり、既存のフレームは旧版（legacy）のままです。そのため、同じ設定でも作成時期によって結果が変わる場合があります。

主な変更点は次のとおりです。

余白（Padding）が必ず確保される — フレームの幅が余白の合計より狭くなりません（CSS の border-box と同じ考え方）
レイアウト計算に効く線が Inside のみに — Outside / Center の線は、レイアウトに含める設定でも間隔やサイズの計算に影響しなくなりました
親フレームの線の設定が子に継承されない
Fill container の余りの配分が、全体サイズではなく内容領域を基準に計算されるように
自動の間隔（auto gap）がマイナスにならない — 要素が重なる代わりに先頭側に寄ります
auto gap のスタックに子が 1 つだけのとき、中央ではなく先頭（左 / 上）に揃うように

切り替えは、フレームを選択して Auto Layout 設定のドロップダウンから、または Actions メニューで Update layout version for selection / Update layout version for page を実行します。2027 年 1 月には、旧版で作られたフレームの設定がトグルから Update ボタンに変わります。

本記事で解説する操作は、どちらのバージョンでも共通する基本部分です。

この記事で得られること

Auto Layout の追加・解除の手順と、適用できる対象
方向 / 間隔 / 余白 / 配置という基本設定の考え方
Hug contents / Fill container / Fixed の使い分けと、最小幅・最大幅の指定
折り返し（Wrap）で 2 列以上のレイアウトを組む方法と、折り返せないときの原因
2025 年に加わったグリッドフローで 2 次元レイアウトを組む方法
紛らわしい「グリッド」3 種類（Auto Layout のグリッド / レイアウトガイド / Constraints）の切り分け

📝 はじめに — Auto Layout で手が止まる 3 つの場面

Auto Layout で迷う場面は、大きく次の 3 つに分かれます。対処が違うので、まず自分のケースを特定してから読み進めてください。

場面 A: 中身を変えると余白やサイズが崩れる

ボタンのラベルを長くしたら余白が変わってしまった、カードのテキストを増やしたら枠からはみ出した、というケース。これはサイズ設定（Hug / Fill / Fixed）の選択の問題です。後半の「サイズ設定」で切り分けます。

場面 B: 横に並べた要素が、幅が足りなくなっても次の行に落ちない

タグやカードを横に並べたが、フレームを狭くしても 1 行のままはみ出す、というケース。これは折り返し（Wrap） の設定で解決します。ただし有効にできる条件があるので、そこが最大のつまずきどころです。

場面 C: 縦横の両方向に規則的に並べたい

ギャラリーやダッシュボードのように、行と列の両方を制御したいケース。従来は「横並びの中に縦並びを入れる」入れ子で表現していましたが、2025 年に追加されたグリッドフローで直接組めるようになりました。

以下では、基本（A の土台）→ 折り返し（B）→ グリッド（C）の順に解説します。

🧭 Auto Layout とは（縦・横・グリッドの 3 フロー）

Auto Layout は、フレームに「並べ方のルール」を持たせる機能です。適用すると、子要素は指定した方向に自動で整列し、要素を追加・削除・リサイズしたときも、間隔と余白を保ったまま配置が更新されます。

手作業で座標を調整する必要がなくなるため、修正の多いコンポーネント（ボタン、リスト、カード、ナビゲーション）ほど効果が大きくなります。

3 つのフロー

Auto Layout の並べ方は、縦（Vertical）/ 横（Horizontal）/ グリッド（Grid） の 3 種類から選びます。

フロー	並び方	向いている用途
縦（Vertical）	上から下へ 1 列に並ぶ	リスト、フォーム、記事本文の積み上げ
横（Horizontal）	左から右へ 1 行に並ぶ	ボタン内のアイコン + ラベル、ナビゲーション、タグ
グリッド（Grid）	列と行の 2 次元に並ぶ	ギャラリー、ベントーグリッド、ダッシュボード

縦・横は以前からある基本のフローで、グリッドは 2025 年に追加された比較的新しいフローです。まずは縦・横を押さえ、2 次元の配置が必要になったときにグリッドを検討する、という順序で問題ありません。

⚙️ 追加と解除 — 適用できる対象とショートカット

追加の手順

Auto Layout を適用したい要素（複数選択可）またはフレームを選択
Shift + A を押す — または右サイドバー（Design タブ）の Auto layout セクションの＋をクリック
適用後、パネルでフロー（縦 / 横 / グリッド）と各設定を調整

複数の要素を選択した状態で Shift + A を押すと、それらを包む新しいフレームが作られ、そのフレームに Auto Layout が適用されます。既存のフレームを選択した場合は、そのフレーム自体に適用されます。

解除の手順

Auto Layout を外したいときは、対象のフレームを選択して Shift + Option + A（Windows は Shift + Alt + A） を押すか、パネルの Auto layout セクションからマイナス（−）を選びます。

解除してもフレームと子要素はそのまま残り、その時点の見た目の座標が固定されるだけです。要素が消えることはないので、試しに外して確認する使い方もできます。

グループではなくフレームに適用される

Auto Layout はフレームの機能です。グループ（Group）を選択して Shift + A を押した場合も、Figma 側でフレーム化されたうえで適用されます。「グループのまま Auto Layout を持たせる」ことはできない、と理解しておくと混乱しません。

🔧 基本設定 — 方向 / 間隔 / 余白 / 配置

Auto Layout を適用したら、まず次の 4 つを押さえます。この 4 つでレイアウトの大半は決まります。

設定	UI 上の名前	内容
方向	（フローの選択）	縦 / 横 / グリッドのどれで並べるか
間隔	Gap between	要素と要素のあいだの距離
余白	Padding	フレームの内側の余白（上下左右を個別指定可）
配置	（整列ボックス）	子要素をフレーム内のどこに寄せるか

余白（Padding）は上下左右を個別に指定できる

Padding の入力欄では、まとめて 1 つの値を入れることも、上下・左右で分けることも、4 辺すべてを個別に指定することもできます。パネルの入力欄を展開すると個別指定に切り替わります。

配置は整列ボックスで指定する

配置は、パネルの 9 分割の整列ボックスで指定します。左揃え・中央揃え・右揃え（横フローの場合は上揃え・中央・下揃え）が、クリックだけで切り替わります。

均等配置にしたいとき

「要素を両端に寄せて、あいだを均等に空けたい」場合は、間隔（Gap between）の値を Auto に設定します。数値を固定する代わりに、フレームの幅（縦フローなら高さ）いっぱいに要素が分散配置されます。ナビゲーションバーのように「ロゴは左端、メニューは右端」というレイアウトでよく使います。

📏 サイズ設定 — Hug / Fill / Fixed と最小・最大幅

Auto Layout でつまずく原因の多くは、サイズ設定の選択ミスです。ここを理解すると、「中身を変えたら崩れる」問題の大半は解決します。

サイズには次の 3 つの挙動があり、幅（W）と高さ（H）でそれぞれ別々に指定します。

設定	挙動	使う場面
Hug contents	中身に合わせてフレームが縮む / 伸びる	ボタン、タグ、ラベル（中身の量でサイズが決まる要素）
Fill container	親フレームの残り幅（高さ）いっぱいに広がる	カード内の本文、可変幅の入力欄
Fixed	指定した数値で固定される	アイコン、サムネイル、幅を決め打ちする枠

Fill container は親が Auto Layout フレームのときだけ選べます。親が通常のフレームの場合は選択肢に出てこないので、「Fill が見当たらない」ときは親の状態を確認してください。

最小幅・最大幅を指定する

Hug や Fill は中身や親に応じて伸縮しますが、伸びすぎ / 縮みすぎを防ぎたい場面があります。その場合は幅（W）のドロップダウンから Add min width（最小幅を追加） や Add max width（最大幅を追加） を選びます。高さも同様に指定できます。

「テキストは可変だが、1 行が長くなりすぎると読みにくいので最大幅を 600px に抑える」といった制御が、これで実現できます。

崩れるときはまず「どこが Hug でどこが Fill か」を疑う

中身を変えたときにレイアウトが崩れる場合、原因は要素そのものではなく親子のサイズ設定の組み合わせであることがほとんどです。「親は Hug なのに子が Fill」のような矛盾があると、意図しない伸縮が起きます。外側から順に W / H の設定を確認していくと、原因の箇所が特定しやすくなります。

↩️ 折り返し（Wrap）と 2 列レイアウト

横に並べた要素が、フレーム幅に収まらなくなったときに次の行へ折り返す設定が Wrap です。タグの一覧やカードのギャラリーなど、要素数が変わるレイアウトで役立ちます。

設定の手順

Auto Layout フレームを選択
フローを「横（Horizontal）」に設定
折り返しの設定を有効にする

有効にすると、フレーム幅に入りきらない要素が自動的に次の行へ送られます。行と行のあいだの間隔も、横方向の間隔とは別に指定できます。

折り返しが選べないときは、フローが「縦」になっています

Wrap は横（Horizontal）フローのときだけ有効になります。縦フローやグリッドフローを選んでいると、折り返しの選択肢は出てきません。「折り返しができない」「折り返しの設定が見当たらない」というときは、まずフローが横になっているかを確認してください。これが最も多い原因です。

2 列に固定したいとき

Wrap は「入らなくなったら折り返す」挙動なので、列数を 2 列に固定する機能ではありません。フレーム幅と要素幅の関係で結果的に 2 列になる、という動きです。

列数をきっちり制御したい場合は、次に説明するグリッドフローを使うか、要素の幅を Fixed にしてフレーム幅を計算して決める必要があります。「2 列にしたい」が目的なら、グリッドフローの方が素直です。

🔲 グリッドフロー — 2 次元レイアウトを組む

グリッドフローは 2025 年に Auto Layout に追加された、行と列の両方を制御できるフローです。従来は「縦の中に横を入れる」入れ子で表現していた 2 次元レイアウトを、1 つのフレームで直接組めるようになりました。

基本の考え方

グリッドフローでは、列と行をまとめて トラック（tracks） と呼びます。トラックごとにサイズを指定でき、内容に合わせて縮む設定にすることも、固定値にすることもできます。

主な設定項目は次の通りです。

項目	内容
Gap between columns	列と列のあいだの間隔
Gap between rows	行と行のあいだの間隔
Horizontal padding / Vertical padding	グリッド全体の内側の余白
Column span / Row span	1 つの要素を複数の列 / 行にまたがらせる

Column span / Row span があるため、「1 つのカードだけ 2 列分の幅で目立たせる」といったベントーグリッド的な表現も、入れ子を使わずに組めます。

折り返しとの使い分け

要素数が変動し、入りきらなければ次の行に流したい → 横フロー + Wrap
列数・行数を決めて、その枠に配置したい → グリッドフロー

「タグ一覧」は前者、「3 列のカードギャラリー」は後者、と考えると選びやすくなります。

🧩 「グリッド」3 兄弟の区別（よくある混同）

Figma には「グリッド」と呼ばれるものが複数あり、これが混同の最大の原因になっています。2025 年に Auto Layout のグリッドフローが追加され、同じ時期にレイアウトグリッドが「レイアウトガイド」へ改名されたことで、さらに紛らわしくなりました。

役割で切り分けると、次のように整理できます。

機能	役割	要素を動かすか
Auto Layout のグリッドフロー	子要素を行・列に自動で並べる	✅ 動かす
レイアウトガイド（旧レイアウトグリッド）	整列の基準線を表示するだけのガイド	❌ 動かさない
Constraints（制約）	親フレームのリサイズ時に追従させる	△ リサイズ時のみ

判断に迷ったら、「要素を自動で並べてほしいのか、目印がほしいだけなのか」 で分けてください。並べてほしいなら Auto Layout、目印だけならレイアウトガイドです。

レイアウトガイド側の設定方法は Figma のレイアウトグリッド（レイアウトガイド）の使い方で詳しく扱っています。

Auto Layout とレイアウトガイドは併用できる

この 3 つは排他ではありません。たとえば「12 カラムのレイアウトガイドを敷いたフレームの中に、Auto Layout でカードを並べる」といった使い方が一般的です。ガイドで全体の基準を示し、Auto Layout で中身を並べる、という役割分担になります。

🪆 入れ子（ネスト）の組み立て方

実務のコンポーネントは、Auto Layout フレームを入れ子にして組み立てます。カードを例にすると、次のような構造になります。

外側（縦フロー） — サムネイル / 本文ブロック / ボタンを縦に積む
本文ブロック（縦フロー） — 見出しと説明文を縦に積む
ボタン（横フロー） — アイコンとラベルを横に並べる

このように「方向の違う Auto Layout を重ねる」ことで、複雑なレイアウトでも中身の増減に追従する構造になります。

組み立てのコツは、内側から作って外側で包むことです。ボタンやタグのような小さい単位を先に Auto Layout 化し、それらを選択して Shift + A で包んでいくと、構造が整理された状態で仕上がります。

入れ子が深くなると管理しづらくなるため、繰り返し使う単位はコンポーネント化しておくと扱いやすくなります。コンポーネントの整理については XD のコンポーネント / シンボルを Figma Components に移行するも参考になります。

🎛️ はみ出しと重ね順 — Ignore auto layout と Clip content

Ignore auto layout（旧 Absolute position）

「バッジをカードの右上に重ねたい」「フローに関係なく自由な位置に置きたい」ときは、Ignore auto layout を使います。

対象の子要素を選択し、右サイドバーの Position ヘッダーの右にあるボタンを有効にすると、その要素はフレームの中に残ったまま、Auto Layout の並びからは外れます。周囲の要素とお互いに影響しなくなるため、通知バッジ、リボン、重ねるアイコンなどの表現に使えます。

前述の通り、この機能は以前 Absolute position（絶対配置） という名前でした。古い解説記事では旧称で説明されていることが多いので、UI 上で見つからないときは新しい名前を探してください。

Clip content ではみ出しを隠す

子要素がフレームの外にはみ出すとき、Clip content を有効にすると、フレームの境界より外の部分が表示されなくなります。Design パネルの Layout セクションにあるチェックボックスです。

画像をフレームでトリミングしたい場合や、スクロール領域を作る場合に使います。逆に、影やバッジを意図的にはみ出させたいときは、これをオフにしておく必要があります。

🔍 うまくいかないときの対処

Auto Layout の設定が見当たらない

対象がフレームやコンポーネントではなく、単体の図形やテキストになっている可能性があります。Shift + A を押せば自動的にフレーム化されて適用されるので、まずはショートカットを試してください。

折り返しの設定が出てこない

フローが横（Horizontal）以外になっています。縦フローやグリッドフローでは Wrap は使えません。

中身を変えると幅が勝手に変わる

幅が Hug contents になっています。固定したいなら Fixed、親に合わせたいなら Fill container に変更してください。逆に「中身に合わせて伸びてほしいのに伸びない」場合は Fixed になっていないかを確認します。

Fill container が選べない

Fill container は親が Auto Layout フレームのときだけ選べます。親を先に Auto Layout 化してください。

要素が意図しない順番で並ぶ

Auto Layout の並び順はレイヤーの順序に従います。順番を変えたいときは、レイヤーパネルでドラッグして並べ替えるか、キャンバス上で要素をドラッグすると挿入位置が示されます。

🔄 XD から移行したファイルで組み直すとき

Adobe XD から Figma に移行したファイルでは、XD のスタックやリピートグリッドに相当する構造を、Figma 側で Auto Layout として整え直す場面が出てきます。

移行直後は要素の座標が保たれた状態になっているため、「どの単位を Auto Layout 化するか」を決めて内側から包んでいくのが基本の進め方です。前述の入れ子のコツ（小さい単位から作る）がそのまま使えます。

XD のスタック / リピートグリッドが具体的にどう変換されるか、変換時にどこまで Auto Layout 化されるかは Adobe XD のスタックとリピートグリッドを Figma Auto Layout に変換するで詳しく解説しています。

Auto Layout の設定は Figma 標準機能 — 移行は変換ツールの役割

Auto Layout の設定は Figma 標準機能で完結し、特別なプラグインは不要です。一方、まだ XD ファイルが手元にある場合は、まず Figma に取り込む（変換する）工程が必要です。Pixel Fine Converter は XD → Figma の取り込み（変換）を担うプラグインで、レイアウトの再設計そのものは Figma 側で行います。

まだ移行していない XD ファイルがあるなら、まず Pixel Fine Converter で Figma に変換し、そのうえで本記事の Auto Layout 設定でレイアウトを整えてください。

XD ファイルを Figma に変換 Figma Community で無料インストール

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

❓ よくある質問

Q: Auto Layout を追加するショートカットは？

Shift + A です。複数の要素を選択して押すと、それらを包むフレームが作られて Auto Layout が適用されます。解除は Shift + Option + A（Windows は Shift + Alt + A）です。

Q: 折り返し（Wrap）ができません

フローが横（Horizontal） になっているかを確認してください。Wrap は横フローのときだけ有効で、縦フローやグリッドフローでは選べません。

Q: Hug と Fill の違いは？

Hug contents は中身に合わせてサイズが決まる設定、Fill container は親の残りスペースいっぱいに広がる設定です。ボタンのように中身でサイズが決まる要素は Hug、カード内の本文のように親に合わせたい要素は Fill を使います。Fill container は親が Auto Layout フレームのときだけ選べます。

Q: 「Absolute position」が見つかりません

現在は Ignore auto layout という名前に変わっています。機能は同じで、Auto Layout の流れから特定の子要素だけを外す設定です。子要素を選択したとき、Position ヘッダーの右に表示されます。

Q: 要素の幅を可変にしつつ、広がりすぎないようにできますか？

はい。幅のドロップダウンから Add max width（最大幅を追加） を選ぶと、上限を設定できます。最小幅（Add min width）も同様に指定でき、高さにも同じ設定があります。

Q: Auto Layout のグリッドと、レイアウトガイドは何が違いますか？

Auto Layout のグリッドフローは子要素を実際に並べる機能、レイアウトガイド（旧レイアウトグリッド）は整列の基準線を表示するだけのガイドです。前者は要素が動き、後者は動きません。併用も可能です。

Q: 要素を均等に配置するには？

間隔（Gap between）の値を Auto に設定すると、フレームの幅（または高さ）いっぱいに要素が分散配置されます。

🎯 まとめ

Auto Layout は、フレームに並べ方のルールを持たせて、中身の変化に追従させる仕組みです。

記事のポイント

フローは縦 / 横 / グリッドの 3 種類。グリッドは 2025 年に追加された 2 次元レイアウト用のフロー
追加は Shift + A、解除は Shift + Option + A（Windows は Shift + Alt + A）
基本設定は方向 / 間隔（Gap between）/ 余白（Padding）/ 配置の 4 つ
サイズは Hug contents / Fill container / Fixed の 3 択。崩れる原因の多くはここの組み合わせ
最小幅・最大幅は幅のドロップダウンから Add min width / Add max width で追加できる
折り返し（Wrap）は横フロー限定 — 出てこないときはフローを確認する
Absolute position は Ignore auto layout に改名された
「グリッド」は 3 種類ある — 並べるのが Auto Layout のグリッド、基準線がレイアウトガイド、追従が Constraints

設定項目は多いものの、実際に手が止まる原因は「サイズをどれにしているか」と「フローが横になっているか」の 2 点にほぼ集約されます。レイアウトが崩れたときはまずこの 2 つを確認する、という習慣がつくと、原因究明は一気に速くなります。

まだ Figma に移行していない XD ファイルがあるなら、まず Pixel Fine Converter で変換し、そのうえで本記事の Auto Layout 設定でレイアウトを組み直してください。