Using Constraints with Layout Grids in Figma
While doing research for the book “Designing in Figma”, I discovered a powerful way to lay out objects using a combination of Layout Grid and Constraints. The interface of Figma does not indicate a connection between the two, so it can be discovered either by a happy accident or from reading a help article. Luckily, the latter is my kind of fun pastime.
Let’s start with a quick overview of how Constraints and Layout Grids work on their own, and then see how they can be used together.
Constraints
Constraints define how objects respond when their parent frame is resized. This is useful when the same frame or component is being used in multiple sizes. Constraints can be set separately along both the horizontal and vertical axis. The object can scale with the frame, or stick to its center, one side, or both sides.
Layout Grids
Figma has three tools for creating Layout Grids — Grid, Columns, and Rows. They can be combined in any way, even with multiple grids of the same type overlaying one another. For our use case, we’re interested only in Columns and Rows. They can be created either fixed or stretchy.
Fixed columns and rows have fixed width or height and can be aligned to either side or center of the frame. Fixed columns are useful if your mockup has a fixed width or you design for a single screen size, which is quite rare nowadays. Fixed rows are great for creating baseline grids and aligning text to them.
Stretchy layout grids have almost the same properties as fixed, but their width or height is automatically calculated based on dimensions of the frame, number of columns or rows, gutter, and margin. Stretchy columns and rows provide a great foundation for responsive design on the web and adaptive layouts in the apps.
Constraints + Layout Grids = ❤️
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, a child’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.
Distribute Objects
To experiment with this behavior, let’s prototype a toolbar of the mobile app and set Constraints of the icons to Center and Center. It works fine when we change the orientation, but there is definitely room for improvement:
Now, let’s apply Layout Grid with three stretchy columns to the toolbar:
Icons are aligned to the columns, and their Constraints are set to Center and Center. When we change frame’s orientation to the landscape now, they’re properly distributed in the toolbar.
Fixed Spacing
The same technique can be used for maintaining fixed gutters and margins when resizing the frame. In the next example, Layout Grid wasn’t used, and both horizontal and vertical Constraints on the blocks were set to Scale. When the parent frame is resized, both gutters and margins are scaled proportionally.
On a fixed example, the Layout Grid was defined with stretchy columns and grids, and Constraints of the blocks were set to Left-Right and Top-Bottom. When resized, all objects stick to the grid and spacing around them is unchanged.
Conclusion
After learning about a powerful combination of Constraints and Layout Grids, I couldn’t stop thinking about why it has no presence in the interface. Maybe it’s a simple oversight, or perhaps the team at Figma plans to evolve Auto Layout to make this combination obsolete. In any case, right now there is no better way to distribute objects and create consistent spacing than with Constraints and Layout Grids. By adding this tool to our toolbox, we can remove another barrier to creating flexible layouts and truly reusable components when designing in Figma.
You can play and experiment with all the examples from this article by duplicating a Figma Community file.
