Lesson 5 of 12Article16 min
Auto Layout
Auto Layout makes frames behave like Flexbox: items stack horizontally or vertically with gap, padding, and alignment. When text grows, the card grows with it.
01Why Auto Layout matters
Auto Layout makes frames behave like Flexbox: items stack horizontally or vertically with gap, padding, and alignment. When text grows, the card grows with it.
Almost every modern Figma UI — buttons, lists, navbars, forms — should use Auto Layout.
Real-life example: Auto Layout is like a packing box that expands when you add more items, instead of a rigid wooden crate you must rebuild.
02Create Auto Layout
- Select objects → Shift + A (or right-click → Add auto layout).
- Set direction: horizontal or vertical.
- Set gap between items and padding around the edge.
- Alignment: start, center, end, or space between.
- Hug contents vs Fill container — hug sizes to children; fill stretches to parent width.
03Nested Auto Layout patterns
Nest layouts: a vertical card (image + text stack + button row) with a horizontal button row inside. This mirrors how CSS Flexbox nests in code.
- Buttons: horizontal Auto Layout, padding 12×24, hug contents.
- Lists: vertical Auto Layout, gap 8–12, fill width.
- Navbars: horizontal, space between logo and links.
- Absolute position (sparingly) for badges overlapping an avatar.