Uniform grids let you define both the size and color of the grid. There are three types of layout grids available a uniform square Grid, Columns, and Rows. You can then click to open the layout grid settings and update any properties:.A uniform grid will be applied to the frame by default:.Click next to Layout grids in the right sidebar:.Select the frame in the canvas or the Layers panel of the left sidebar:.You can find the layout grid settings in the right sidebar: Remember that components are also frames, so you can apply them to components too. You can apply a layout grid to any frame. Note: Learn more about using grid systems with Figma, in the blog post: Grid Systems for Screen Design Applying layout grids Support diverse layout techniques like galleries, icons, or entire page layouts.Reduce the time taken to define layouts for mock-ups or wireframes.Make fewer decisions when defining layouts.Establish consistency across multiple platforms.This could be a top-level frame, or a frame nested within another frame. You can only apply layout grids to frames. This means they aren't dependent on a specific resolution or dimensions. Layout grids aren't reliant on the pixel grid. They help our designs remain logical and consistent across different platforms and devices. They provide visual structure to our designs.

Layout grids help us to align objects within a frame.

Learn more about how you can use layout grids in our blog post: Grid Pro Quo.

Check out our answers to Frequently asked questions at the bottom of this page.

A layout grid gives us greater flexibility in implementing our designs. The pixel grid gives us precision and control over placement. To allow our designs to adapt, we need both precision and flexibility. When designing for the screen, there are any number of layouts to contend with.

Display grid center