The Single Source of Truth: Design to Code
SE01EP06 — If a value changes in your design file, how long before it's live in production? If you can't answer in seconds — you don't have a single source of truth.
Here is a question I want you to answer before reading further.
If a value changes in your design file — how long before that change is live in production?
A day? A week? A sprint cycle? A conversation with three people, a Jira ticket, a PR review, a merge conflict, and a prayer?
I have watched leadership in multiple organizations answer this question by purchasing Figma's dev mode and declaring the handoff problem solved. One tool. One decision. The gap between design and engineering closed by a product update and an announcement in a company all-hands.
Figma dev mode is a useful tool. It is not a pipeline. And a tool that surfaces design decisions is not the same thing as an architecture that delivers them reliably into production without a human remembering to act on what they saw.
If you cannot answer the opening question in seconds — you do not have a single source of truth.
You have a distributed system of hope. With a Figma subscription.
The Gap Nobody Talks About
Design lives in one tool. Engineering lives in another. Between them — there is a gap. A gap that every team fills differently.
Some fill it with Slack messages. Some with redlines. Some with a shared document that nobody updates after month two.
The shared document is particularly optimistic. It is created with genuine intention. It is abandoned with genuine relief.
All of them fill it with humans. And humans are not a pipeline.
The single source of truth is not a file. It is a pipeline. And a pipeline only works when no human has to remember to run it.
What Happens Without the Pipeline
A designer updates a color in the design file. The change is correct. The change is intentional. The designer exports the new token values. Sends them to the engineering lead. Via Slack.
Via Slack.
The engineering lead receives them three days later — because the message was buried under forty-seven other messages.
- The engineer updates the codebase, creates a PR.
- The PR sits in review for a week.
- The review surfaces a conflict.
- The conflict requires a meeting.
- The meeting requires three people, one of whom is on vacation.
By the time the change is live in production — it has been three weeks. The designer has already made two more changes. None of which the engineering team knows about.
This is not a communication problem. This is an architecture problem.
Design and engineering had different definitions of what "the source of truth" meant. For designers — the design file was authoritative. For engineers — the codebase was authoritative. Both were right. Neither was the authority.
When there is no defined authority — every disagreement becomes a negotiation. And negotiations take time. And time is the thing design systems never have enough of.
The Four-Stage Automated Pipeline
The fix is not better communication. The fix is removing the human from between the tools.
Stage 1 — Token Studio as the Design Source
Token Studio lives inside Figma. Designers work inside Figma. Token Studio captures every decision they make as structured token data — not a screenshot, not an export, but structured data a machine can read and act on.
Stage 2 — GitHub as the Shared Repository
Token Studio pushes token changes directly to a GitHub repository. Not via Slack. Not via email. Via Git — where every change is versioned, attributed, and reversible.
Version control is not glamorous. It is the difference between "I know exactly what changed and when" and "I think someone updated something last Thursday."
This is where the single source of truth actually lives. Not in the design file. Not in the codebase. In the repository that both sides read from.
Stage 3 — Style Dictionary as the Transformer
Style Dictionary reads the token data from the repository and transforms it into platform-specific outputs. CSS custom properties for web. Swift variables for iOS. Kotlin constants for Android. One source. Multiple outputs. Every platform receiving the same values simultaneously.
Stage 4 — GitHub Actions as the Automation
GitHub Actions watches the repository. When token data changes — GitHub Actions triggers Style Dictionary automatically. No human required. No Slack message. No PR waiting for review.
From design decision to production-ready code — without a single person having to remember to do anything.
I have seen this pipeline fail once in a way that had nothing to do with the technology. The organization understood the concept. They had the platform. They restricted access to control the budget — a few seats, enough to demonstrate the approach, not enough to run it across the team. The pipeline existed. It couldn't scale because someone made a license decision based on cost before they understood what access the pipeline actually required to work.
The tool was not the problem. The access model was. And an automated pipeline that only some people can trigger is not an automated pipeline. It is a manual process with extra steps and a more expensive invoice.
What the Pipeline Actually Gives You
Not speed. Not efficiency. Trust.
When designers know their decisions will reach production accurately — they stop second-guessing whether the engineers got the message. When engineers know the tokens are always current — they stop maintaining their own variables as a backup. When both sides trust the pipeline — they stop arguing about which version is correct. Because there is only one version. And it runs automatically.
The Quick Win: Map Your Current Handoff
Draw your current design-to-code handoff process. Every step. Every person. Every tool. Every place where a human has to remember to do something.
Each one of those is a drift point.
Then ask:
"Which of these steps could a machine do instead?"
Start with the easiest one. Automate that. Then the next. The pipeline doesn't have to be perfect on day one. It has to be more reliable than memory.
The Argument
A single source of truth is not a file you point to. It is a pipeline that runs without you. Season 1 has been about building the foundation that makes everything else possible. Season 2 is about what happens when you treat that foundation like a product.
Disagree loudly. Inspire boldly.
And remind me — falsely if needed — that somewhere a token change in Figma reached production without a single Slack message.
How does a token change in your design file reach production right now?
Comments ()