Auto-layout

Auto-layout turns a group into a container that positions its children for you. Instead of nudging every layer into place by hand, you say “this is a row with a 16px gap” and the group does the arranging — and keeps doing it. Change a label’s text, swap a font, animate a child bigger: the siblings reflow around it, live, every frame.

If you’ve used auto layout in Figma or flexbox on the web, this is the same idea, pointed at video.

Reach for it for anything that reads as a row, column, list, card, toolbar, or panel. Skip it for freeform composition — a hero headline placed just so doesn’t need a layout engine, and adding one only takes away your x/y control.

Turn it on

Auto-layout lives on groups. Select several layers, right-click and choose Group, then look for the Auto Layout section in the properties panel and click its +.

The group starts as a horizontal row that hugs its content — the box shrink-wraps to whatever is inside. The section’s × removes the layout again; the children keep the positions the layout gave them.

Direction, alignment, spacing

Three directions:

Horizontal — children flow left to right. A button row, an icon beside a label.
Vertical — top to bottom. A list, a stack of stat lines.
Stack (overlap) — every child occupies the same box, each aligned independently. This is how you put text on a shape without hand-centring either one.

The 3×3 alignment grid is the centrepiece: one click sets both axes at once — where children pack along the flow, and how they align across it. Beside it sit gap (pixels between children) and padding (inset from the group’s edge — the padding field splits into per-side values with the button next to it, same as corner radius).

Two dropdowns above the grid carry the rarer choices:

Distribution — Packed (the default), or Space between / around / evenly, which spread the children across the group’s main axis.
Cross axis — Align by grid (the default), Stretch children (every child fills the cross axis), or Align baselines.

Align baselines is the one worth remembering: in a row of text plus an icon, it sits everything on the text baseline, the way a character would sit. Centring an icon next to text usually looks slightly off; baseline alignment is why real toolbars look right.

Sizing: Fixed, Hug, Fill

Every child inside a layout gets an In layout section in the panel, with a sizing mode per axis:

Fixed — keep the authored width or height. The default.
Hug — shrink to the content. Text hugs its glyphs; a nested group hugs its own laid-out children.
Fill — expand into the leftover space. Several Fill children share it; a Grow weight (behind the section’s +) splits it unevenly.

The container has its own W/H Fixed ⇄ Hug choice at the bottom of the Auto Layout section — Hug makes the box shrink-wrap, Fixed pins it so the children arrange inside a set frame.

One honest gotcha, because it catches everyone once: text in a row should hug both axes, not just width. A text layer’s height is measured at its pre-layout width — so a fixed height with a stale width bakes in the wrong number of lines, and hugging width alone never corrects it. Height set to Hug re-measures at the final width and the problem disappears.

Min/max width and height (also behind the +) clamp what Hug and Fill compute — a max width on hugging text makes it wrap inside the bound instead of overflowing.

Wrap

The wrap toggle (next to the direction control) lets an overflowing row break onto new lines, like tags or chips. It only means something when the main axis is bounded — a hugging row just grows instead of wrapping. When wrapping produces multiple lines, an extra dropdown appears to align the lines themselves (start, centre, space between…).

Grid

The section’s Flex ⇄ Grid switch turns the same group into a simple grid: a number of equal-width columns, rows sized to their tallest child, with separate column and row gaps. The alignment grid then positions each child within its cell. It’s a row-major approximation of CSS grid — good for stat tiles and card walls, not for spanning cells.

Layouts and animation

This is where auto-layout pays for itself in a video tool. The layout runs every frame, so animating one child reflows its siblings live:

Animate a child’s scale or a text layer’s font size (with width set to Hug) and the row makes room as it grows.
Entrances still work per child — a column of lines can slide in one by one, and the layout holds the geometry.

Two things stop being yours to set, by design: x/y on a layout child is ignored (the layout computes positions), and a Hug or Fill axis can’t be resized by hand (its size is computed too — resize by scale, or change the content or gap). On the canvas, dragging a child along the flow reorders it instead of moving it.

Need one child out of the flow — a badge pinned to a corner, an overlay? The pin icon in its In layout header sets it to position absolutely: it keeps its own x/y while its siblings flow without it.

Layouts + data

Repeats flow through layouts. Give a child a Repeat and the copies become ordinary siblings — the layout arranges one copy per data row exactly as it would hand-placed layers. A column group with a repeated row inside it is a leaderboard that adds a line whenever the data grows; no repositioning, no stagger math for the geometry.

When not to use it

Freeform art direction. If every element is placed by eye, layout adds indirection for no gain.
Hand-animated positions. If you want to keyframe a child’s x/y, keep it out of the flow (or pin it absolute) — the layout will overrule the keyframes otherwise.
One layer. A group with a single child doesn’t need arranging — though Stack with padding is a legitimate way to give a text layer a self-sizing background.

Agents know layouts too

Everything on this page is documented to agents as well. Connect a coding agent and it can build these structures directly — “make this a card: icon left, title and subtitle stacked right, hug the content” is one sentence, and agents are steered to prefer auto-layout over hand-computed coordinates for anything row- or column-shaped.