Create layout guides

Layout guides 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 guides 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 guide types

There are three types of layout guides: 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 guide

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

To add a layout guide:

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

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

Combine layout guides

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

For example, you can add both Column and Row layout guides for more control over vertical and horizontal alignment.

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

Hide or show layout guides

You can toggle the visibility of your layout guides. This is great for situations when you need to hide your layout guides, without removing them entirely. Layout guides will still work, even when they aren't visible.

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

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

To hide or show a specific layout guides: 

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

Create and apply layout guide styles

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

Learn more about creating styles.

Create a layout guide style

To create a new layout guide style:

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

Apply a layout guide style

To apply a layout guide style:

1. Create or select a frame in the canvas.
2. In the right sidebar, click Apply styles in the Layout guide section.
3. Choose a layout guide style from the list to apply it to the frame. 

Work with layout guides 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 guides, they provide the framework for a powerful layout system.

Learn more about combining guides and constraints.

8-point grid system

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 guide 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 guides 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 guides section.

Why aren't my layout guides showing?

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

• The layout guide has been toggled off in the right sidebar.
• Layout guides have been toggled off globally.
• The selected layer isn't a frame. Layout guides 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 guide.

How do I copy layout guides?

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

Learn more in our layout guide styles section.