tl;dr
Get Figma variables into code in one direction, through one standard token file.
For tokens that live in Figma and keep drifting from the code. Figma becomes the source, and the code is generated from it.
Why
I built a small Figma plugin that turns Figma variables straight into a token file Style Dictionary can read. It keeps the links between tokens (a role pointing at a raw colour) and exports text styles too. I needed one specific export, JSON that follows the W3C design tokens format and that Style Dictionary reads as it is. So I built it. It’s in the .zip with this drop now. From there Style Dictionary builds the code for each platform, and Storybook shows the result.
For agents the important part is that code only ever sees the semantic layer, the names that say what a value is for.
Example
An illustration of a semantic token in the exported file. It points at a raw colour instead of copying its value, and says where it goes:
"link": {
"$type": "color",
"$value": "{color.blue.600}",
"$description": "Links in body text"
}
How to use it
- Set up two Figma variable collections: primitives for the raw values (blue-600), and semantic tokens that point at them by role (color-text-link), with light and dark modes.
- Export them with the Figma plugin in the .zip. It writes one JSON file and keeps the links between tokens.
- Turn that file into code for each platform with Style Dictionary, an open-source token build tool.
- Check the result in a page that shows every token, such as Storybook, before anyone builds with it.
The drop: Design Token Pipeline
A template or a section of a file
# Token pipeline
## Source
- Tool: Figma variables
- Primitives collection: raw values only (blue-600, space-16), no modes
- Semantic collection: tokens named by role (color-text-link, space-section) that point at primitives; modes for light and dark
- Rule: components and code use semantic tokens only
## Naming
- Pattern: category-role-variant (color-text-muted, space-4, radius-md)
- Every semantic token has a $description: where it goes, in one line
## Export
- Format: one JSON file in the W3C design tokens format (also called DTCG, after the W3C Design Tokens Community Group), which Style Dictionary reads
- Links between tokens stay links ({color.blue.600}), never copied values
- Text styles export as typography tokens
## Build
- Tool: Style Dictionary (open source)
- Outputs: [the platforms you ship to: CSS variables, iOS, Android, React Native]
- One build command; generated files are never edited by hand
## Check
- One page (Storybook or similar) shows every semantic token in both modes
- The automated build fails if the generated files don't match the latest export
## Owner
- The design system designer exports after every change to the variables
- A developer reviews the generated files in a pull request before they mergeThe .zip includes the Figma plugin. Install steps are in figma-plugin/README.md.
When not to use it
If your system has a handful of tokens that rarely change, keep one hand-written token file instead. If tokens are decided in code, not in Figma, don't make Figma the source.