Skip to content
Design Academy My progress

Stage 5 · Lesson 3 of 14

Auto layout

Building layouts that resize with their content.

  • Beginner
  • 45 min
  • 3 check questions
  • Exercise: 1 h

By the end of this lesson you can

  • Explain what auto layout does and why it matters.
  • Use direction, spacing, padding, alignment and resizing settings.
  • Build nested auto layout structures for real components and screens.

The idea

Auto layout makes a frame arrange its children automatically, like a flexible box in CSS. Add or remove items, or change text, and everything else moves to fit.

Key settings

  • Direction: horizontal, vertical or wrap.
  • Gap: the space between items. Use values from your spacing scale.
  • Padding: space between the frame's edge and its content.
  • Alignment: where items sit inside the frame.
  • Resizing: each item and frame can be fixed, hug contents (shrink to fit) or fill container (stretch to fill).

Nesting

Real layouts nest auto layout frames. A card is a vertical stack (image, text block, button row). The text block is a vertical stack of title and description. The button row is a horizontal stack. Each level has its own gap and padding.

Why it mirrors code

Auto layout works much like CSS flexbox. Designs built this way are closer to how developers will build them, which makes handoff smoother and spacing more consistent.

Why it matters in real projects

Without auto layout, every text change means nudging elements by hand. With it, buttons grow with their labels, lists reflow when items are added and screens adapt to different widths. It saves enormous time, enforces consistent spacing and is a skill nearly every design job now expects.

A realistic example

A designer builds a button with auto layout: horizontal direction, 16px horizontal padding, 12px vertical padding, 8px gap between icon and label, and the frame set to hug contents. Changing the label from "Buy" to "Add to basket" widens the button automatically.

They then build a product card as a vertical auto layout with the image set to fill width, a text stack and the button. Placing four cards in a horizontal auto layout with wrap creates a grid that reflows when the container narrows.

Step by step

  1. Make a button

    Create text, select it and press Shift+A. Set padding and corner radius.

  2. Set resizing

    Set the button to hug contents and test with a longer label.

  3. Build a card

    Stack an image, title, description and the button vertically.

  4. Set fill container

    Make the image and text fill the card width.

  5. Nest

    Wrap title and description in their own auto layout with a smaller gap.

  6. Build a list

    Put several cards in a parent auto layout and try wrap.

Common mistakes

  • Mistake Mixing auto layout with manual positioning.

    Instead Commit to auto layout for the structure, using absolute positioning only for overlays such as badges.

  • Mistake Random gap and padding values.

    Instead Use your spacing scale.

  • Mistake Not understanding hug versus fill.

    Instead Hug shrinks to content; fill stretches to the parent. Choose deliberately.

Check your understanding

Choose an answer, then check it. There is an explanation either way.

Question 1 of 3What does "hug contents" do?
Show answer

Shrinks the frame to fit its content. Hug sizes the frame to its children.

Question 2 of 3Which CSS concept is auto layout most similar to?
Show answer

Flexbox. Both arrange items along an axis with gaps and alignment.

Question 3 of 3What is padding?
Show answer

Space between the frame edge and its content. Gap is between items; padding is around them.

Practice exercise

Exercise · about 1 h

Auto layout screen

Build a settings screen entirely with auto layout.

Steps

  1. Build a list row (icon, label, value, chevron) with auto layout.
  2. Stack rows into groups with headings.
  3. Make the screen a vertical auto layout with padding.
  4. Change labels to long text and check nothing breaks.

Deliverable

A settings screen built fully with auto layout.

Self-assessment

Tick each item when it is true of your exercise. Be honest; this is for you.

4 items

Summary

  • Auto layout arranges children automatically.
  • Direction, gap, padding, alignment and resizing are the key settings.
  • Nest auto layouts to build real structures.
  • It mirrors flexbox, easing handoff.

Further reading

Third-party sources, chosen for reliability. They open in a new tab.

Your notes

Marking complete updates your course and roadmap progress.

Back to Figma and design tools Roadmap

PreviousFrames, shapes, text, images and constraints Next lessonComponents and component properties