Layout guides visibility
Toggle the display of layout guides (columns, rows, and grids) on frames.
What are layout guides?
Layout guides are visual overlay lines that can be added to frames to define column grids, row grids, or custom spacing structures. They help you position and align content consistently within a frame.
Layout guides are non-destructive — they are visible only in the editor and do not appear in exports.
Showing and hiding layout guides
Layout guide visibility is a global toggle that affects all frames on the canvas:
- Open the viewport controls in the bottom-right corner of the editor.
- Click the Layout guides toggle to turn them on or off.
When turned off, all layout guides across all frames are hidden at once. Turning them back on restores all previously visible guides.
Adding layout guides to a frame
To add or configure layout guides on a specific frame:
- Select the frame on the canvas.
- Open the right inspector.
- In the Layout section, click the + button next to Grid / Columns / Rows.
- Configure the guide type, count, gutter, and margin.
Guide types
| Type | Use |
|---|---|
| Columns | Horizontal divisions — useful for web layouts (e.g., 12-column grid) |
| Rows | Vertical divisions — useful for content spacing |
| Grid | Equal-cell grid — useful for icon design or small component grids |
Tips
- Show layout guides when checking that elements are aligned to the column grid.
- Hide guides when presenting the design or taking a screenshot — guides won't appear in exports, but hiding them gives a cleaner preview.
- Each frame stores its own guide configuration — different frames can have different grids.