Layout Grids are visual aids that help you keep items aligned as you layout the elements in your Frames.
First, layout grids are only available for use in frames. If you are unable to locate the layout grid section in the Properties Panel to the right of your canvas, you probably do not have a frame selected.
Adding Layout Grids
To add a layout grid to a frame:
- Select the frame
- Click the + button to the right of Layout Grid in the properties panel
By default, grids added to a frame will be a 20px uniform grid, you can change that in the layout grid settings window.
Zoom in and you'll see that each square of the grid contains 400 pixels (20 x 20).
Grids introduce structure and allow for diverse layout technique (i.e. photo libraries, icons, content placement for magazines, etc).
Uniform grids are static and pixel-fixed. You can resize the frame, but your grid size set in stone unless otherwise.
Check out this 8-point grid article for more information and best practices.
Adding columns and rows
You can add multiple grids to your frames. Columns, rows, or both!
Once you have clicked + to add layout grids, select the grid thumbnail in the Properties Panel to open the settings window.
This is where you can customize your grids.
- Choose Rows or Columns to change the grid orientation from horizontal to vertical. The default is five (5).
- By default, grids stretch as the frame stretches. To change this behavior, change its type to “Left” or “Center” (“Top” or “Center” for horizontal grids)
- Non-stretchy grids also allow you to choose the width/height of your grid columns/rows.
- Change the color and opacity of your grids
Viewing and Hiding Layout Grids
To show and hide a particular grid:
- Select the specific frame
- Click the eyeball icon next to the grid settings in the properties panel
To toggle the visibility of all grids in your entire document, use the
Control + G keyboard shortcut, or select Layout Grids from the global settings menu in the upper right corner of the toolbar.
Copying and Pasting Layout Grids
Getting your layout grids meticulously "fine tuned" can take a while. Currently, you can't save grids for future use, but you can copy and paste them from frame to frame.
- Select your frame
- Click the layout grid(s) you have added in the Properties Panel
- When the selection is blue, use your keyboard shortcuts to copy a layer (use shift + select to select more than one)
- Paste the selection onto a new frame
Changing the color of layout grids
Sure! The default color for layout grids is a light pink, but you can change the fill to any color you'd like.
Using Layout Grids with Constraints
Layout Grids and Constraints both play a role in affecting your layout as a frame is resized.
When you place a grid on a frame, Figma assumes that you want your designs to stay aligned to that grid. As a result, constraints work differently when used in conjunction with layout grids.
- When working with stretchy grids, constraints are always based off of the nearest grid column or row. For example, if you set a “left and right” constraint on an item that lives inside a stretchy grid, its left and right coordinates will change as the grid column grows and shrinks.
- When working with non-stretchy grids, we currently assume that your layout grid is more important than your constraint. In other words, if you align your items to a center grid, we will move those items to remain pinned to that centered grid, and ignore any constraint settings you may have on that item. NOTE: this behavior may change in the future.
This combination of behaviors between Layout Grids and Constraints holds even when you hide the grids. If you want to turn off this behavior, you need to delete the grids entirely from your frame.