Figma のレイアウトグリッド（レイアウトガイド）の使い方 — 列・行・グリッドの設定と表示、Auto Layout との違い

「Figma で 12 カラムのグリッドを引いて要素をきっちり揃えたい」「グリッドの表示・非表示を切り替えるショートカットがわからない」「レイアウトグリッドと Auto Layout は何が違うのか整理できていない」— Figma でレイアウトを組んでいると、グリッドまわりで手が止まる場面が出てきます。

Figma のレイアウトグリッドは、フレームの中に列・行・方眼のガイドを敷いて、要素の位置やサイズを揃えるための仕組みです。一度設定を覚えれば、複数人での制作でも「揃っている / 揃っていない」の基準が共有でき、デザインの一貫性が上がります。

本記事では、レイアウトグリッドの基本 → 3 タイプの使い分け → 列グリッドの設定項目 → 表示切り替えとスタイル化 → Auto Layout・Constraints との違い → XD から移行したファイルでの再設定を、実務でそのまま使える順序で整理しました。Pixel Fine Converter の開発で XD → Figma 変換を扱ってきた立場から、移行後にレイアウトを組み直すときのポイントも合わせてまとめます。

用語の注意 — 「レイアウトグリッド」は「レイアウトガイド」に改名されました

Figma は 2025 年 5 月に「layout grid（レイアウトグリッド）」を「layout guide（レイアウトガイド）」へ改名しました。現在の UI・公式ヘルプは「レイアウトガイド」表記です。機能そのものは同じで、検索では旧称「レイアウトグリッド / グリッド」が今も広く使われているため、本記事では旧称を併記しつつ現行名（レイアウトガイド）で解説します。

この記事で得られること

レイアウトグリッド（レイアウトガイド）の基本的な追加・設定手順
Grid（方眼）/ Columns（列）/ Rows（行）の 3 タイプの使い分け
列グリッドの設定項目（Count / Type / Margin / Gutter / Width）と、タイプで変わる表示
グリッドの表示・非表示の切り替えとスタイルとしての再利用
Auto Layout・Constraints との違い（よくある混同の整理）
XD から移行したファイルでレイアウトグリッドを再設定するときの注意点

📝 はじめに — レイアウトグリッドで迷う 3 つの場面

レイアウトグリッドで迷う場面は、大きく次の 3 つに分かれます。それぞれ対処が違うので、まず自分のケースを特定してから読み進めてください。

場面 A: 方眼やベースラインを敷いて、要素をピクセル単位で揃えたい

アイコンやコンポーネントを 8px 単位できっちり配置したい、というケース。Grid（方眼）タイプを使い、セルサイズを 8px に設定すれば、ドラッグ時のスナップ基準になります。

場面 B: 12 カラムのような列組みで、Web / アプリのレイアウトを設計したい

「デスクトップは 12 カラム、余白 24px、溝 16px」のようにカラムを定義したいケース。Columns（列）タイプを使い、Count・Margin・Gutter を設定します。レイアウトグリッドの主役はここです。

場面 C: 画面サイズが変わっても要素を追従させたい

「フレームを広げたら列に沿って要素も伸びてほしい」というケース。これはレイアウトグリッド単体ではできません。追従は Constraints（制約）や Auto Layout の役割で、レイアウトグリッドは「揃える基準（ガイド）」を提供する側です。混同しやすいので後半で切り分けます。

以下では、A / B の設定（前半）→ C の切り分け（後半）の順に解説します。

🧭 レイアウトグリッドとは（旧 Layout Grid / 現 Layout guide）

レイアウトグリッド（レイアウトガイド）は、フレーム内でオブジェクトを整列させるための視覚的なガイドです。印刷物の版面設計やグラフィックの「グリッドシステム」を、Figma のフレーム上で再現するものと考えるとわかりやすいです。

適用できるのはフレーム

レイアウトグリッドはフレーム（Frame）に対して追加します。コンポーネントもフレームの一種なので、コンポーネントにも追加できます。一方、通常のグループ（Group）には追加できないため、グリッドを敷きたい範囲はフレーム化しておきます。

追加の手順

グリッドを敷きたいフレームを選択
右サイドバー（Design タブ）の Layout guide（レイアウトガイド）セクションの＋をクリック
既定では方眼（Grid）が追加されるので、必要に応じてタイプを Columns / Rows に切り替える
各項目（列数・余白・溝など）を設定

グリッドはあくまでガイドなので、書き出した画像やプロトタイプには表示されません。編集画面で要素を揃えるための補助線として機能します。

📐 3 タイプ（グリッド / 列 / 行）の使い分け

レイアウトグリッドには Grid（方眼）/ Columns（列）/ Rows（行） の 3 タイプがあります。パネルのドロップダウンで切り替えます。

