Layout Grids

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.

In this article we'll cover:

  1. What are Layout Grids
  2. Applying Layout Grids
  3. Layout Grid Properties
  4. Toggling Layout Grids
  5. Using Layout Grid Styles
  6. Working with Layout Grids and Constraints

Check out our answers to Frequently Asked Questions at the bottom of this page.


What are Layout Grids

Layout Grids provide the visual structure to your designs; they help you to align objects.

Layout Grids aren't reliant on the pixel grid. This means they aren't dependent on specific dimensions or resolutions.

They ensure your designs remain logical and consistent across different platforms and devices.

You can only apply Layout Grids to Frames. This can be a top-level Frame, or a Frame nested within another Frame.

Layout Grids allow you 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 e.g. galleries, icons or entire page layouts.

Learn more about using Grid Systems with Figma, in the blog post: Grid Systems for Screen Design.

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 Properties Panel:

To apply a Layout Grid:

  1. Select the Frame in the Layers Panel, or in the canvas: 
  2. Click the + icon next to Layout Grids in the Properties Panel: 
  3. A Uniform Grid will be applied to the Frame by default:
  4. You can then click on the Grid icon 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 allow you to 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 below.

Changing the Layout Grid

To select the Grid type:

  1. In the Properties Panel, click on the Grid icon: 
  2. Click on the Grid drop down in the Layout Grid Properties window:
  3. You can choose from a:
    1. Uniform Grid
    2. Grid with Columns
    3. Grid with Rows
  4. You can then choose to customise the Layout Grid further:

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 on the Grid icon to open the Layout Grid settings.
  2. Update the Size field to the desired dimensions: 
  3. Click the X 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 grid 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 that the Column or Row starts. 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 number of Columns or Rows (Count).

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 on the Grid icon in the Properties Panel.
  2. Click on the Color swatch: 
  3. Use the Color Picker to select a new color: 
  4. Adjust the Opacity if required.

Combining 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 the + icon next to Layout Grids in the Properties Panel.
  3. Select the Layout Grid in the dropdown provided.
  4. Define any other relevant properties i.e. Count, Height or Width, Gutter, Margin, Type and/or Color.
  5. Repeat to add more Layout Grids to the Frame.

Toggling 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:
    • MacOS: [Control] + [G]
    • Windows: [Ctrl] + [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 Properties Panel.
  3. Click the "open eye" icon next to the Layout Grid to toggle it OFF:
  4. Click "closed eye" icon 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 Styles in our Creating Styles article.

Creating a Layout Style

  1. Select a Frame in the canvas with the Layout Grid(s) applied.
  2. In the Properties Panel, click the Style icon (four dots) next to the Layout Grid label: 
  3. In the Grid Styles window, click the "+" icon: 
  4. Give the Layout Grid Style a memorable name: 
  5. Click Create Style to complete the process.

Applying a Layout Style

  1. Create or select a Frame in the canvas.
  2. In the Properties Panel, click the Layout Grid Style icon: 
  3. Select a Layout Grid style from the window:
  4. The Layout Grid will be applied to the selected Frame: 

Tip! You can also copy and paste Layout Grids between Frames. This cannot be done on Frames with Layout Grid Styles applied.

  1. Select the Frame you wish to copy.
  2. Click on the Layout Grid in the Properties Panel.
  3. When it is highlighted, use the Keyboard Shortcuts to copy the Layout Grid:
    1. MacOS: [⌘] + [C]
    2. Windows: [Ctrl] + [C]
  4. Select the Frame you want to apply the Layout Grid to.
  5. Use the Keyboard Shortcut to paste the Layout Grid:
    1. MacOS: [⌘] + [V]
    2. Windows: [Ctrl] + [V]

Working 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 object are positioned within a frame. When combined with Layout Grids, they provide the framework for a powerful layout system.

Learn more about making the most of Grids and Constraints in our Combining Grids and Constraints article.

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 and/or Column Layout Grid with properties divisible by 8.

Learn more about the 8-point grid in this Spec.fm post: https://spec.fm/specifics/8-pt-grid


Frequently Asked Questions

Can I toggle all Layout Grids at once?

You can indeed! This can be done from the View Settings menu in the top-right corner of Figma. Learn more in our 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 be toggled OFF in the Properties Panel.
  • 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 above.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.