Design Tokens Sync Pipeline - Case Study
00Design System / Tooling

Design tokens sync pipeline

Getting tokens out of Figma usually means typing values by hand, or paying for a plugin like Tokens Studio to do the export. This is a personal proof of concept for a pipeline that gets the same result without either, tested against a real, production-scale token library, and the four wrong turns it took to get there.

Manual steps removed
7 to 2
Tokens synced
304
Blockers resolved
4
New tooling cost
None, existing tools only
01The starting point

Every token, re-typed by hand

This started as a personal question, not a client request: could a Figma-to-codebase token pipeline run without an Enterprise Figma plan and without paying for a plugin subscription, and would it hold up against a real, sizeable token library rather than a toy example. Without one of those two paid routes, colour, spacing, and type values move from Figma into code the plain way: someone reads the value in Figma and types it into CSS. That's how drift happens. The file says one hex, the code says another, and nobody notices until a screenshot comparison catches it.

The brief was simple to state: when a token changes in Figma, engineering should see it without anyone copying a value by hand.

02Three paths, one already broken

What was actually available

Three options got evaluated properly, not just discussed. One had already been running, unreliably, before this started.

Supernova sync
Already in use, unreliable
Component sync had a server-side fault losing roughly 13% of components mid-session. Token sync itself, once checked against source, was accurate.
Tokens Studio + Style Dictionary
Not attempted, recurring cost
The direct alternative: Tokens Studio's Figma plugin handles the export, then Style Dictionary compiles it into code. It works, but the tier that supports this scale of token library is a paid subscription. Avoiding that recurring cost was the actual point of building the pipeline below.
Figma REST API, direct
Blocked
The cleanest path on paper: Figma's own API, no middle layer. The Variables endpoint is gated to Enterprise-plan Figma accounts. Confirmed by generating an access token: no variables scope existed in the list at all.

Before trusting Supernova's token export enough to build on it, a parallel check: Figma's Dev Mode MCP reaches Variables directly from the desktop app, the same data the Enterprise-gated REST API would return, without needing that plan. A handful of already-synced values, Primary/Base, space-5, radius-button, Shadow/Lrg, checked against that source, matched exactly.

That match is what justified building on Supernova's token data rather than hand-assembling values from scattered Dev Mode queries, or trusting an export that had just lost 13% of components mid-session. The pipeline itself never touches MCP; it's a build-time verification step, not a runtime one. But it's the reason the rest of this exists at all rather than a different, slower approach.

The REST path closing off was the turning point. It forced a second look at a Supernova feature already sitting unused: Export Pipelines.

03The mechanism

Two manual checkpoints, by design

Designer edits + publishes update Figma Library 304 variables publish Supernova source updated automatic GitHub PR tokens/*.css review + merge (manual)
manual step, a person acts
automatic, unattended
Two checkpoints stay manual on purpose: publishing the Figma library, since unpublished changes are invisible to any external reader, and merging the pull request, a review gate rather than a limitation. Everything between them runs without anyone touching it.
04Four blockers, in order

What actually went wrong

1
Figma's Variables API needed an Enterprise planblocked
Generating a personal access token showed no variables-read scope anywhere in the list, confirming the endpoint the direct-fetch approach depended on wasn't available on this plan. That path was abandoned rather than debugged further.
2
Supernova's free plan allows one pipelineresolved
The single available slot was already spent on an unused export from an earlier experiment. Replacing it cost nothing, since nothing else depended on it.
3
The GitHub App had no access to the target repositoryresolved
Supernova's GitHub App was installed but scoped to a fixed list of repositories, and the new one wasn't on it. Added under the app's own installation settings on GitHub.
4
The trigger looked brokenresolved
Four reimports in a row reported zero tokens updated and fired nothing, first on a no-op resync, then on a description-only edit, then on what should have been a real value change. Figma Team Library changes stay invisible to every external reader, including Figma's own API, until published from the Assets panel. The next attempt, after publishing, produced a genuine pipeline run.
05Verified, not assumed

Checked against a real run

Every step above was tested against an actual pipeline execution, including the runs that did nothing, since those were what confirmed the publish requirement.

02:04
Pipeline created, first build
run 6246644, PR #1 opened
02:06
Reimport, no Figma change
0 tokens updated
02:30
Reimport, description edited
0 tokens updated
02:35
Reimport, value edited, unpublished
0 tokens updated
02:44
Reimport, value published
run 6246667, PR #1 updated
06Stack
Figma Variables Figma Dev Mode MCP Supernova, Design Tokens Supernova, Export Pipelines GitHub App + Pull Requests Style Dictionary, local fallback build