Create layout grids with grids, columns, and rows

Layout grids are visual aids added to frames to ensure objects are precisely aligned and to help provide structure so we can keep designs logical and consistent across different platforms and devices.

Use layout grids to:

• 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

Layout grid types

There are three types of layout grids: Uniform grid, column, and row.

Uniform grid

A uniform grid is square grid, useful when you require precision such as designing symbols or icons.

If you select a uniform grid, you can adjust its color and size.

Column and row

Columns are vertical guides that span the height of a frame. Rows are horizontal guides that span the width of a frame. Both are ideal for designing responsive interfaces for web and mobile.

Both columns and rows have similar property types that you can adjust.

Add and edit a layout grid

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

To add a layout grid:

1. Select a frame.
2. Click Add layout grid in the Layout grid section of the right sidebar. A uniform grid will be applied to the frame by default.

To edit a layout grid, you can click on the Layout grid settings icon to change the layout grid type and adjust its settings.

Combine layout grids

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

For example, you can add 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.

Hide or show 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.

To toggle the visibility for all layout grids in a file at once:

1. Open the Zoom/view options dropdown menu at the top of the right sidebar.
2. Click Layout grids to check (enable) or uncheck (disable) the setting. Or, you can press Shift G on your keyboard.

To  hide or show a specific layout grid: 

1. Select the frame where the layout grid exists.
2. From the Layout grid section of the right sidebar, find the layout grid you want to toggle, and click / to show/hide it.

Create and apply 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 grid style

To create a new layout grid style:

1. Select a frame in the canvas with the layout grid(s) applied.
2. In the right sidebar, click Apply styles in the Layout grid section.
3. Click Create style.
4. Give the layout grid style a name and description.
5. Click Create style.

Apply a layout grid style

To apply a layout grid style:

1. Create or select a frame in the canvas.
2. In the right sidebar, click Apply styles in the Layout grid section.
3. Choose a layout grid style from the list to apply it to the 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.