Rulers, guides and snapping

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 ⌥ 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	⇧R	off
Pixel grid	⌘’	on, shows from 400% zoom
Outlines	⌘Y	off
Layout grids	⇧G	shown
Snapping	⌥⌘’	on
Snap to pixel grid	⇧⌘’	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 ⇧R. 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 ⌥ while dragging to copy it instead.
• Remove: drag it back onto a ruler, or select it and press ⌫. 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).

• Hold ⌘ while you drag to place a layer freely, without snapping, just for that drag.
• Turn Snapping off with ⌥⌘’ 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.

Measure between layers

Select a layer, hold ⌥ 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 ⇧G 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.