Play · 1 h 10 min
Design · Design systems in Figma
Variables and design tokens
Lesson 2 of 4 · 1 h 10 min · with Anders Lindqvist
Set up colour, spacing and type as variables that map one to one to code.
Tokens are the shared vocabulary between design and code. If a designer says
surface-muted and a developer writes surface-muted, a whole class of
mistakes disappears.
Two layers
We set up primitive variables (the raw palette) and semantic variables (what each colour is for). Components only ever use the semantic layer.
Modes
Variable modes handle light and dark themes, brands and densities from the same components. We add a second brand to prove it works.