How to Create Grid Style in Figma: Step-by-Step Guide

To create a grid style in Figma, select your frame and open the Layout Grid section in the right sidebar. Click the plus icon to add a grid, then choose between Grid, Columns, or Rows and customize the size, count, and gutter to fit your design needs.

Syntax

In Figma, grid styles are created by adding a Layout Grid to a frame. You can choose from three types:

• Grid: A square grid with equal rows and columns.
• Columns: Vertical columns with customizable count, gutter, and margin.
• Rows: Horizontal rows with similar customization.

Each grid type has properties you can adjust to control spacing and alignment.

figma

Frame > Layout Grid > + (Add Grid) > Choose Type (Grid, Columns, Rows) > Adjust Size, Count, Gutter, Margin

Example

This example shows how to add a 12-column grid with 20px gutters to a frame in Figma:

text

1. Select your frame in Figma.
2. In the right sidebar, find the <Layout Grid> section.
3. Click the plus (+) button to add a new grid.
4. Change the grid type from <Grid> to <Columns>.
5. Set the <Count> to 12.
6. Set the <Gutter> to 20 px.
7. Adjust <Margin> as needed (e.g., 24 px).
8. Your frame now shows a 12-column grid to guide your layout.

Output

A frame with 12 vertical columns separated by 20px gutters and margins on sides.

Common Pitfalls

Common mistakes when creating grid styles in Figma include:

• Not selecting a frame before adding a grid, so the grid option is disabled.
• Confusing Grid with Columns or Rows and choosing the wrong type for your layout.
• Setting gutters or margins too small or too large, which breaks alignment.
• Forgetting to lock the grid or use it consistently across frames, causing inconsistent layouts.

Always preview your grid overlay and adjust settings to fit your design context.

text

/* Wrong way: Adding grid without selecting frame */
// Result: Layout Grid option is greyed out

/* Right way: Select frame first, then add grid */
// Result: Grid options enabled and customizable

Quick Reference

Property	Description
Grid Type	Choose between Grid, Columns, or Rows
Count	Number of columns or rows
Size	Width or height of grid squares or columns/rows
Gutter	Space between columns or rows
Margin	Space on the edges of the frame
Color & Opacity	Customize grid overlay visibility

Key Takeaways

Always select a frame before adding a layout grid in Figma.

Choose the grid type that fits your design: Grid for squares, Columns for vertical layout, Rows for horizontal layout.

Adjust count, gutter, and margin to control spacing and alignment precisely.

Use consistent grid styles across your project for uniform design.

Preview and tweak grid opacity and color for better visibility without distraction.