Auto Layout from scratch
Manual alignment works until the content changes. Then it all falls apart at once. Auto Layout is how you stop hand-positioning things.
Manual — breaks on longer textAuto Layout — reflows
Drag to compare. The name on the right is longer in both — only Auto Layout adapts.
Build it
Section titled “Build it”-
Create a frame. Press FF and drag out a frame roughly 320×160.
Any size will do — Auto Layout will take over sizing shortly. -
Add your content. An avatar (a circle is fine), a name and a role. Do not worry about aligning them yet; that is the point.
-
Select the three layers and apply Auto Layout with ⇧+AShift+A. Figma immediately stacks them and takes over their positions.
Figma guesses a direction from the current arrangement. It is often wrong — fix it next. -
Set the direction to horizontal in the right panel, then set the gap to
12and padding to16. -
Set the text to “Hug contents” and the frame to “Fixed width”. Now type a much longer name. The layout absorbs it instead of overlapping.
This is the whole payoff: content changes, layout holds. -
Nest it. Select the name and role, apply Auto Layout to just those two, and set that inner frame to vertical. Nested Auto Layout is how real components are built.
Shortcuts
Section titled “Shortcuts”Auto Layout
| Add Auto Layout | ⇧+AShift+A |
|---|---|
| Remove Auto Layout | ⇧+⌥+AShift+Alt+A |
| Select child layer | ⏎Enter |
| Select parent frame | ⇧+⏎Shift+Enter |
| Duplicate in place | ⌘+DCtrl+D |
Check your understanding
1Your Auto Layout frame has a fixed height, and adding a third line of text causes it to overflow. What is the fix?
2Why nest Auto Layout frames instead of putting every layer in one?