Measure Mode

Measure mode lets you click elements to see the pixel distance between their closest edges, with dimension lines and labels drawn on the canvas overlay.

How it works

1. Switch to Measure mode — press 2 or select Measure in the control panel.
2. Click the first element — it stays highlighted and labelled A.
3. Click the second element — the gap between them is measured and labelled B.
4. Keep clicking to pin up to five elements (A through E). Every consecutive pair is measured simultaneously.
5. Click a pinned element again to unpin it.

Smart edge detection

Calipers automatically finds the closest edges between two elements:

• Side-by-side elements → horizontal gap (right edge to left edge)
• Stacked elements → vertical gap (bottom edge to top edge)

Alignment guidelines are drawn when edges line up horizontally or vertically.

Multi-element measurement

Pin three or more elements to compare a whole row or column at once. Each consecutive pair gets its own measurement line and label — useful for checking consistent spacing across a toolbar, card grid, or nav items.

Copying measurements

Click any distance label to copy the value to your clipboard (e.g. 24px).