Skip to main content

Precision: snapping, guides, rounding and the Scale tool

These rules decide where a layer lands when you move, resize or draw it with the pointer: what it snaps to, and when the result is a whole number. Also called: smart guides, pixel snapping, scale vs. resize.

What snapping considers​

Where: always on; there is no setting. Hold S during a gesture to suspend it.

  • A layer snaps to its parent, to the parent's other children and to everything inside them. A layer nested in a frame doesn't snap to that frame's siblings or to the artboard around it. A drag that hovers another frame switches to that frame's content.
  • A layer placed directly on the page, an artboard included, snaps to the other layers on the page. An artboard offers it only its outline, not the layers on it.
  • Each of these layers offers the edges and the center of its bounding box, without stroke and effects. A frame adds the lines of its Layout helpers while layout helpers are shown.
  • Hidden or clipped-away layers and anything outside the viewport don't snap. Locked layers do.
  • A guide snaps when it belongs to the page or to the layer's artboard, is in view, and guides aren't hidden.
  • A move snaps the edges and the center of the selection's bounding box, a multi-selection as one box. A resize snaps only the dragged edge or corner; a draw snaps its start point and the dragged corner.
  • Equal spacing applies to a move only: the selection snaps where its gap to a neighbor equals an existing gap, or centered between two neighbors. Translucent bars mark the equal gaps. An equally near edge alignment wins.
  • Nothing snaps while the selection contains an in-flow item of a Flex or Grid frame, or while you draw into such a frame.

Ruler guides​

Where: drag from a ruler onto the canvas. Rulers: the Even more options menu at the right end of the header → Show rulers, or Shift + R.

  • A guide released over a top-level artboard belongs to it: it is drawn across that artboard only, measured from the artboard's origin, and moves with it. Released elsewhere, it belongs to the page. Dragging it later changes the owner the same way.
  • A frame inside an artboard never owns a guide, and a locked artboard doesn't take one.
  • Double-click a guide to type its position: whole numbers only, no math. A value outside the owning artboard moves the guide to the page.
  • To delete a guide, right-click it → Delete guide, or drag it back onto a ruler.
  • Guides are saved in the document, so collaborators see them. Hide guides and Lock guides in the same menu are saved in your browser and affect only you. Lock guides stops guides from being dragged; double-clicking a guide to type its position and Delete guide still work.
  • Guides don't appear in preview.

Whole-pixel rounding​

Moving, resizing, drawing and arrow-key nudging write whole pixels. The pixel grid (Show pixel grid) plays no part in it, or in snapping.

  • A resize rounds each edge of the layer in its parent's coordinates; the size is the difference of the rounded edges. Two adjacent 50 px layers resized together to a total of 101 become 51 and 50.
  • A layer rotated against its parent gets position and size rounded separately.
  • A move shifts the selection by one offset that puts the left and top edge of its bounding box on whole pixels. Layers inside a multi-selection keep their fractions.
  • A snap wins over rounding: the snapped edge takes the exact coordinate of its target, fractional or not.
  • Typed values aren't rounded to whole pixels (position and size fields keep two decimals), and neither are the sizes and positions a Flex or Grid layout computes.

Scale tool versus resize​

Where: left toolbar → Scale, or K, then drag a resize handle.

A resize changes width and height; children follow their constraints (or stay put). The Scale tool keeps the proportions and multiplies by one factor:

  • width, height and min and max size;
  • corner radii, stroke widths, shadow offsets and blur radii;
  • padding, Flex gaps, Grid gaps and Grid tracks set in pixels;
  • text size, paragraph spacing and indent, decoration thickness, and letter spacing, word spacing and line height set in pixels;
  • every layer inside, positions included, whatever its constraints.

Scaling a Flex or Grid frame, or an in-flow item of one, first sets both of its axes to Fixed.

A width, height, corner radius, stroke width, padding or Flex gap bound to a variable or a component input keeps its value. A bound text size is scaled, and its binding is removed. Scaled values aren't rounded to whole pixels.

Number fields​

  • A number field in the Properties panel evaluates +, -, *, /, % and parentheses. % between two numbers is the remainder: 10 % 3 is 1. An entry is never relative to the current value: +10 sets 10.
  • Drag a field's icon or letter sideways to scrub, or its left edge when it has neither. Shift multiplies the steps by ten.
  • With Mixed in a field, typing sets one value on all selected layers. Scrubbing adds the same amount to each layer, so their differences stay.