90 or 150 minute timebox
Figma production-readiness assessment
Build a complete responsive interface without a tutorial, at whichever scope fits your time, then score visible evidence against an anchored rubric.
Your brief
Choose a scope before you start the timer — this page and Mission 7 share the exact same brief and rubric, so it doesn’t matter which one you use.
Core — 90 min
- An application shell with stable navigation.
- One fully responsive content section (desktop, tablet, mobile).
- Three reusable components, each with at least one variant.
- One data representation (table, list, or card set) bound to real content.
- One deliberate empty or error state.
- One deliberate, non-scaled mobile transformation.
- One short prototype path with a working cancel or back option.
Advanced — 150 min
- Everything in Core, within the longer timebox.
- A form with real, visible field labels and at least one validation error state.
- A confirmation modal with correct focus and Escape behaviour.
- Additional product states beyond the Core minimum (loading plus at least one more).
- Variables applied across the full build, not just the headline component.
- One written developer-handoff annotation covering intent, tokens, and behaviour Dev Mode inspection alone would not show.
This is the same 100-point rubric used at the end of Mission 7 — the canonical brief and scoring live on this page; Mission 7 walks you through the timer, quiz, and XP reward around it. Open Mission 7→
Open printable scoring sheetScore
Production-readiness rubric
For each category, pick the level your build can visibly prove — not the level you intended.
Total score0/100
Repeat foundations
Score each category after the timed build.