B · ComponentsIntermediate50 min read
8. Variables & modes (design tokens)
Figma · 52 pages source format
Variables replace static styles for tokens that change (light/dark, brand themes). Bind to fills, spacing, and component properties.
What you'll learn
- Variable collections
- Light/dark modes
- Binding to properties
- Spacing variables
Color variables
Collection: Brand. Variables: bg/default, text/primary, brand/accent. Modes: Light, Dark.
Do this now
Create light + dark values for 6 color variables. Apply to login screen.
Clear?
Spacing variables
space/4, space/8, space/16, space/24 bound to Auto Layout padding and gap.
Do this now
Replace hardcoded padding on card with variables.
Clear?
Typography variables (if available)
Bind font size variables to text styles or use string/number variables per team workflow.
Do this now
At minimum: document token table on Cover page mapping name → value.
Clear?