Adi Purdila on YouTube · Open on YouTube
Professional practice · Competent · Lesson 33 of 99 · 31 min video, then about 3 hours of practice
Variables, modes and theming
After this you can bind colour, spacing and typography to variables, and switch a whole file between light and dark or across breakpoints from one control.
Why it matters
Variables are how a Figma file stops being drawings and starts being a system that mirrors code. Learn collections, scoping, aliasing (semantic tokens pointing at primitive ones), and modes. The concept that unlocks the rest is aliasing: 'surface/primary' points at 'grey/900' in one mode and 'grey/50' in another, so no screen ever references a raw colour. This maps almost directly onto how front-end code consumes tokens, which is why engineers care. Trap: creating one variable per screen decision, producing a system with no reuse.
How to use this resource
Current UI, careful pacing, and it explains aliasing properly rather than treating variables as renamed styles.