By Mehdi HassanHow do you sync Figma variables with your codebase?
You sync Figma variables with code by exporting them as structured token data, storing that data in your repository, and generating CSS from it with a build step. Figma stays where designers edit values. The repo becomes where those values are reviewed, versioned and shipped. Nobody copies hex codes by hand.
Most design agency content stops at the Figma side. This walkthrough covers the developer side too, because that's where pipelines break. It assumes you already have a two-layer variable setup of primitives and semantic tokens, as described in our guide to Figma variables, and it sits inside the wider design systems for startups guide.
Stage | Lives in | Example |
|---|---|---|
Variables | Figma library file | color/text/muted, aliased to gray/500 in Light |
Token JSON | tokens/ folder in your repo | A nested object with a value and type for each token |
Build step | Style Dictionary config, run in CI | Turns JSON into CSS, plus TS types if you want them |
CSS variables | Generated tokens.css | --color-text-muted defined per theme |
Tailwind theme | Your main CSS file | text-muted, bg-surface, border-default utilities |
Which tools export Figma variables as design tokens?
Three routes export Figma variables as tokens: a plugin, Figma's REST API, or a manual sync using code syntax. The right one depends on your Figma plan and how often tokens change. Figma has also been adding native token import and export, so check what your plan supports before installing anything.
Route | How it works | Best for | Trade-off |
|---|---|---|---|
Tokens Studio plugin | Stores tokens in JSON, syncs to GitHub or GitLab, can push to variables | Teams that want Git sync without writing scripts | Another tool to learn; its format has its own conventions |
Variables export plugins | Export a collection to JSON on demand | Occasional exports, small systems | Manual step, easy to forget |
Figma Variables REST API | A script reads variables and writes JSON | Full automation in CI | API access depends on your plan, so check current docs |
Code syntax plus Dev Mode | Developers read token names from Figma and update CSS by hand | Very small teams with one owner | No automation, relies on discipline |
Whatever you export, aim for the W3C Design Tokens Community Group format, where each token has a value and a type. Style Dictionary and most token tools read it, so you're not locked into one plugin. The Figma docs on variables explain what each variable type can hold.
How do you build a Figma variables to code pipeline step by step?
Build the pipeline in six steps, testing each before adding the next. The goal is that a designer changes a value in Figma and an engineer sees a small, readable diff in a pull request.
Freeze names and set code syntax
Before exporting anything, make sure every Figma variable uses lowercase slash names that map to code, and set the Web code syntax on each one. Renaming after the pipeline exists breaks every reference downstream.
Export tokens to a tokens folder
Export primitives and semantic collections as separate JSON files, with one file per mode for semantic tokens (light.json and dark.json). Keep aliases as references to primitives rather than resolved hex values, so the CSS can stay layered.
Commit the JSON and protect it
Put the files under version control. Changes come in as pull requests, from a plugin's Git sync or a scheduled script, and an engineer reviews them like any code change. This is where you catch a designer accidentally deleting a token that dozens of components use.
Transform with Style Dictionary
Configure Style Dictionary to read the JSON and output CSS custom properties: primitives on the root selector, light semantic tokens on the root too, and dark tokens under a data-theme dark selector. Keep references in the output so semantic variables point at primitive variables.
Map the variables into Tailwind
In Tailwind v4, declare your semantic tokens in the theme block of your main CSS file, using the color, spacing, radius and font namespaces, with values that reference the generated variables. Utilities like bg-surface and text-muted then resolve to whichever theme is active.
Run it in CI and block drift
Run the transform as part of the build and fail it if the generated CSS doesn't match what's committed. Add a lint rule or review checklist that rejects raw hex values in components.
How should design tokens map to Tailwind v4?
Design tokens map to Tailwind v4 through CSS variables, because Tailwind v4 is configured in CSS rather than a JavaScript config file. Your primitives and themed semantic tokens are plain CSS custom properties. Tailwind's theme then exposes the semantic ones as utilities.
The important rule is to expose semantic tokens to Tailwind, not primitives. If engineers can write bg-blue-600 in a component, they will, and dark mode breaks. If the only color utilities are bg-surface, bg-canvas, text-default, text-muted and border-default, every component is themeable by construction. Our brand colors and typography as tokens guide covers how brand values feed this layer.
- Colors: semantic color tokens become the color namespace, so bg-surface and text-muted exist and stock palette colors can be removed.
- Spacing: keep one base spacing value and a scale, matching the space variables in Figma step for step.
- Radius and shadows: a small named set (sm, md, lg) is enough for most products.
- Typography: font families and the text size scale, each size paired with a line height.
- Dark mode: a custom dark variant tied to the same data-theme attribute your generated CSS uses.
What the generated CSS looks like, in words
Picture one generated file in three blocks. The first block, on the root selector, lists primitives: --gray-50, --gray-500, --blue-600 and so on, each a raw value. The second block, also on the root selector, lists light semantic tokens, each pointing at a primitive: --color-bg-surface uses var(--gray-50), and --color-text-muted uses var(--gray-500).
The third block sits under a data-theme dark selector and redefines only the semantic tokens: --color-bg-surface now uses var(--gray-900). Tailwind's theme points bg-surface at var(--color-bg-surface). Flip the attribute on the html element and every utility in the app switches theme without a rebuild.
Do you need Style Dictionary, or can you sync by hand?
You can sync by hand if your system is small and one person owns it. Style Dictionary earns its place when tokens change often, when you ship to more than one platform (web plus iOS or Android), or when several designers edit the library.
Pros
- Every token change is a reviewable diff in Git
- One source generates CSS, TypeScript types and native platform files
- No more mismatched hex codes between Figma and production
- Rebrands become a token update, not a find-and-replace
Cons
- Setup takes a developer real time to get right
- Plugin and API formats differ, so expect some transform config
- Designers need to understand that renaming a variable is a breaking change
- Overkill for a two-person team with a handful of tokens
For a small team, a middle path works: code syntax on every variable, a single tokens.css file maintained by hand, and a monthly check in design QA that compares Figma and production values.
How do tokens connect to components and AI tools?
Tokens are the first layer. Components are the second, and tools now exist to link Figma components to the real code ones. Figma Code Connect shows your actual component code in Dev Mode instead of generated CSS, and the Figma MCP and AI design-to-code tools produce far better output when your variables are named like your code.
AI code generation reads variable names from Figma. A file with color/text/muted gives it a token to reference. A file full of raw hex values gives it hex values, and you're back to drift. Clean tokens are what make the rest of the Figma to Next.js workflow fast.
Who should own the token pipeline?
One person should own the token pipeline end to end, and ideally they understand both Figma and CSS. When design owns Figma and engineering owns the build step separately, renames and new tokens fall into the gap between them.
That gap is why we work as one team: the person who names a variable in Figma is often the one who writes the CSS it becomes. If you want the Figma side done properly before you build the pipeline, our brand and design sprint is $3,000, fixed, and delivers the brand and design direction as Figma files. Details are on our pricing.
