How to Add a Grid to a Frame in Figma

Figma has three layout guide types. The default when you add one is a uniform grid.

• Uniform grid: an even grid across the whole frame.
• Columns: vertical columns. Type is Left, Center, Right or Stretch.
• Rows: horizontal rows. Type is Top, Center, Bottom or Stretch.

For Columns and Rows, Count sets how many there are, and can be a fixed number, a variable, or Auto. Margin (the space at the frame's outer edges) and Gutter (the space between columns) are settings of the Stretch type, which spreads the columns across the frame. Offset moves the guide in from the edge you aligned it to.

Add a layout guide, switch it to Columns, and set Type to Stretch. Stretch is the type that exposes margin and gutter, so it's the one to use for a classic page grid. For a common 12-column desktop layout, set Count to 12, then pick a margin and gutter that match your spacing scale. Resize the frame to check how the columns behave at other widths. If you haven't picked a frame width yet, Figma frame sizes covers the presets.

Count also accepts a variable. If your design system already stores column counts as number variables, for example 4 for mobile and 12 for desktop, bind Count to them so a change to the variable reaches every frame that uses it. How to create variables in Figma covers setting those up.

Select the frame and open the layout guide's settings in the right sidebar, then change the type, count, margin, gutter or offset. If several frames should share one grid, save it as a layout guide style so you set it up once.

Figma's help center lists four reasons a layout guide won't appear. Work through them in order; the first two are the quickest to check.

1. The frame's guide is hidden. Each layout guide has an eye toggle in the right sidebar. Click it to show the guide on that frame.
2. Layout guides are off globally. Figma's help pages list two different shortcuts for the global toggle: ⇧G / Shift + G, or ⌃G on Mac and Ctrl + Shift + 4 on Windows. You can also tick Layout guides in the Zoom/view options menu. See Figma grid shortcuts.
3. The layer isn't a frame. Groups and sections can't have layout guides. Components can, because they count as frames. Convert a group with ⌥⌘G / Ctrl+Alt+G to wrap it in a frame.
4. The frame is rotated. Layout guides only show on frames at 0°. Set rotation back to 0 to see them.

Select the frame and remove the guide from the Layout guide section of the right sidebar. That deletes it from this frame only. To hide guides everywhere without deleting anything, use the global toggle above instead.

Layout guides are visual only. They help you line things up, but they don't move layers. The Grid flow in auto layout is a different feature: it places a frame's children into rows and columns and resizes them for you. If you want content to arrange itself, use the auto layout grid. If you want a visible reference over a fixed design, use a layout guide.

Layout guides are a design aid, not artwork. If the grid is part of the design, such as a dot grid or a repeating background, it needs to be real layers. Snappattern, our pattern plugin, arranges copies of a shape into a repeating grid as ordinary layers. The seamless pattern guide shows the manual method too.