Your mission objective
Know what “cleared” looks like before opening Figma.
By the end, you can…
- Explain variables versus styles.
- Build primitive and semantic collections, and use scopes to keep pickers honest.
- Apply colour, spacing, and radius tokens to components.
- Explain what a mode is and where publishing a library matters.
Bring with you
- Day 3 component set
- Consistent naming habits
Decode the system
Understand the production logic before following steps.
A variable stores a reusable value; a semantic token describes why that value is used. `colour/blue/600` is a primitive. `action/primary` is intent. When the semantic variable aliases the primitive, the interface can change at the foundation without rewriting every component.
Separate raw scales from application meaning. Primitive collections may contain neutral, blue, red, spacing, and radius scales. Semantic collections translate them into `surface/card`, `text/secondary`, `border/default`, or `status/error`. Components should consume the semantic layer whenever possible so their meaning survives a palette change.
Figma organises variables into collections — up to 5,000 variables each — and each collection can hold multiple modes: extra columns that store alternate values for the same variable so you can switch context (light/dark, density, locale) without duplicating frames. Scopes restrict which properties a variable can be applied to, so `spacing/16` never shows up in a colour picker. Multi-mode collections need an Education or paid seat; creating variables at all does not.
Variables are not styles. A text, effect, or paint style bundles several properties under one reusable name for visual consistency, but it cannot alias to another value, switch per mode, or bind to a component property like corner radius. Use styles for compound visual treatments and variables for single values that need to change contextually.
Tokens do not fix inconsistent design by themselves. Start with a deliberately small scale, name it predictably, and audit hard-coded values. Modes are the mechanism a later dark theme or a denser layout would use — this sprint deliberately defers building one, but a clean semantic layer, correctly scoped, is what makes that later mode coherent instead of a rename exercise. Publishing a collection as a library is what lets other files consume it without copy-pasting.
The raw reusable value: blue/600 or spacing/16.
The role: action/primary or surface/card.
An alternate value for the same variable — a context switch, not a new variable.
Which properties a variable is allowed to bind to.
Tokenise the component library
Follow once, then explain each structural choice.
- 01
Create primitive colour, spacing, and radius collections.
- 02
Add neutral, blue, success, warning, and error primitives.
- 03
Create semantic surface, text, border, action, and status variables in their own collection.
- 04
Scope spacing and radius variables so they only appear where they apply.
- 05
Alias each semantic colour to a primitive.
- 06
Bind button and alert components to semantic variables.
- 07
Replace repeated gaps and padding with spacing variables.
- 08
Change one primitive and audit every downstream consumer.
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 blue/600 to a visibly different blue.
Increase spacing/16 to 20.
Swap surface/card to a neutral tint.
Find one remaining raw colour.
Build without the guide
Remove tutorial dependence and work from the outcome.
Replace every hard-coded colour in the Day 3 components with an appropriate semantic variable, then document any deliberate exception.
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 primitive had too many meanings?
- 02
Which semantic name would remain true after a rebrand?
Ready to claim the reward?
Score 80% in the mission quiz and check off all 5 build criteria to claim the reward.