A step by step workflow for building a design token pipeline from Figma to code. Built for designers who want their design systems to actually work with developer workflows, not just live and die in Figma.
<aside> 💡
Why this matters
When your Figma tokens sync to code, you become the single source of truth. Developers install your design system like any other package. You change a color in Figma, sync, and the code updates. No more copying hex codes into Slack.
</aside>
Designers who want to set up a professional design to code token pipeline. You don't need to be technical. This guide explains everything in plain language, including what each tool does and why we use it.
This workflow was built for a real client project (a React Native + Expo app using Gluestack UI), but it works for any tech stack. I'll note where things are client specific vs universal.
Here's the problem: you define colors, spacing, and radius values in Figma. A developer needs those same values in their code. Without a pipeline, they manually copy hex codes from Figma into their codebase. Things get out of sync. Someone uses the wrong shade of red. Nobody has a single source of truth.
Here's the solution: a pipeline that automatically translates your Figma tokens into code ready formats.
You design in Figma
↓ (automatic)
Tokens get pulled into a project
↓ (automatic)
Style Dictionary translates them into CSS, JavaScript, JSON
↓ (automatic)
Storybook displays them visually with usage guidelines
↓ (automatic)
Developers install and use them directly
The result: you change a value in Figma, run one sync, and everything updates. The code files, the visual documentation, the changelog. The developer runs one update command and has your latest tokens.
Before we dive in, here are the terms you'll see throughout. Reference this if something's unclear.
| term | what it means |
|---|---|
| design tokens | Named values for colors, spacing, typography, etc. Instead of "#E84C44", you use "color.primary.500". Same value, but with meaning attached. |
| Figma variables | Figma's built in feature for design tokens. Define them once, use everywhere. This is your single source of truth. |
| Figma MCP | Model Context Protocol. The free technology that lets Claude read your Figma file directly. No plugins needed, no paid subscriptions. |
| Style Dictionary | An open source tool (by Amazon) that transforms tokens from one format to many. Give it JSON, get CSS + JavaScript + anything else. |
| Storybook | A visual documentation tool. Shows your tokens as actual color swatches, spacing bars, etc. Not code. Anyone with the URL can browse it. |
| npm | Node Package Manager. How developers install code packages. Publishing your tokens here means devs install them with one command. |
| terminal | The app where you type text commands. On Mac it's called "Terminal". On Windows it's "PowerShell". |