pages-align

Summary

In Edit, a row at the top of the inspector lines up what is picked, as Figma's: align left, centre or right; top, middle or bottom; and distribute across or down so the gaps are equal.

Raw wireframe

• .context/designs/web/pages-arrange/pages-align.html

Why it is drawn this way

One row, where Figma has it. Eight icon buttons at the top of the inspector, under the header, each with its key in its title. Drawn here after Align left: the three elements share a left edge.

What they line up with. Several picked line up with the box around them. One picked lines up with the frame it is in, or the page. Distribute needs three or more; with fewer its buttons are off.

Keys, as Figma's: ⌥A left, ⌥H centre, ⌥D right, ⌥W top, ⌥V middle, ⌥S bottom; ⌃⌥H and ⌃⌥V distribute. ⌥S is also "Next state": with something picked in Edit it aligns to the bottom, and otherwise it is Next state (the owner's choice, 2026-10-20).

What it changes. Drawn elements move, as a drag moves them. A captured element moves by its translate, as a drag moves it. Each press is one change in the draft, and one Undo.

Related

• pages-multi-select
• pages-snap-guides
• shortcuts

Sources

• .context/designs/web/pages-arrange/pages-align.html