Canvas manual/Auto layout, align & arrange

Auto layout, align & arrange

Line things up and let them flow. Auto layout keeps a frame’s children spaced as they change; align and distribute tidy a selection; arrange controls what sits on top.

Auto layout

Give a frame a direction and it spaces its children automatically as they resize or reorder.

Select a frame and press A, or hit Add auto-layout in the Auto-layout section. Then set:

  • Direction — Row or Column.
  • Gap — the space between children.
  • Pad — the padding inside the frame’s edges.

Children reflow as you add, remove or reorder them — no manual nudging.

Align & distribute

The Align section appears when you select two or more layers — or a single layer inside a frame (then it aligns to the frame).

Align
Left⌥ A
Right⌥ D
Top⌥ W
Bottom⌥ S
Center horizontally⌥ H
Center vertically⌥ V
Distribute & tidy
Distribute horizontally⌃ ⌥ H
Distribute vertically⌃ ⌥ V
Tidy up⌃ ⌥ T

Tidy up snaps a loose selection into an even grid or row, inferring the spacing.

Group & arrange

Bundle layers and control stacking order.

Group

G groups a selection; G ungroups. To wrap a selection in a frame instead (so it can clip and auto-layout), use G.

Z-order

The Arrange section’s Front / Fwd / Bwd / Back buttons move a layer through the stack: forward ], backward [, to front ], to back [.

Constraints

How a child stretches when its frame resizes lives in Frames & constraints.