Pathwise

Manuals / Figma / Chapter 3

A · Layout · beginner · Days 3–5 · Chapter 3 of 13

Auto Layout mastery

Auto Layout is how Figma layouts resize like CSS flexbox. Hug vs fill, padding, gaps, nested stacks — the skill that separates amateur from hireable.

Path progress
18%

Step 1 of 3

First stack

Select elements → Shift+A. Direction, gap, padding. Hug contents on buttons; fill on inputs in a form.

First stackDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →First stackdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Do this now

Rebuild login form as vertical Auto Layout: 16px gap, 24px padding.

Was this step clear?
Chapter learning outcomes
  • Horizontal/vertical stacks
  • Hug vs fill
  • Padding & gap
  • Nested Auto Layout
  • Min/max width

Clear these before you leave

Side quest

Pricing table

3 pricing columns with Auto Layout. Collapse to single column under 600px width.