pages-auto-layout

Summary

In Edit, a drawn frame can lay out what it holds by itself, as Figma's auto layout does: one after another, down or across, with a gap between them and padding round them. ⇧A adds it.

Raw wireframes

• .context/designs/web/pages-arrange/pages-auto-layout.html — a frame with auto layout: what it holds stacked down, 12 apart, 16 in.
• .context/designs/web/pages-arrange/pages-add-auto-layout.html — the same frame before: its inspector's Auto layout section is a heading with +.

Why it is drawn this way

Where Figma has it. An Auto layout section in the frame's inspector, under Place. Off, it is only its heading and +. On, it has Direction (down or across), Gap, Padding, and Align, a grid of nine dots for where what it holds sits in it; − at the heading takes it off (⌥⇧A).

Adding it. ⇧A on a frame picked turns it on, down, with what it holds in the order it was drawn top to bottom. On several drawn elements picked, or one that is not a frame, ⇧A puts them in a new frame with auto layout, where they were, as ⌘G puts them in a group.

Its size. W and H are Fixed or Hug: a frame with auto layout hugs what it holds down its direction by default, and keeps the width it had across it. Its handles change a fixed side; a hugging side follows what it holds.

What it holds. Placed by the frame, not by X and Y: their own X and Y are not shown while they are in it. Dragging one inside the frame puts it in another place in the order; dragging it out of the frame takes it out. Layers shows the frame with the auto-layout icon, and its order is the order on the canvas.

No schema change. Auto layout is a set of properties of a drawn frame in the draft (direction, gap, padding, align, hug), as hiding and locking are. It is drawn as a flex box; Get code writes it as one.

Related

• pages-group-lock
• pages-layers
• shortcuts

Sources

• .context/designs/web/pages-arrange/pages-auto-layout.html
• .context/designs/web/pages-arrange/pages-add-auto-layout.html