When you drag an element around the canvas, livedocuments quietly helps you line it up. As an edge or centre comes within a few pixels of a neighbour's, the element snaps into alignment and a faint guide line appears to show the match, so a tidy layout falls into place without nudging pixels by hand.
What snapping lines up
While you drag, the element snaps to nearby elements':
- Edges: left, right, top, or bottom edges line up flush.
- Centres: horizontal and vertical centres align, so things sit centred on one another.
- Even spacing: when an element sits between or beyond two others it snaps to an equal gap, and a short guide marks the matched spacing. This works across directions too: drop a box under one of two side-by-side boxes and it snaps to the same gap they keep between them.
A guide line only appears once a match is actually in effect, so the canvas stays clean until alignment is doing something. The same guides show when you drag a free arrow endpoint into line with a box's edge or centre, or with the arrow's other end. When the endpoint pins to a shape, its connection dots show instead of guides.
Snapping while you resize and draw
Resizing snaps too. Dragging a resize handle lines the moving edge up with a neighbour's edge or centre, and also matches sizes: drag a box to within a few pixels of a neighbour's width or height and it takes exactly that width or height, so siblings share a size without typing numbers. With Shift held (or the aspect ratio locked), only the leading side snaps and the other follows the ratio.
Drawing a shape to size by dragging on the canvas snaps both corners the same way, with the same guides.
A few things never snap: a multi-selection being resized, and a rotated element being resized.
Dragging freely: hold Cmd or Ctrl
Sometimes you want a deliberately off-grid position and snapping gets in the way. Hold Cmd (⌘) on a Mac, or Ctrl on Windows and Linux, while you drag or resize to switch snapping off for that gesture: no snap, no size matching, no guide lines, and the element follows your pointer exactly. You can press or release the key mid-drag and it takes effect on the next move. Let go and the next drag snaps as usual, so it's a per-drag override, not a mode you have to remember to turn back on.
The modifier works the same for a single element, a multi-selection and a resize handle: anything you move or resize follows the pointer freely while the key is held. On an arrow's endpoint it turns off only the alignment guides; the endpoint still pins to a shape and still locks to 45°. To size an element exactly, type the numbers in Size.
Hiding the guide lines
The guide lines can be switched off in Settings, under Editor, with Alignment Guides. That hides the lines only: elements still snap as you drag and resize. To place or size one element without snapping, hold Cmd or Ctrl as above. See Alignment Guides.
Reach for ⌘/Ctrl-drag for the last fine adjustment: let snapping line most of a page up for you, then hold the key for the one element you want sitting slightly off the grid.
Was this article helpful?