Layout Grids in Figma (Now "Layout Guides") — Columns, Rows & the Auto Layout Difference

“I want a 12-column grid so my elements line up cleanly.” “I can’t find the shortcut to toggle the grid on and off.” “I’ve never sorted out how layout grids differ from Auto Layout.” — Once you’re building real layouts in Figma, grids are a common place to get stuck.

A layout grid in Figma is a way to lay columns, rows, or a square grid inside a frame so you can align elements to a shared reference. Learn the settings once and, even across a team, everyone shares the same sense of what “aligned” means — and your designs get more consistent for it.

This article walks through, in the order they come up in practice: the basics → the three grid types → column grid settings → toggling and saving grids → how grids differ from Auto Layout and Constraints → re-creating grids on files migrated from XD. Drawing on Pixel Fine Converter’s work on XD → Figma conversion, we also cover what to watch for when rebuilding a layout after migrating.

A note on naming — "layout grid" was renamed "layout guide"

Figma renamed “layout grid” to “layout guide” in May 2025. The current UI and official Help Center use “layout guide.” The feature itself is unchanged, and since “layout grid / grid” is still what most people search for, this article keeps the old term alongside the current name (layout guide).

What you’ll get out of this article

The basics of adding and configuring a layout grid (layout guide)
When to use Grid (square) / Columns / Rows
Column settings (Count / Type / Margin / Gutter / Width) and how the visible options change with Type
How to toggle grids and reuse them as styles
How layout grids differ from Auto Layout and Constraints
What to watch for when re-creating grids on a file migrated from XD

Companion articles

For automatic placement of child elements (Auto Layout), see Bringing Adobe XD’s Stack and Repeat Grid into Figma’s Auto Layout. For how Figma thinks about frames vs. artboards, see There’s no “Artboard” in Figma. This article focuses specifically on laying grid guides inside a frame to align elements.

📝 Introduction — Three scenarios where grids get confusing

Grid confusion usually falls into one of three buckets. The fix differs across them, so identify your case first.

Scenario A: Lay a square grid or baseline to align elements to the pixel

You want to place icons and components on an 8px rhythm. Use the Grid (square) type, set the cell size to 8px, and it becomes the snapping reference as you drag.

Scenario B: Design a web / app layout on a column system

You want to define columns — “desktop: 12 columns, 24px margin, 16px gutter.” Use the Columns type and set Count, Margin, and Gutter. This is where layout grids earn their keep.

Scenario C: You want elements to follow when the canvas resizes

“When I widen the frame, I want elements to stretch along the columns.” This isn’t something a layout grid does on its own. Following a resize is the job of Constraints or Auto Layout; the layout grid supplies the reference to align to. It’s an easy mix-up, so we separate them later on.

Below we cover the A / B setup first, then the C distinction.

🧭 What layout grids are (old “Layout Grid” / new “Layout guide”)

A layout grid (layout guide) is a visual aid for aligning objects inside a frame. Think of the “grid system” from print or graphic layout, recreated on a Figma frame.

They apply to frames

You add a layout grid to a frame. Components are a kind of frame, so you can add them to components too. A plain group, however, can’t take a layout grid — so turn the area you want to grid into a frame first.

Adding a grid

Select the frame you want to grid
In the right sidebar (Design tab), click the ＋ in the Layout guide section
A square grid is added by default; switch the type to Columns / Rows as needed
Configure the settings (column count, margins, gutters, and so on)

Grids are guides, so they don’t appear in exported images or in prototypes. They exist to help you align elements in the editor.

📐 The three types (Grid / Columns / Rows)

Layout grids come in three types — Grid (square) / Columns / Rows — switched from the dropdown in the panel.

Type	What it does	Best for
Grid (square)	Lays a uniform square grid at the cell size you set	8px-rhythm alignment, icon / component work
Columns	Defines vertical columns	12-column web / app layouts, horizontal alignment
Rows	Defines horizontal rows	Vertical rhythm, baseline-style row management

You can stack multiple layout grids on a single frame. Combine “Columns + Rows” and you get guides in both directions to align elements to a lattice. The type you’ll reach for most is Columns — since so many web and app designs are built on a 12-column base, getting comfortable with the column settings in the next section covers most of what layout grids are for.

🔧 Column grid settings

Here are the settings available on the Columns type. The key thing: the Type (alignment) you pick changes which options appear.

Setting	What it does	Shown when
Count	Number of columns (e.g. 12)	Always
Type	Alignment (Stretch / Left / Center / Right)	Always
Margin	Space from the frame edges	Stretch only
Gutter	Space between columns	Stretch only
Width	Fixed column width	Left / Center / Right

What the Type (alignment) does

Stretch: columns stretch to fit the frame width. You set Margin and Gutter, and the column width is computed automatically. This is the best fit for responsive layout design.
Left / Center / Right: place fixed-width (Width) columns aligned to the left, center, or right. Use this when you want the column width pinned.

A typical web setup — “desktop, 12 columns, 24px margins, 16px gutters” — is expressed as Type = Stretch, Count = 12, Margin = 24, Gutter = 16.

Stretch vs. fixed width

Pick Stretch (set Margin / Gutter) when column width should flex with the screen size, and Left / Center / Right (set Width) when you want columns pinned to a fixed width — say, “columns are always 80px.” Because Stretch and the fixed options surface different settings, if an option you expect is missing, check the Type first.

👁️ Toggling grids and saving them as styles

The show / hide shortcut

