Auto layout — design that survives real content
A button looks perfect until the label changes from "OK" to "Confirm payment" and the text spills out the side — hand-placed designs break the instant real content arrives, which it always does.
Choose your track
Read this module through your lens
Why hand-placed design breaks
In the last courses you placed elements by eye and they looked right. The problem is that a static mockup is a lie about a living product. Labels change length, lists gain and lose items, the same screen ships in three languages, and the device width varies. Every one of those is content arriving after you placed the pixels — and fixed coordinates cannot move.
The classic symptom: a button sized exactly to fit “OK”. Change the label to “Confirm payment” and the text spills past the edge, because the box has no idea it should grow. Add an item to a hand-spaced list and everything below it has to be nudged by hand. Multiply that across a real product and manual placement becomes unmanageable.
Auto layout is the fix, and it is the single feature that separates a beginner mockup from something that behaves like real UI.
Design the rules, not the pixels
Auto layout turns a frame into a container that arranges its children by rules. You set three things: direction (does it stack horizontally or vertically), the gap between children, and the padding inside the frame. From then on, the frame positions its contents — you stop placing pixels and start declaring intent.
Each child then gets a sizing mode: hug contents (the box shrinks to fit what is inside, how a button should behave), fill container (the child stretches to fill available space, how a search field spans a bar), or fixed. Choosing these deliberately is most of the skill.
If this sounds like CSS flexbox, that is exactly right — auto layout is Figma’s flexbox, with direction, gap, padding, and grow/hug as the same concepts. That is also why an auto-layout design is much closer to how it will actually be built: you are designing in the grammar the code will use.
Try it, then stress it
In the simulated canvas, building a frame and turning on Auto layout shows the idea: the button’s padding holds around its label rather than being faked with empty space. In real Figma, the move is: build the element, select its frame, press Shift + A, then set direction, gap, and padding from your 8-point spacing scale.
The test that matters is stress: change the content and watch. Type a much longer label and a hug button should grow; type a short one and it should shrink. Add an item to an auto-layout list and everything below should reflow on its own. If anything overflows, overlaps, or strands, a sizing mode is wrong — usually a fixed where it should hug or fill.
Nest auto layouts for real components: a row (horizontal) for a button’s icon + label, inside a column (vertical) for a card, inside a list. Each level has its own direction, gap, and padding, and the whole thing stays robust as content changes.
Hands-on exercise
Build a button with auto layout (hug contents, padding from your spacing scale) and prove it: type “OK”, then “Confirm payment”, then “Go” and watch it resize correctly each time. Then build a small list or chip row using nested auto layout and add/remove an item to confirm it reflows. Capture a short before/after of a fixed element clipping vs the auto-layout one adapting.
Second case · a list of chips/tags
The same lesson, a different object
A row of filter chips, each a fixed-width rectangle with centred text, hand-spaced 12px apart.
A chip labelled 'Price: low to high' overflows its fixed box, and adding a chip means manually nudging every chip after it. One content change breaks the whole row.
Make each chip an auto-layout frame set to hug its text with padding; put the chips in a horizontal auto-layout row with a gap. Now chips size to their label and the row reflows when you add one.
Common failures · spot them fast
The failure gallery
Text overflows a fixed-size button when the label grows
Resizing leaves children stranded or overlapping
Mixing auto layout with hand-nudged children (fights itself)
Wrong sizing mode (fixed where it should hug/fill)
Padding faked with empty rectangles instead of real padding
Each of these is caught by a quality gate — keep the cheatsheet open while you work.
Worked example
Watch the journey
The pattern
Cheatsheet
Cheatsheet
Recipe & shortcuts
Select the frame -> Shift + A to add auto layout.
Set: direction (horizontal/vertical), gap between items, padding inside.
Per child: 'hug contents' (size to content) or 'fill container' (stretch).
Nest auto layouts for rows inside columns (a card inside a list).
Failure modes
- Text overflows a fixed-size button when the label grows
- Resizing leaves children stranded or overlapping
- Mixing auto layout with hand-nudged children (fights itself)
- Wrong sizing mode (fixed where it should hug/fill)
- Padding faked with empty rectangles instead of real padding
Key operations
- Add auto layout to a frame (Shift + A)
- Set direction, gap, and padding
- Choose hug vs fill vs fixed per element
- Nest auto layouts for complex components
Quality gates
- Does the button/card resize correctly when text changes?
- Is spacing driven by gap/padding, not manual nudging?
- Are sizing modes (hug/fill/fixed) deliberate, not default?
- Does the layout hold at a longer and a shorter content length?
Workflow steps
- Build the element, then add auto layout
- Set direction, gap, padding from your spacing scale
- Set each child to hug or fill
- Test with long and short content
Next module
- Course 2 — Prototyping & Animation: proto_first_flow. Make these screens move.
Reflection
Reflection card
Active retrieval — answer from memory before re-reading. Saved to this browser.
You've completed this module when…
- A button or card that correctly resizes when its text gets longer and shorter.
- Spacing driven entirely by gap/padding from a spacing scale.
- A nested auto layout (e.g., rows inside a list) that holds under content changes.
Next: Course 2 — Prototyping & Animation: proto_first_flow. Make these screens move.
Finish — back to Interaction & UI Design →