Claude Code can now write directly to the Figma canvas through Figma MCP. You describe an interface in natural language; it builds it. Visually, the result can be pixel-perfect. But click into any layer and you'll find #5C6AC4 where color/brand/primary should be, 14 where text/body-sm is defined, a freshly minted one-off component where an existing Button instance is sitting right there in the library.
Design tokens are all your design decisions, that define a design system's aesthetic properties, everything from colors and font sizes to spacing units and border radii. They are the modern evolution of hard-coded values. They are stored in a central, platform-agnostic repository, establishing a single source of truth for your entire digital product suite. This central management allows teams to consume the exact same design values across all platforms (web, native apps, documentation).
This article shows a practical pattern for generating utility classes in CSS I've used in one form or another since 2016. Utility classes can give us a fast, consistent way to apply design system values in markup, without sprinkling hard‑coded styles across your project. As I discussed in my article on Creating Design System Friendly Snowflakes with Utility Classes, utility classes can really help offer a middle ground between rigid components and completely custom CSS.
The course digs into everything that goes into creating design token systems and themeable user interfaces to help Multi All-The-Things organizations meet the multifarious needs of their digital products. Design tokens may be the latest incarnation, but software creators have been creating themeable user interfaces for quite a long time! As with all things, we can study history to learn from our past to inform our future. So let's dig in!
