The W3C Design Tokens Community Group defines a token as "information associated with a human readable name, at minimum a name/value pair" (Design Tokens Format Module 2025.10).
What a token looks like
In a token file, a token has a name, a value and usually a type:
{
"bg": {
"accent": { "$type": "color", "$value": "{color.blue.500}" }
}
}The same decision then appears in code as --bg-accent in CSS or BgAccent in TypeScript, and in Figma as the variable bg/accent.
Why tokens matter
A token replaces a copied value with a shared name. When a hex code is pasted into a stylesheet, nothing connects it to the design anymore. When the stylesheet uses var(--bg-accent), a change to the token reaches every place that uses it.
A token can also point at another token. That's an alias: bg.accent above refers to color.blue.500 instead of repeating its value. Aliases are how a system separates the raw palette from the decisions built on it (see primitive and semantic tokens).
Tokens and Figma variables
Figma Variables are the closest thing Figma has to tokens: a named value with modes. They become tokens in code once they are exported, for example to a DTCG file, and delivered to the repository. Our guide covers that path step by step: design tokens from Figma to code.