When designing for the screen, there are any number of layouts to contend with. To allow our designs to adapt, we need both precision and flexibility.

The pixel grid gives us precision and control over placement. A layout grid gives us greater flexibility in implementing our designs.

Learn more about layout grids

• Check out our answers to Frequently asked questions at the bottom of this page.
• Learn more about how you can use layout grids in our blog post: Grid Pro Quo.

What are layout grids

Layout grids help us to align objects within a frame.  They provide visual structure to our designs. They help our designs remain logical and consistent across different platforms and devices.

Layout grids aren't reliant on the pixel grid. This means they aren't dependent on a specific resolution or dimensions.

You can only apply layout grids to frames. This could be a top-level frame, or a frame nested within another frame.

Layout grids let you:

• Establish consistency across multiple platforms.
• Make fewer decisions when defining layouts.
• Reduce the time taken to define layouts for mock-ups or wireframes.
• Support diverse layout techniques like galleries, icons, or entire page layouts.

Applying layout grids

You can apply a layout grid to any frame. Remember that components are also frames, so you can apply them to components too.

You can find the layout grid settings in the right sidebar:

To apply a layout grid:

1. Select the frame in the canvas or the Layers panel of the left sidebar:
2. Click next to Layout grids in the right sidebar:
3. A uniform grid will be applied to the frame by default:
4. You can then click to open the layout grid settings and update any properties:

Layout grid properties

There are three types of layout grids available; a uniform square Grid, Columns, and Rows.

Uniform grids let you define both the size and color of the grid. Square grids are great for situations requiring precision, like designing symbols or icons.

With column and row grids, you can define the width or height of the grid, as well as your gutter and margins. They are ideal for designing responsive interfaces for web and mobile.

You can use grids on their own or combine them to support more complex layouts.

Learn more about Combining layout grids ↓

Changing the layout grid

To select the grid type:

1. Click in the right sidebar:
2. Click in the layout grid properties window:
3. You can choose a:
   • Uniform Grid
   • Grid with Columns
   • Grid with Rows

Uniform grid properties

If you select a uniform grid, you can choose the size of the grid. This determines how many pixels each square will contain.

For example: In a default 10pt grid, each square of the grid will contain 100 pixels (10px by 10px).

1. Click to open the layout grid settings.
2. Update the Size field to the desired dimensions: 
3. Click to close the window and return to the canvas: 

Column and row properties

You can apply layout grids as columns, rows, or have both. Column and row grids give you greater control and flexibility over your layout.

You can define the following properties of your grid:

Grid properties

• The Count determines how many columns or rows there are in the grid.
• The Gutter defines the distance between each column or row.
• The Margin is the distance from the edge that the column or row starts. This applies to Stretch grids only.
• The Offset is the distance from the top or left the column or row starts from. This applies to rows set to top and columns set to left.

Grid type

There are two different types of layout grids: Fixed and Stretchy.

For Fixed layout grids, you can determine both the Width (of the columns) or Height (of the rows), as well as the Count (number) of columns or rows.

The layout grid can be fixed to:

• The Top or the Center of the frame for Rows
• The Left or the Center of the frame for Columns

Stretchy grids will adapt to the size of the frame. This allows your designs to respond accordingly when the frame is resized.

The Width or Height of the grid will be automatically determined, based on the frame size.

Color

The default color of a layout grid is red (#FF0000), with an opacity of 10%.

You are able to change the Color and Opacity of any layout grid:

1. Click in the right sidebar.
2. Click on the Color swatch: 
3. Use the color picker to select a new color:
4. Adjust the opacity if needed.

Combine layout grids

As we mentioned above, you can apply many layout grids to a single frame. This is handy when developing more complex Layouts.

For example: You can apply both Column and Row layout grids for more control over vertical and horizontal alignment.

1. Select the frame you would like to add another layout grid to.
2. Click next to Layout grids in the right sidebar.
3. Select the layout grid in the dropdown provided.
4. Define any other relevant properties.
5. Repeat to add more layout grids to the frame.

Toggle layout grids

You can toggle the visibility of your layout grids. This is great for situations when you need to hide your layout grids, without removing them entirely.

Layout grids will still work, even when they aren't visible.

Toggle all layout grids

You can toggle the visibility on all layout grids in your file, at once.

1. Click on the Zoom percentage in the top-right corner of your screen. This will open the View Settings menu.
2. If there is no check next to the Layout grids option, clicking this will display them.
3. If there is a check already showing, clicking Layout grids will hide them:
4. Or, you can use the Keyboard Shortcuts to toggle layout grids off and on:
   • Mac: Control G
   • Windows: Control Shift 4

Toggle individual layout grids

If you would like to enable or disable a single layout grid, you can do this in the Properties Panel.

1. Select the relevant frame.
2. Find the Layout grids section in the right sidebar.
3. Click next to the layout grid to toggle it off:
4. Click next to the layout grid to toggle it on: 

Layout grid styles

Once you have perfected the ideal layout grid, you can create a Style to reuse it across your designs.

Learn more about creating styles →

Create a layout style

1. Select a frame in the canvas with the layout grid(s) applied.
2. Click in the Layout grid section of the right sidebar.
3. Click in the Grid styles window:
4. Give the layout grid style a memorable name: 
5. Click Create style to complete the process.

Apply a layout style

1. Create or select a frame in the canvas.
2. In the right sidebar, click .
3. Select a layout grid style from the window:
4. The layout grid will be applied to the selected frame: 

Work with grids and constraints

For more complex designs, we need precision and flexibility to ensure our designs behave when resized.

Constraints are great at giving you a basic framework for where objects are positioned within a frame. When combined with layout grids, they provide the framework for a powerful layout system.

Learn more about combining grids and constraints →

8-point grid

The 8-point grid system is a popular tool for designing UI layouts. It involves using multiples of 8 to define the placement of objects within your design.

You can use this system when designing for fixed constraints, like a mobile app. But it can also be a useful tool when designing responsive layouts.

There are two common methods for implementing the 8-point system:

• Hard grid: This involves placing objects on a fixed grid with 8-point increments. In Figma, this would involve applying a uniform grid to the frame with a size of 8.
• Soft grid: This involves placing objects at distances from each other that are divisible by 8. This would involve applying a row or column layout grid with properties divisible by 8.

Learn more about the 8-point grid in this Spec.fm post →

Frequently asked questions

Can I toggle all layout grids at once?

Yes. This can be done from the View Settings menu in the top-right corner of Figma.

Learn more in the Toggling layout grids section ↑

Why aren't my layout grids showing?

There are a couple of reasons why a layout grid may not be showing:

• The layout grid has been toggled off in the right sidebar.
• Layout grids have been toggled off globally.
• The selected layer isn't a frame. Layout grids can only be applied to frames.
• The frame has been rotated. Make sure your objects have their rotation set to 0º before applying a layout grid.

How do I copy layout grids?

You can copy a single layout grid and apply this to another Frame. Or, you can create a layout grid style that can be reused across your designs.

Learn more in our Layout grid styles section ↑