How to Use Grid in Figma: Step-by-Step Guide

In Figma, you can add a Grid to any frame by selecting the frame and clicking the + icon next to Layout Grids in the right panel. You can customize the grid type, size, and color to help align your design elements precisely.

Syntax

To add and customize a grid in Figma, use the Layout Grid settings on the right panel after selecting a frame.

• Grid Types: Grid, Columns, or Rows
• Size: Defines the spacing or width of grid cells or columns
• Color: Sets the grid line color for visibility
• Count: Number of columns or rows (for Columns/Rows grid)
• Gutter: Space between columns or rows
• Margin: Outer space on left and right (for Columns grid)

figma

Select a frame > Right panel > Layout Grids > Click '+' > Choose grid type > Adjust size, count, gutter, margin, and color

Example

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

figma

1. Select your frame in Figma.
2. In the right sidebar, find the Layout Grids section.
3. Click the '+' button to add a new grid.
4. Change the grid type from Grid to Columns.
5. Set Count to 12.
6. Set Gutter to 20px.
7. Adjust Margin if needed.
8. Change the grid color for better visibility if desired.

Output

A 12-column grid with 20px gutters appears over your selected frame, helping you align elements evenly.

Common Pitfalls

Common mistakes when using grids in Figma include:

• Adding grids to the wrong layer (make sure to select a frame, not a group or component)
• Not adjusting grid size or count to fit your design needs
• Ignoring gutter and margin settings, which can cause misalignment
• Using grid colors that blend with your design, making the grid hard to see

Always preview your grid overlay and adjust settings for clarity and usefulness.

figma

Wrong way:
- Adding grid to a group instead of a frame
Right way:
- Select the frame before adding the grid

Quick Reference

Setting	Description
Grid Type	Choose between Grid, Columns, or Rows
Size	Set the size of grid squares or column width
Count	Number of columns or rows (for Columns/Rows)
Gutter	Space between columns or rows
Margin	Outer space on sides for Columns grid
Color	Grid line color for visibility

Key Takeaways

Add grids by selecting a frame and clicking '+' in Layout Grids panel.

Customize grid type, size, count, gutter, margin, and color for your design needs.

Use columns grid for responsive layouts with gutters and margins.

Avoid adding grids to groups or components; always select frames.

Choose grid colors that contrast with your design for easy visibility.