Additional tips on layout grids

Using constraints with layout grids

When you apply constraints in Figma, they help you define the resizing behavior of elements in relationship to their parent frame. So if you wanted an element to stay pinned to the top right of a frame (like a close button), applying constraints will ensure that the element maintains its distance from the top and right without changing its size as the frame grows or contracts.

In contrast, when you apply constraints to an element inside a frame that has a layout grid, your constraints will be relative to their nearest column (instead of the boundaries of the parent frame). When used with stretch grids, this will allow your elements to stay fixed to columns or rows and maintain a fixed space (gutter) between them. It results in much more realistic scaling behavior, as you can see in the gif below.

By setting constraints appropriately, you can resize items relative to the layout grid, which helps you maintain fixed column gutters and margins. 

Using the same method, we can add constraints to our previous example that highlighting nested frames (each with their own grids). This allows you to independently define the resizing behavior of specific areas within your design.

Once the grids and frames are set up, we can add elements to our design that can also resize relative to the grids on the parent frames.

Using grids to visualize padding

Sometimes you need to visualize padding to ensure content stays equidistant from the boundaries of an element. You can create grids to help with that by styling a column and a row grid with a single row/column, setting the gutters to 0 and the margin to your preferred spacing. If your design system has standardized spacing values for padding, you can quickly add these and apply them to frames or components within your design.

Sharing grids with styles

As you're creating grids, you might want to make different variations for layouts on different device sizes or other common use cases. To make it easier to apply those grids across frames, files and projects, you can combine several of them into a single grid style. That style, like other styles and components, can then be shared from a team library. Easy peasy.

That's all for today's quick hit on grids. I hope these tips uncover some of the lesser known ways to leverage layout grids in Figma, and we would love to see how you're using them. Time to channel your inner Müller-Brockmann and be sure to share your experiences with the Figma community on Spectrum.