We got to talk about variables in Figma—because they’re insanely powerful, and most designers still use them like glorified color styles. In this masterclass, I start with the basics (color, number, string, and boolean variables), then I show you how to actually apply them to real design problems: spacing, padding, gaps, font sizes, even font names. I also cover scoping, so your spacing tokens don’t show up when you’re picking font sizes (this one small thing saves you from so many mistakes when your variable list grows). Then we go into the real juice: modes (light/dark), collections, and how to build a variable system you can reuse across projects. I break down why “one color variable called purple” becomes a disaster once you have multiple components, and how to fix it with a proper multi-layer token setup: brand/primitive → alias → mapped (semantic). I also show my workflow for generating full palettes fast with a Tailwind color generator, mapping everything cleanly, and scoping brand + alias out so you only design with mapped tokens. The goal is simple: switch themes in one click, scale to hundreds of screens, and make your UI responsive—including typography.