···

    Create layout grids with grids, columns, and rows

    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

    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.

    Note: 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 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: 

    Note: Related Components will be determined by:

    1. Select the frame you want to copy.
    2. Click on the layout grid in the right sidebar.
    3. When it is highlighted, use the keyboard shortcuts to copy the layout grid:
      • Mac: ⌘ Command + C
      • 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:
      • Mac: ⌘ Command + V
      • Windows: Ctrl + V

    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 ↑

    Related Videos

    See more