Your mission objective
Know what “cleared” looks like before opening Figma.
By the end, you can…
- Choose Fixed, Hug, and Fill deliberately.
- Build nested responsive sections.
- Adapt a desktop section down to 320 px.
Bring with you
- Day 1 or equivalent frame knowledge
- Your completed Mission 1 file
Decode the system
Understand the production logic before following steps.
Mission 1 built a four-card row with constraints alone. Rebuilding it here with Auto Layout is the fastest way to feel the difference: the same visual result, but the parent now owns spacing and every child declares how it wants to size — no more per-card coordinate math.
Auto Layout is a relationship between a parent and its children. The parent controls direction, padding, gap, alignment, and distribution. Each child declares how it wants to size within that relationship. This is why copying a polished layout without understanding its hierarchy often fails: the visible surface hides a system of nested sizing contracts.
Hug contents means size follows the children. It is the natural choice for buttons, badges, and tightly fitted groups. Fill container means take the available space offered by an Auto Layout parent; it works for search fields, content columns, and flexible cards. Fixed dimensions are still useful when a dimension is intentionally stable, such as an icon or avatar. Problems appear when fixed sizes are used to avoid deciding how content should behave.
Responsive behaviour comes from combining these rules across nested frames, then stress-testing real extremes. Wrapping can rearrange peer items, while minimum and maximum dimensions prevent a card from becoming unusably narrow or a reading column from becoming excessively wide. Responsive work is complete only when longer labels, missing icons, changing item counts, and narrow screens have all been observed.
Figma's current Auto Layout has three flow types: Vertical and Horizontal, which this mission builds with, and Grid — which places children in rows and columns for gallery, bento, or dashboard-style layouts. Grid is a genuine current option, not a beta feature, but it solves a different problem than a single row or stack. Treat it as a tool to reach for later, on a dashboard's card grid, rather than something this sprint teaches in depth.
The container follows its content.
The child accepts available parent space.
The dimension remains intentionally stable.
Peer items move to a new line when space runs out.
A third Auto Layout mode for rows-and-columns layouts — noted here, used later.
Rebuild with Auto Layout, then build a responsive hero and feature system
Follow once, then explain each structural choice.
- 01
Reopen your Mission 1 card row, duplicate it, and resize the duplicate to 320 px — note exactly what breaks without Auto Layout.
- 02
Rebuild the same four cards in a horizontal Auto Layout row: Fill container on each card's width, Hug contents on its height, a defined gap. Compare the 320 px result side by side with the constraint version.
- 03
Build a responsive hero section: a vertical Hug stack for the heading, with descriptive copy set to Fill its column.
- 04
Create a responsive action row with two buttons; allow it to wrap on narrow frames.
- 05
Place four feature cards (icon, title, body, text link) inside a wrapping Auto Layout row with consistent gaps.
- 06
Add an alert banner with an optional icon and flexible message area.
- 07
Test every section at 1,440, 1,024, 768, 390, and 320 px before polishing.
Cloud Recovery Operations Platform
Build this fictional SaaS project in your own Figma file. No proprietary source file or private embed is required.
Framewise doesn’t yet have a duplicable starter file or a completed reference outcome for this mission — that’s on the roadmap, not something we’re pretending exists. The link below opens a genuinely blank Figma file, not a prepared course file.
Create a new Figma file ↗Try to break the build
A layout is not responsive until real variation tries to break it.
Use one-line and four-line headings.
Switch between three, four, and five cards.
Remove the icon from the alert.
Use a 44-character button label.
Build without the guide
Remove tutorial dependence and work from the outcome.
Rebuild a pricing or feature card from memory. It must survive a narrow column and a paragraph twice the original length.
Check your understanding
Five fast retrieval rounds. Land 80% to clear the checkpoint.
Pass criteria
Self-certify observable results, not effort.
Lock in the learning
Write two short answers in your own notes.
- 01
Which fixed dimension was actually unnecessary?
- 02
What broke first: content, hierarchy, or sizing rules?
Ready to claim the reward?
Score 80% in the mission quiz and check off all 6 build criteria to claim the reward.