Auto Layout turns an ordinary Frame into one that arranges its own children — spacing them automatically, growing or shrinking to fit their content, and reflowing everything the moment anything inside changes. It's the closest thing Figma has to writing actual CSS flexbox, without writing any code.
Select one or more layers and press Shift+A, or click the Auto Layout icon in the Design panel. Figma wraps the selection in a new Frame with Auto Layout already active, arranging the children in a row by default.
| Control | What it does |
|---|---|
| Direction | Horizontal (row) or vertical (column) arrangement |
| Spacing | The gap between each child element |
| Padding | Space between the children and the frame's own edge |
| Resizing | "Hug contents" shrinks the frame to fit; "Fill container" grows to fill its parent |
Before Auto Layout, adding a fourth button to a row meant manually recalculating and moving every element after it. With Auto Layout, dropping in a new child — or deleting one — reflows everything else instantly, in both spacing and frame size. This is also what makes a design closely predict what a developer's actual flexbox/grid code will look like, which shortens the design-to-code handoff covered in the last lesson of this course.
An Auto Layout frame can sit inside another Auto Layout frame — a row of buttons (horizontal Auto Layout) inside a card (vertical Auto Layout) inside a page (vertical Auto Layout). Real interfaces are almost always several layers of nested Auto Layout, which is why it's worth building the habit early rather than treating it as an advanced feature.