Layout Grids: Your Blueprint for Consistent UI

Why it exists

Digital layouts without a system become chaotic. Layout grids were created to solve the problem of inconsistent spacing and arbitrary alignment, providing a structural foundation that makes designs logical, scalable, and easier to maintain across different platforms and devices.

The mental model

A layout grid is like the scaffolding for a building or the lines on graph paper. It's a temporary, non-printing guide that gives you a structure to build upon, ensuring everything lines up correctly. The grid itself isn't part of the final design, but the consistency it creates is.

How it works

In Figma, you apply layout guides (formerly called layout grids) to frames. There are three main types. First, a Uniform Grid is a simple square grid, useful for precise work like icon design, where you define the size of each square. Second and third are Columns (vertical) and Rows (horizontal), which are essential for UI design. For columns and rows, you set a Count, Color, and Type. The Type is the most important setting: 'Stretch' makes columns or rows resize automatically when the frame is resized, which is ideal for responsive design. Fixed types like 'Left', 'Right', or 'Center' have a set width or height and are pinned to an edge of the frame.

When to use it

Use layout grids to establish a consistent visual rhythm for an entire page or screen. They are perfect for defining the overall structure of web and mobile layouts, ensuring components are placed consistently across different mockups. They speed up wireframing and high-fidelity design by reducing decisions about placement.

When not to use it

Do not use a layout grid to manage the internal spacing and arrangement of elements within a single component. That is the job for Auto Layout. A layout grid guides the placement of large-scale elements on the frame, while Auto Layout handles the relationships between elements inside those components.

One canonical example

A standard 12-column responsive web layout. You would add a column layout guide to your desktop frame, set the Count to 12, the Type to 'Stretch', and define a Margin (e.g., 120px) for the space on the left and right edges of the page, and a Gutter (e.g., 24px) for the space between each column. This creates a flexible foundation to place content that adapts as you resize the frame for tablet and mobile views.