Layout guides
Add columns, rows, and grid overlays to frames to align content consistently.
What layout guides are
Layout guides are non-printing visual overlays placed inside a frame. They show you where to position content according to a column grid, baseline grid, or custom row/column structure — without affecting the actual layer positions.
Guides are visible only during design. They do not appear in exports or the published view.
Guide types
| Type | Description |
|---|---|
| Columns | Vertical divisions across the frame width. Typical for screen and page layouts. |
| Rows | Horizontal divisions across the frame height. Useful for vertical rhythm and baseline grids. |
| Grid | A combined column and row overlay. Good for precise two-dimensional alignment. |
Adding a layout guide
- Select a frame.
- In the Layout guides section of the inspector, click +.
- Choose the guide type: Columns, Rows, or Grid.
- Configure the parameters (see below).
Guide parameters
The available parameters depend on guide type:
Columns and Rows:
| Parameter | What it controls |
|---|---|
| Count | Number of column or row tracks |
| Type | Stretch (fill the frame), Center, Left, or Right |
| Width / Height | Fixed track size (when Type is not Stretch) |
| Gutter | Space between tracks |
| Margin | Offset from the frame edge to the first and last track |
| Color / Opacity | Guide color and transparency |
| Offset | Shifts all tracks from the default position |
Grid: combines column and row parameters into one guide.
Showing and hiding guides
- Toggle guide visibility from the viewport controls in the bottom-right corner of the editor.
- Each guide in the inspector list has an individual eye icon to show/hide it without deleting it.
See Layout guides visibility for keyboard shortcut details.
Tips
- Use a 12-column grid at common breakpoints (360 px, 768 px, 1440 px) to mirror web column systems.
- Set gutter to match your design system's spacing token (e.g., 16 px or 24 px) so alignment is consistent with production.
- Use a Rows guide with a fixed height equal to your base line-height to maintain typographic rhythm across sections.
- Color-code guides for different layout systems — use blue for the column grid and orange for safe zones.