pages-snap-guides

Summary

While something you drew is dragged in Edit, it snaps to the edges and middles of everything else on the page, as in Figma, and a red line shows what it lines up with. Hold ⌘ (Ctrl) to drag freely.

Raw wireframe

• .context/designs/web/pages-edit/pages-snap-guides.html

Why it is drawn this way

Edges and middles, both ways. The left, middle and right of what is dragged come to the left, middle or right of any element of the page within 5 page pixels, captured or drawn; the same for top, middle and bottom. The nearest wins. Several dragged together snap as one box.

A line per match, end to end. The red line runs from the dragged box to the far end of every element it lines up with, so you see what it is level with, not only that it snapped. The lines go when it is let go. It is saved where it was shown, snapped, not a pixel off under the pointer.

Measured in the frame, drawn over it, as the spacing is: the board's script finds the edges in the page; Trunk draws the lines over the frame.

Not yet: the resize handles and the arrows do not snap; equal spacing between three or more is not shown.

Related

• pages-edit
• pages-spacing
• pages-multi-select

Sources

• .context/designs/web/pages-edit/pages-snap-guides.html