Your path from canvas
to Design Operator.
Complete the connected build, collect up to 700 mission XP plus 280 in mission-quiz bonuses, and prove each skill with visible evidence—not passive watch time. Every mission is open now; nothing is gated behind XP.
Launch Mission 01 →Read this once,
before Mission 01.
Orientation only — it isn’t one of the seven missions, so reading it never changes your completion count.
Who this is for
Visual and graphic designers who already understand composition, hierarchy, and colour, and want production-ready Figma skills — not a first introduction to design.
What you need
A free Figma account and the Figma desktop app or a modern browser. No paid seat is required to complete the seven missions.
Finding your way around a file
Pages separate workstreams, sections label journeys, frames are responsive containers, and layers are named content. Mission 1 teaches this in depth — this is just so the vocabulary isn’t a surprise.
How XP and completion work
Each mission is worth 100 XP, claimed once you score 80%+ on its quiz and check off every pass criterion. The quiz itself also earns bonus XP based on your best score (up to 280 total across all seven — the checklist is a completion gate, not a separate XP source). The homepage quick quest adds 25 XP once. Maximum possible: 1005 XP.
Your progress, your device
Everything saves to this browser only, under one storage key. Export it as a file, import it on another device, or reset it — all from the panel below.
The final project
All seven missions build one fictional product, the Cloud Recovery Operations Platform — enterprise-shaped, but entirely made up. No real customer data or proprietary designs are involved.
Starter files and references
Framewise doesn’t yet provide a duplicable starter file for every mission. Where one isn’t linked, create a new blank Figma file and follow the build steps from there — the steps are written to work from a blank canvas.
Pick your pace
The curriculum doesn’t change — only your own pacing expectation does. Switch any time.
Build the complete
production skill tree.
Every mission contains an objective, field notes, guided construction, stress test, independent challenge, mission quiz, and completion criteria.
- 01+100 XP · 2 hr 30 min · Foundation→
Figma Foundations for Experienced Visual Designers
Translate your existing visual-design instincts into Figma’s container-based production model.
- Navigate pages, sections, frames, and layers with intent.
- Explain why frames are layout containers rather than passive artboards.
- 02+100 XP · 3 hr 10 min · Foundation→
Auto Layout and Responsive Behaviour
Use Hug, Fill, wrapping, nesting, and min/max dimensions to build resilient layouts.
- Choose Fixed, Hug, and Fill deliberately.
- Build nested responsive sections.
- 03+100 XP · 3 hr · Core system→
Components, Variants and Component Properties
Build reusable UI without detachment, duplicated screens, or variant explosion.
- Distinguish main components from instances.
- Model state and size with variants.
- 04+100 XP · 2 hr 45 min · System thinking→
Variables and Practical Design Tokens
Connect primitive values to semantic intent and remove brittle hard-coded decisions.
- Explain variables versus styles.
- Build primitive and semantic collections, and use scopes to keep pickers honest.
- 05+100 XP · 4 hr · Applied build→
Build a Responsive Enterprise SaaS Dashboard
Assemble a real product screen from the systems you built and design meaningful failure states.
- Assemble an application shell from components.
- Transform tabular data for mobile without losing accessible structure.
- 06+100 XP · 3 hr 20 min · Workflow→
Prototyping, Interactive Components and Dev Handoff
Connect screens into a recoverable workflow and communicate intent to development.
- Build navigation, overlays, and back paths.
- Use interactive component variants.
- 07+100 XP · 90 or 150 min · Independent→
Independent Figma Production Assessment
Build without a tutorial, score observable outcomes, and create a precise next-step plan.
- Produce a responsive interface under a timebox.
- Score work against measurable, evidence-anchored criteria.
Find your level.
Track your run.
Your campaign progress lives on this device. No sign-up, leaderboard pressure, or artificial streak loss.
Start where the mechanics become useful.
Eight focused questions identify whether to begin with foundations, Auto Layout, or a components review. It never skips the final assessment.
Campaign progress
0 of 7 missions cleared. No account required—your run stays in this browser unless you export it.
- Mission XP
- 0
- Quiz bonus XP
- 0
- Quick-quest XP
- 0
- Total XP
- 0 / 1005
- XP to next level
- 200 XP
- 1Mission 01FoundationsRecommended
- 2Mission 02Auto LayoutAvailable
- 3Mission 03ComponentsAvailable
- 4Mission 04VariablesAvailable
- 5Mission 05DashboardAvailable
- 6Mission 06Prototype & handoffAvailable
- 7Mission 07Final assessmentAvailable