Your mission objective
Know what “cleared” looks like before opening Figma.
By the end, you can…
- Produce a responsive interface under a timebox.
- Score work against measurable, evidence-anchored criteria.
- Identify the lessons that deserve deliberate review.
Bring with you
- Days 1–6
- A fresh Figma page
- Timer and scoring rubric
Decode the system
Understand the production logic before following steps.
The final assessment measures operational independence, not mastery. Work in a fresh page without following lesson steps. You may use your own component and variable libraries, because production work depends on systems. What you should remove is tutorial dependence.
Choose a scope before you start the timer, not partway through. Core (90 minutes) is a complete, smaller system: shell, one responsive section, three reusable components, one data view, one failure state, one mobile transformation, one short recoverable prototype path. Advanced (150 minutes) adds a form, a confirmation modal, more product states, fuller variable application, and a written handoff annotation. Read the full brief for your chosen scope before starting the timer — there is no separate step-by-step walkthrough to follow once you begin.
Score observable evidence rather than intention. If a layout only works at one width, it does not earn responsiveness points. If a colour could change centrally but is hard-coded, it does not earn full variable points. The rubric below uses four anchored levels per category — missing, developing, competent, strong — each with a stated observable test, so scoring is a judgment against evidence, not a guess between two adjacent numbers.
Choose Core or Advanced, then define hierarchy and time allocation.
Create the complete system before polishing.
Test content, widths, and states.
Match evidence to a rubric level — not a feeling.
Complete the independent production brief
No walkthrough to follow here — plan from the brief, then build.
- 01
Choose Core (90 min) or Advanced (150 min) below and read its full requirement list before starting the timer.
- 02
Plan frames, component candidates, and responsive transformations before building anything.
- 03
Build the application shell and one responsive content section.
- 04
Build at least three reusable components and one data representation.
- 05
Create one deliberate empty or error state and one deliberate mobile transformation.
- 06
Connect one short, recoverable prototype path with a cancel or back option.
- 07
Advanced only: add a form, a confirmation modal, additional product states, fuller variable application, and one written handoff annotation.
- 08
Stress-test content and score the result using the anchored rubric below.
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 a long headline and workload name.
Test at 1,440, 768, and 390 px.
Show an error and empty state.
Change one shared variable or main component.
Build without the guide
Remove tutorial dependence and work from the outcome.
This entire lesson is independent. Keep your chosen brief visible, but do not reopen previous lesson steps until the timer ends.
Choose Core or Advanced above to see its full requirement list and start the timer.
Check your understanding
Five fast retrieval rounds. Land 80% to clear the checkpoint.
Pass criteria
Self-certify observable results, not effort.
Production-readiness rubric
For each category, pick the level your build can visibly prove — not the level you intended.
Repeat foundations
Score each category after the timed build.
Lock in the learning
Write two short answers in your own notes.
- 01
Which task consumed more time than expected?
- 02
Which two rubric categories will you practise next?
Ready to claim the reward?
Score 80% in the mission quiz and check off all 5 build criteria to claim the reward.