Designing in Figma

Cover of the book “Designing in Figma”

Get the most out of Figma. Create future-proof layouts and design systems at scale.

See team pricing options

Back to the home page

3.4 Layout Grid

This is a sample section from the chapter “Layout Grid”.

Previously, I shared this tip in a blog post.

Layout Grid and Constraints

Using a Layout Grid and Constraints together is one of Figma’s lesser-known features, most likely because there is no visual indication of the connection in the app UI. This feature can be discovered only by accident or from reading documentation.

A Layout Grid is not just a visual aid. When applied to the frame, it helps Figma align nested objects when the frame is being resized. If you use stretchy grids, an object’s Constraints will be based on the nearest column or row of the grid instead of the frame. This helps maintain fixed gutters and results in more realistic scaling behavior.

Let’s return to our email app example, and apply a Layout Grid with Columns to the toolbar.

Icons are aligned to the columns, and their Constraints are set to Center and Center. When we change app orientation to the landscape now, they’re properly distributed on the toolbar.

Before vs. after applying a Layout Grid to the toolbar
Before vs. after applying a Layout Grid to the toolbar

The same technique can be used for maintaining fixed gutters and margins when resizing the frame. In the top example, a Layout Grid wasn’t used, and both horizontal and vertical Constraints on the green blocks were set to Scale. When the parent frame is resized, both gutters and margins are scaled proportionally. On the bottom example, a Layout Grid was defined with stretchy columns and grids, and green blocks’ constraints were set to Left-Right and Top-Bottom. When resized, all objects stick to the grid.

Fixed gutters and margins
Fixed gutters and margins

Buy the “Designing in Figma” book

Also available as a paperback on

Want to learn more about Figma?
Subscribe to my regular newsletter with Figma news and links.