Your mission objective
Know what “cleared” looks like before opening Figma.
By the end, you can…
- Navigate pages, sections, frames, and layers with intent.
- Explain why frames are layout containers rather than passive artboards.
- Build a named, structured navigation and summary-card system.
Bring with you
- Visual hierarchy and layout fundamentals
- A free Figma account
Decode the system
Understand the production logic before following steps.
Figma feels familiar to anyone coming from Illustrator, Photoshop, or InDesign, but the resemblance can be misleading. A production Figma file is less like a stack of positioned artwork and more like a small layout system. Frames own dimensions, clipping, and constraint behaviour. Their children respond to those rules. Groups merely collect layers; they do not provide the same responsive contract.
Organise the file from broad to specific: pages separate workstreams, sections label meaningful journeys, frames represent screens or components, and layers describe content. Naming matters because the layer panel becomes a shared map for teammates and developers. A name such as `Summary card / Protected workloads` communicates intent; `Frame 42` transfers the interpretation cost to everyone else.
Constraints describe how a child behaves when a fixed-size parent changes: pin it to an edge, let it scale proportionally, or stretch it to fill the available width or height. They are precise for one deliberate relationship — a pinned logo, a stretched divider — but they get tedious fast once you have a repeating row of cards or content whose length varies. That tedium is exactly the problem Auto Layout solves, and it is the subject of Mission 2.
A container with real dimensions, clipping, and constraint behaviour.
A convenience wrapper with no layout or clipping contract of its own.
A rule for how a child behaves when its parent frame resizes.
The shared vocabulary a team reads instead of `Frame 42`.
Build the Cloud Recovery dashboard header
Follow once, then explain each structural choice.
- 01
Create a page named `01 · Foundations` and a section named `Dashboard overview`.
- 02
Add a 1,200 px frame named `Dashboard / Overview` — this is your responsive container, not just a canvas boundary.
- 03
Build a horizontal top navigation: a logo region, a row of navigation links, and one primary action, each a clearly named layer.
- 04
Set the navigation bar's constraints to pin top and stretch left-and-right as the frame resizes.
- 05
Create a summary-card frame with a label, value, trend note, and status, positioned with fixed spacing inside the card.
- 06
Group the card's status icon and its label so they move together, then compare that grouping to putting the same pair in a frame instead.
- 07
Duplicate the summary card into a row of four with fixed gaps between them, then resize the parent frame and watch what stays pinned, what scales, and what overlaps or falls off — constraints only go so far, and that limit is the point.
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.
Change a user or workload name to four lines.
Remove the status note from one card.
Change the action label to “Schedule protected workload recovery”.
Resize the profile card from 480 px to 280 px.
Build without the guide
Remove tutorial dependence and work from the outcome.
Create a profile card with avatar, name, role, status, and one action, positioned with constraints only. Close this lesson while building. Reopen it only after the timer ends and compare the hierarchy, resizing, and names.
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 layer rule surprised you when the frame narrowed?
- 02
What would a developer misunderstand in your current layer tree?
Ready to claim the reward?
Score 80% in the mission quiz and check off all 5 build criteria to claim the reward.