Design Tokens Explained: The Bridge Between Figma and React That Saves Hours

The biggest source of friction between design and engineering is the 'translation layer.' A designer creates a button with the color #3B82F6. The engineer copies that hex code into CSS. Six months later, the brand updates their blue. The designer updates Figma, but the engineer has to manually hunt down every instance of #3B82F6 in the codebase.

This is where Design Tokens come in. They are the DNA of your UI.

What is a Design Token?

A design token is a semantic name given to a raw value. Instead of using the raw hex code (#3B82F6), you assign it to a token named 'color-brand-primary'. Both Figma and the Codebase reference this exact same token name.

The 3 Levels of Tokens

1. Global Tokens: The raw palette. (e.g., blue-500 = #3B82F6)

2. Semantic Tokens: What the color means. (e.g., color-action-primary = blue-500). This is crucial for Dark Mode.

3. Component Tokens: Where it is used. (e.g., button-background-default = color-action-primary).

By using tokens, you can completely rebrand a massive application just by changing a single JSON file. It turns UI updates from a month-long refactoring nightmare into a 5-minute task.