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.
  • 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: settings menu at the right end of the header (tooltip Even more options) → 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.
  • 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.