タイプ	内容	向いている用途
Grid（方眼）	指定したセルサイズの正方グリッドを敷く	8px 単位の整列、アイコン / コンポーネント制作
Columns（列）	縦方向の列（カラム）を定義する	Web / アプリの 12 カラム設計、横方向の整列
Rows（行）	横方向の行を定義する	縦方向のリズム、ベースライン的な行の管理

1 つのフレームに複数のレイアウトグリッドを重ねて追加できます。たとえば「Columns（列）＋ Rows（行）」を併用すれば、縦横両方のガイドで格子状に要素を揃えられます。複雑なレイアウトでは、この重ね掛けが役立ちます。実務で最も使うのは Columns（列）タイプで、Web / アプリの多くが「12 カラム」を基準に設計されるため、まずは次節の Columns の設定を押さえておくと、レイアウトグリッドの大半の用途はカバーできます。

🔧 列（Columns）グリッドの設定項目

Columns（列）タイプで設定できる項目は次の通りです。Type（配置方式）によって表示される項目が変わる点がポイントです。

項目	内容	表示される条件
Count	列の数（例: 12）	常に
Type	配置方式（Stretch / Left / Center / Right）	常に
Margin	フレーム端からの余白	Stretch のとき
Gutter	列と列の間の溝	Stretch のとき
Width	列の固定幅	Left / Center / Right のとき

Type（配置方式）の違い

Stretch: フレーム幅に合わせて列が伸縮する。Margin と Gutter を指定し、列幅は自動計算。レスポンシブなレイアウト設計に最も向く
Left / Center / Right: 固定幅（Width）の列を、左寄せ / 中央 / 右寄せで配置する。列幅を固定したいときに使う

「デスクトップ 12 カラム・両端余白 24px・溝 16px」のような一般的な Web 設計は、Type = Stretch、Count = 12、Margin = 24、Gutter = 16 で表現できます。

Stretch と固定幅の使い分け

画面サイズに応じて列幅を変えたいなら Stretch（Margin / Gutter を指定）、逆に「列は必ず 80px」のように幅を固定したいなら Left / Center / Right（Width を指定）を選びます。Stretch と固定幅で表示される設定項目そのものが変わるので、意図した項目が見当たらないときは Type を確認してください。

👁️ 表示/非表示の切り替えとスタイル化

表示・非表示のショートカット

レイアウトグリッドの表示 / 非表示は、Mac・Windows とも Shift + G で切り替えます（Web 上には Windows を別のキーとして紹介する情報もありますが、公式ヘルプ上は共通です）。細かい位置調整のときはグリッドを表示し、全体のバランスを見るときは非表示にする、といった使い分けが快適です。ショートカットはキーボード配列やカスタム設定で異なる場合があるため、うまく動かないときは Figma の環境設定を確認してください。

グリッドをスタイルとして保存・再利用する

よく使うグリッド設定は、レイアウトガイドスタイル（グリッドスタイル）として保存しておくと、他のフレームで繰り返し使えます。

グリッドを設定したフレームで、Layout guide セクションのスタイルアイコンをクリック
＋で新規スタイルとして保存（例: Desktop/12col, Mobile/4col）
別のフレームでは、同じスタイルを適用するだけで同一のグリッドが敷ける

命名を「デバイス別」に整えておくと、レスポンシブ対応で複数のブレークポイントを扱うときに管理が楽になります。

🔀 Auto Layout・Constraints との違い（よくある混同）

レイアウトグリッドは、名前が似ている Auto Layout や、役割が近い Constraints と混同されがちです。公式も「レイアウトガイドは Auto Layout の grid オプションとは別機能」と明記しており、ここを切り分けておくとレイアウト設計が整理されます。

機能	役割	要素への作用
レイアウトグリッド	整列の基準となる視覚的なガイド	要素の位置は自動で動かさない（揃える目安を提供）
Auto Layout	子要素を自動で並べる / 間隔を管理する	要素を実際に配置・整列する
Constraints（制約）	フレームのリサイズ時の追従ルール	親のサイズ変化に合わせて要素を追従させる

要するに、レイアウトグリッドは「揃える基準」を示すだけで、要素を自動で動かしたり追従させたりはしません。要素の自動配置は Auto Layout、リサイズ時の追従は Constraints が担います。

グリッドに要素を追従させたいとき

「フレームを広げたら要素も列に沿って伸びてほしい」場合は、Stretch タイプのレイアウトグリッド＋ Constraints の組み合わせを使います。公式によれば、Stretch のガイドと Constraints を併用すると、Figma は要素の制約を最も近い列 / 行を基準に解釈して追従させます。グリッド単体では追従しない点が、混同されやすいポイントです。

Auto Layout そのものの使い方や、XD のスタック / リピートグリッドとの関係は Adobe XD のスタックとリピートグリッドを Figma Auto Layout に変換するで詳しく扱っています。

