Building a Design-to-Code Pipeline That Doesn't Drift
Six months after a fintech client's product launched, we did a routine audit and found their Figma file and the live production site had diverged substantially — spacing values, button states, and even a few component variants existed in one place but not the other. Neither the design team nor engineering fully trusted the Figma file as source of truth anymore, which meant every new feature started with someone manually reconciling the two before work could begin.
The root cause wasn't sloppiness, it was that design tokens lived in two disconnected places: hand-maintained Figma styles and a separate hardcoded Tailwind config that engineers updated independently whenever a design changed. We consolidated to a single source using Tokens Studio for Figma, which exports design tokens (color, spacing, typography, radius) as JSON, synced via a GitHub Action that opens a PR against the Tailwind config whenever a designer publishes token changes in Figma.
That handled values, but component structure was the harder problem — a designer adding a new button variant in Figma didn't automatically mean engineering knew about it. We set up Code Connect to map production React components back to their Figma counterparts, so anyone inspecting a component in Figma could see the actual code implementation, and PRs that added new component variants included a checklist item requiring the Figma file to be updated in the same PR cycle, not as a follow-up task that inevitably got deprioritized.
We also pushed back on one design team habit that was a recurring source of drift: designing one-off visual treatments for specific pages using base Figma shapes instead of the component library, which looked fine in the design file but had no path to implementation without either a new component or a bespoke, unmaintainable one-off in code. Establishing a rule that anything shipping to production had to be built from library components first — and any new visual need became a proposed library addition, not a one-off — cut this almost entirely.
The pipeline isn't fully automated end to end, and we don't think it should be — human review still catches things a sync script can't, like a token change that's technically valid but breaks contrast ratios. But drift-detection now happens weekly via an automated visual diff between the token JSON and the live site's computed styles, rather than being discovered six months later in an audit.
