Design Systems in Code: Keeping Figma and the Component Library in Sync
We built a design system for a fintech client with the usual good intentions — a Figma library with defined components, a matching React component library, shared naming. Within two sprints they'd drifted: a designer updated a button's padding in Figma without telling engineering, and engineering added a new button variant in code that never made it back into Figma. Nobody was lying, the process just had no mechanism to catch drift.
The fix was treating design tokens — color, spacing, typography, radius — as the single source of truth, exported from Figma via Tokens Studio as JSON, and consumed by both sides. Our React components read from a generated tokens.ts file rather than hardcoded values, and Figma styles referenced the same token set. When a designer changed a spacing value, it propagated through a build step into both the Figma library and a PR against the component repo, instead of living only in one place until someone noticed.
Components themselves stayed a manual sync, and we didn't try to automate that — Figma Code Connect gets you partway there for documentation purposes, showing the actual code snippet next to the design component, but it doesn't enforce that the two stay behaviorally identical. We handled that with a monthly audit where a designer and engineer walk the component library side by side, which is unglamorous but caught more drift than any tooling did.
The biggest process change was giving engineers write access to a constrained part of the Figma file — specifically the tokens page, not the component layouts — so that when a spacing value needed adjusting for a real layout bug, engineering wasn't blocked waiting on a designer to make a one-line change. That cut token-related back-and-forth roughly in half based on our own ticket tracking.
None of this eliminates drift entirely. What it does is make drift visible fast instead of accumulating silently for months, which is the actual failure mode that breaks design systems on long-running projects.