🔄 XD から移行したファイルでのグリッド設定

Adobe XD から Figma に移行したファイルでレイアウトを整えるとき、グリッドまわりでは次の点を押さえておくと作業がスムーズです。

レイアウトグリッドは Figma 側で設定し直す

XD で組んでいたレイアウトを Figma に持ち込んだあと、列組みの整列基準は Figma のレイアウトグリッド（レイアウトガイド）で改めて設定します。移行直後は要素の絶対座標は保たれていても、以降の調整を効率化するにはグリッドを敷いておくのが確実です。前述のスタイル化を使って、デバイス別のグリッドをフレームごとに適用していくと整理しやすくなります。

フレーム化されているかを確認する

レイアウトグリッドはフレームにしか追加できません。移行後に「グリッドの＋が押せない」ときは、対象がグループのままになっていないかを確認し、必要ならフレーム化してください。XD のアートボードと Figma のフレームの考え方の違いは Figma に「アートボード」はない？にまとめています。

グリッド設定は Figma 標準機能 — 移行は変換ツールの役割

レイアウトグリッド（レイアウトガイド）の設定は Figma 標準機能で完結し、特別なプラグインは不要です。一方、まだ XD ファイルが手元にある場合は、まず Figma に取り込む（変換する）工程が必要です。Pixel Fine Converter は XD → Figma の取り込み（変換）を担うプラグインで、レイアウトの再設計そのものは Figma 側で行います。「XD のデータを Figma に持ち込んでから、Figma でグリッドを敷いて整える」という 2 段構えになります。

まだ移行していない XD ファイルがあるなら、まず Pixel Fine Converter で Figma に変換し、そのうえで本記事のグリッド設定を活用してください。

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

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

❓ よくある質問

Q: 「レイアウトグリッド」と「レイアウトガイド」はどう違いますか？

同じ機能です。Figma が 2025 年 5 月に「layout grid（レイアウトグリッド）」を「layout guide（レイアウトガイド）」に改名しました。現在の UI・公式ヘルプは「レイアウトガイド」表記ですが、検索や既存の解説では旧称「レイアウトグリッド」も広く使われています。

Q: グリッドの表示・非表示のショートカットは？

Mac・Windows とも Shift + G で切り替えられます。ショートカットはキーボード配列やカスタム設定で異なる場合があるため、動かないときは Figma の環境設定を確認してください。

Q: グループにレイアウトグリッドを追加できません

レイアウトグリッドはフレーム（コンポーネント含む）にのみ追加できます。対象がグループの場合は、フレーム化してからグリッドを追加してください。

Q: 12 カラムのグリッドはどう設定すればいいですか？

Columns（列）タイプを選び、Type = Stretch、Count = 12 に設定します。両端の余白は Margin、列間の溝は Gutter で指定します（Margin / Gutter は Stretch タイプのときに表示されます）。列幅を固定したい場合は Type を Left / Center / Right にして Width を指定します。

Q: レイアウトグリッドで要素を自動的に配置できますか？

いいえ。レイアウトグリッドは整列の基準を示すガイドで、要素を自動で並べる機能ではありません。子要素の自動配置は Auto Layout、フレームのリサイズ時の追従は Constraints が担当します。グリッドに沿って追従させたい場合は、Stretch タイプのグリッドと Constraints を組み合わせます。

Q: よく使うグリッド設定を使い回せますか？

はい。設定したグリッドをレイアウトガイドスタイル（グリッドスタイル）として保存すれば、他のフレームで同じ設定を適用できます。デバイス別（Desktop/12col, Mobile/4col など）に命名しておくと管理が楽になります。

🎯 まとめ

Figma のレイアウトグリッド（レイアウトガイド）は、フレームに整列の基準を敷いて、デザインの一貫性を保つための仕組みです。

記事のポイント

「レイアウトグリッド」は 2025 年 5 月に「レイアウトガイド」へ改名。機能は同じで、検索では旧称も広く使われている
3 タイプ（Grid / Columns / Rows）があり、実務で最も使うのは列組みの Columns
列グリッドの設定は Type で表示項目が変わる — Stretch は Margin / Gutter、固定幅（Left/Center/Right）は Width
表示 / 非表示は Mac・Windows とも Shift + G
よく使う設定はスタイルとして保存して使い回す
レイアウトグリッドは揃える基準を示すだけ — 自動配置は Auto Layout、追従は Constraints が担う
グリッドはフレームにのみ追加 できる（グループ不可）

レイアウトグリッドを「揃える基準」、Auto Layout を「自動で並べる」、Constraints を「リサイズ時の追従」と役割で切り分けて理解しておくと、Figma のレイアウト設計が一段整理されます。

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