# Rulers, guides and snapping

> Measure and place layers precisely with rulers, guides, snapping, layout grids and Alt measuring.

Source: https://uxdeck.app/guide/rulers-guides (checked against uxdeck on 16 October 2026)

Most of the time you place layers by eye and snapping does the fine work: a layer you drag pulls to the edges and centres of the layers around it. When you need more control, turn on the **rulers** and pull out **guides**, lay a **layout grid** over a frame, or hold <kbd>⌥</kbd> to measure the distance between two layers.

All the view settings live in the **View** menu, inside the main menu at the top left (the **Deck** button).

## View settings

| Setting | Keys | Starts |
|---|---|---|
| **Rulers** | <kbd>⇧</kbd><kbd>R</kbd> | off |
| **Pixel grid** | <kbd>⌘</kbd><kbd>'</kbd> | on, shows from 400% zoom |
| **Outlines** | <kbd>⌘</kbd><kbd>Y</kbd> | off |
| **Layout grids** | <kbd>⇧</kbd><kbd>G</kbd> | shown |
| **Snapping** | <kbd>⌥</kbd><kbd>⌘</kbd><kbd>'</kbd> | on |
| **Snap to pixel grid** | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>'</kbd> | on |

These are your own view settings: turning them on or off changes nothing for anyone else in the file. **Outlines** shows every layer as a thin outline, handy for finding a hidden or tiny layer.

## Rulers

Press <kbd>⇧</kbd><kbd>R</kbd>. Rulers appear along the top and left of the canvas, in canvas units, and follow you as you pan and zoom. The extent of the selection is marked on them, so you can read its position at a glance.

## Guides

Guides only show while the rulers are on.

- **Add one:** press on a ruler and drag onto the canvas. The top ruler gives a horizontal guide, the side ruler a vertical one.
- **Frame or canvas:** dropped on a frame, a guide belongs to that frame and moves with it. Dropped anywhere else, it belongs to the canvas.
- **Move:** drag it. Hold <kbd>⌥</kbd> while dragging to copy it instead.
- **Remove:** drag it back onto a ruler, or select it and press <kbd>⌫</kbd>. Right-click a guide for **Remove guide** or **Remove all guides**.

Layers snap to guides as you drag them.

## Snapping

While you move or resize a layer, it pulls to the edges and centres of nearby layers and to guides, and a coloured line shows what it lined up with. The pull feels the same at any zoom.

It also pulls to **gaps**. Drag a card towards a row of cards and it settles at the same gap the others share, with the gap's size shown on the line. Gaps prefer your file's spacing values: when a number variable such as space/16 is close, the layer lands on it, and otherwise on a multiple of 4. Snapping only ever moves the layer you are dragging; the layers around it stay where they are. To set the gaps of several layers at once, use **Space across** or **Space down** (see [Align, distribute and Tidy up](/guide/align)).

- Hold <kbd>⌘</kbd> while you drag to place a layer freely, without snapping, just for that drag.
- Turn **Snapping** off with <kbd>⌥</kbd><kbd>⌘</kbd><kbd>'</kbd> to stop it everywhere.
- **Snap to pixel grid** keeps positions and sizes on whole pixels, so edges stay crisp. Turn it off for sub-pixel work.

To line layers up or space them evenly after the fact, use the commands in [Align, distribute and Tidy up](/guide/align).

## Measure between layers

Select a layer, hold <kbd>⌥</kbd> and point at another one. uxdeck draws the distance between them:

- side by side, the gap between the facing edges,
- stacked, the gap from top to bottom,
- overlapping or one inside the other, the distance between each pair of edges.

Point at the selected layer's parent to read its padding inside the frame.

## Layout grids

A layout grid draws columns, rows or a square grid over a frame to help you line things up. It is a guide only: it never shows in Preview, on your site or in exports.

1. Select a frame.
2. Press the plus by **Layout grid** near the bottom of the Design tab.

| Setting | Options |
|---|---|
| Type | **Columns**, **Rows** or **Grid** |
| Grid size | for a square grid (starts at 8) |
| Count | number of columns or rows, 1 to 64 (starts at 5) |
| Gutter | space between columns or rows (starts at 20) |
| Margin | space at the frame's edges (starts at 20) |
| Colour | the grid's colour and opacity |

Add several grids to one frame, for example 12 columns and an 8 px grid together. The eye hides one, the minus removes it, and <kbd>⇧</kbd><kbd>G</kbd> hides them all.

## Catches

- **No rulers, no guides.** Guides hide with the rulers and come back with them.
- **The pixel grid needs zoom.** It only appears from 400%.
- **Snapping off is remembered.** If layers stop lining up, check that **Snapping** is ticked in the **View** menu.
- **Inside auto layout, dragging reorders.** The layout places those layers, so dragging one changes its place in the order rather than snapping it. See [Auto layout](/guide/auto-layout).
