Unsaved Changes

You have unsaved changes to this preset. How do you want to proceed?

Insert Component

⌘K

Your Design Tokens Are in the Wrong Place

Somewhere on your team, someone opened Figma, picked a color, and typed the hex value directly into a CSS file. You now have 37 hardcoded hex values across 12 files. Some are the same color with different names. None of them update when the design changes.

The failure mode

Design tokens exist in Figma. They don't reach your code. Engineers redeclare them from screenshots, from memory, or from a six-month-old Zeplin export. The design system and the codebase drift apart.

Diagram of a broken token pipeline: Figma variables with no connection to CSS
Tokens defined in Figma with no automated export step. Engineers fill the gap manually.
A token that lives only in Figma isn't a token. It's a note.

The correct chain

Tokens need one source, one export step, and one import step. Define tokens as Figma variables. Export them via a plugin to a style-dictionary-compatible JSON file. style-dictionary transforms that JSON into CSS custom properties. Components consume those properties, not hardcoded values.

{
  "color": {
    "text": {
      "default": { "value": "#414244", "type": "color" },
      "paragraph": { "value": "#576675", "type": "color" }
    }
  }
}

What it looks like in your CSS

:root {
  --color-text-default: #414244;
  --color-text-paragraph: #576675;
}

[data-theme="dark"] {
  --color-text-default: #cfd9e2;
  --color-text-paragraph: #a9bfd6;
}

Components reference var(--color-text-default), never the hex. When the design changes, you update the JSON, run style-dictionary, and every component updates.

The complete pipeline: Figma Variables to JSON to CSS custom properties to components
Every step is automated. No manual copying of hex values.

The chain only works if every part is connected. If your CSS has one hardcoded hex value, the pipeline is broken. Audit them. Delete every hex value that has a token equivalent.