Toggle a layout grid on and off with Shift + G on both Mac and Windows (you’ll find non-official sources listing a different Windows key, but the Help Center lists the same one for both). Show the grid for fine alignment, hide it to judge overall balance. Shortcuts can vary with your keyboard layout or custom settings, so check Figma’s preferences if it doesn’t respond.

Saving a grid as a reusable style

Save a grid you use often as a layout guide style (grid style) and reuse it across other frames.

On a frame with a grid set up, click the style icon in the Layout guide section
Save it as a new style with ＋ (e.g. Desktop/12col, Mobile/4col)
On another frame, apply the same style to lay down an identical grid

Naming styles by device makes life easier when you’re juggling several breakpoints for responsive work.

🔀 How they differ from Auto Layout and Constraints

Layout grids get confused with the similarly named Auto Layout, and with the closely related Constraints. Figma is explicit that a layout guide is “a different feature from the grid option in auto layout,” so drawing the line here keeps your layout thinking clean.

Feature	Role	Effect on elements
Layout grid	A visual guide to align to	Doesn’t move elements; offers a reference to align them
Auto Layout	Places / spaces child elements automatically	Actually positions and arranges elements
Constraints	Rules for how elements respond to a frame resize	Makes elements follow as the parent size changes

In short, a layout grid only shows the reference — it won’t move or resize elements for you. Automatic placement is Auto Layout’s job; following a resize is Constraints’ job.

When you want elements to follow the grid

To make elements “stretch along the columns as the frame widens,” combine a Stretch-type layout grid with Constraints. Per Figma, when you pair a Stretch guide with Constraints, Figma bases an element’s constraints on the guide’s nearest column or row so it follows along. Not following on its own is exactly what trips people up.

For Auto Layout itself, and how it relates to XD’s Stack and Repeat Grid, see Bringing Adobe XD’s Stack and Repeat Grid into Figma’s Auto Layout.

🔄 Setting up grids on files migrated from XD

When you tidy up a layout on a file freshly migrated from Adobe XD to Figma, a couple of grid-related points make the work smoother.

Re-set the layout grid on the Figma side

After bringing an XD layout into Figma, set the column reference with Figma’s layout grid (layout guide) from scratch. Element positions are preserved on migration, but laying down a grid makes every later adjustment far more efficient. Use the styles above to apply device-specific grids frame by frame.

Confirm it’s a frame

Layout grids only attach to frames. If the grid ＋ looks unclickable after migrating, check that your target isn’t still a group, and turn it into a frame if needed. For how XD artboards and Figma frames differ in concept, see There’s no “Artboard” in Figma.

Grids are native Figma — migration is the converter's job

Setting up a layout grid (layout guide) is entirely native to Figma; no special plugin required. What you do need, if you still have XD files on hand, is to bring them into Figma first (convert them). Pixel Fine Converter is the plugin for the XD → Figma import (conversion) step; the layout work itself happens on the Figma side. It’s a two-stage flow: bring the XD data into Figma, then lay grids to tidy things up.

If you still have un-migrated XD files, convert them to Figma with Pixel Fine Converter first, then put the grid settings in this article to work.

Convert XD files to Figma Install free from Figma Community

One-click install from Figma Community

❓ Frequently asked questions

Q: What’s the difference between a “layout grid” and a “layout guide”?

They’re the same feature. Figma renamed “layout grid” to “layout guide” in May 2025. The current UI and Help Center use “layout guide,” while the old term “layout grid” is still widely used in searches and existing write-ups.

Q: What’s the shortcut to show / hide the grid?

Shift + G on both Mac and Windows. Shortcuts can vary with your keyboard layout or custom settings, so check Figma’s preferences if it doesn’t respond.

Q: I can’t add a layout grid to a group

Layout grids attach only to frames (including components). If your target is a group, turn it into a frame first, then add the grid.

Q: How do I set up a 12-column grid?

Choose the Columns type and set Type = Stretch, Count = 12. Set the edge margins with Margin and the space between columns with Gutter (Margin and Gutter appear on the Stretch type). To pin the column width instead, switch Type to Left / Center / Right and set Width.

Q: Can a layout grid place elements automatically?

No. A layout grid is a reference to align to, not a feature that arranges elements. Automatic placement is Auto Layout’s job, and following a frame resize is Constraints’ job. To follow along the grid, combine a Stretch-type grid with Constraints.

Q: Can I reuse a grid setup I use often?

Yes. Save the grid as a layout guide style (grid style) and you can apply the same setup to other frames. Naming by device (Desktop/12col, Mobile/4col) keeps things manageable.

🎯 Wrapping up

Figma’s layout grid (layout guide) is a way to lay a reference inside a frame and keep your design consistent.

Key takeaways

“Layout grid” was renamed “layout guide” in May 2025 — same feature; the old term is still what people search for
Three types (Grid / Columns / Rows); the one you’ll use most is Columns
Column settings change with Type — Stretch shows Margin / Gutter, fixed (Left/Center/Right) shows Width
Show / hide is Shift + G on both Mac and Windows
Save grids you use often as styles to reuse them
A layout grid only supplies the reference — Auto Layout places elements, Constraints handles the resize
Grids attach only to frames (not groups)

Keep the roles straight — layout grid as “the reference to align to,” Auto Layout as “arrange automatically,” Constraints as “follow on resize” — and Figma layout design gets noticeably clearer.

If you still have XD files not yet in Figma, convert them with Pixel Fine Converter first, then use the grid settings in this article to tidy up the layout.