Pathwise

Manuals / Figma / Chapter 8

B · Components · intermediate · Week 2 · Chapter 8 of 13

Variables & modes (design tokens)

Variables replace static styles for tokens that change (light/dark, brand themes). Bind to fills, spacing, and component properties.

Path progress
56%

Step 1 of 3

Color variables

Collection: Brand. Variables: bg/default, text/primary, brand/accent. Modes: Light, Dark.

Color variablesDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Color variablesdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Do this now

Create light + dark values for 6 color variables. Apply to login screen.

Was this step clear?
Chapter learning outcomes
  • Variable collections
  • Light/dark modes
  • Binding to properties
  • Spacing variables

Clear these before you leave

Side quest

Theme flip

Toggle mode to dark on all screens. Fix any unbound colors.