Anchors & Colliders
Pin edges to other items or to the canvas with arrows, and keep items from overlapping with colliders.
Edges pinned to edges: arrows, margins and presets.
An anchor pins one side of an item — left, right, top or bottom — or its centre line to a line of another item or of the canvas: a side or the centre line on the same axis. It is drawn as an arrow from the pinned side to that line, labelled with the margin.
- One side pinned: the item keeps its size and moves with that line (a bug that follows the name as it grows).
- Left and right (or top and bottom) pinned: the item stretches between the two lines (a plate under a name, a bar across the canvas).
- Centre pinned: the item is centred on the line. A centre pin and the sides of its axis replace each other.
- The margin is the gap: a left or top side sits that many pixels past its line, a right or bottom side that many before it. Negative margins overlap: a plate pinned left → text left −20 and right → text right −20 is 20 px wider than the text on each side.
- Anchors are resolved on air, in every view: canvas, Output and the live page. A text that sizes itself (typographic bounds) keeps its measured size; a plain group moves but does not stretch.
Pinning on the canvas
- Pick the Anchor tool (A) and click the item to pin. Its sides and centre lines show handles.
- Optionally click the handle of the side to pin (or pick it under Pin side in the options bar). Without one, the side nearer to where you click is pinned.
- Click the edge to pin to: any visible item's side or centre line, or the canvas border. The line lights up under the pointer, with a preview arrow and a label naming it.
- Pin that side to the edge you release on
- Drag from a handle
- Pin flush (margin 0) instead of keeping the current gap
- Option / Alt+click
- Only the canvas's edges are targets
- Shift+click
- Prefer a group's edge over a member's
- Cmd / Ctrl+click
- Drop the picked side or the anchor being edited
- Esc
A new anchor keeps the item where it is: the margin is the gap it already has. Removing an anchor keeps the item where it airs too, and deleting the item an anchor points at keeps everything that followed it in place.
Editing margins
| Where | How |
|---|---|
| Arrow label on the canvas | Click to make it the anchor being edited; drag to scrub the margin; double-click to type one. |
| Anchor being edited | Arrow keys step its margin by 1 px (Shift: 10 px); Delete removes it. |
| Options bar | One chip per anchor: the line it points at, a margin field (Enter commits, arrow keys step), Safe (the title-safe margin, for canvas edges) and × to remove. |
| Moving the item | Drag, resize or nudge with the Move tool: the new position becomes its margins. |
Canvas presets
The options bar's Canvas buttons pin the selection to the canvas the way Unity's anchor presets do: left, horizontal centre, right, stretch left-right, top, vertical middle, bottom, stretch top-bottom, and stretch on all sides. A preset replaces the other pins on its axis and keeps the item where it is. Pinned to the canvas, an item keeps its distance to the frame when the page's format changes.