Lumina

Manuals / Figma / Ch 3

A · LayoutBeginner50 min read

3. Auto Layout mastery

Figma · 52 pages source format

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

What you'll learn

  • Horizontal/vertical stacks
  • Hug vs fill
  • Padding & gap
  • Nested Auto Layout
  • Min/max width

First stack

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

Do this now

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

Clear?

Hug vs fill

Buttons hug. Inputs fill container width. Cards hug height but fill width in a list.

Typical card stack:
[Vertical AL, gap 12, padding 16]
  Image — fill width, fixed height
  Title — hug
  Subtitle — hug
  Button row — horizontal AL, gap 8

Do this now

Build a card component: image, title, subtitle, CTA — all in nested stacks.

Clear?

Responsive card list

Parent vertical stack of cards. Resize frame — cards stretch, internal spacing holds.

Do this now

3 cards in a scrollable frame. Resize from 320px to 400px width.

Clear?

Checklist