Design Tokens: Bridging Figma and Code Without Constant Drift
Before we adopted a real token pipeline, our design-to-code handoff on a retail client's app was a spreadsheet of hex codes and spacing values that engineering copied into a constants file once, at the start of the project. Six months later, the Figma file had a dozen new shades of the brand blue, added by different designers solving slightly different contrast problems, and the code had a completely separate, smaller set that nobody had updated. Neither side was wrong, they'd just drifted independently.
Tokens fixed this not by preventing drift entirely but by giving both sides a single source of truth to check against. We now define tokens, color, spacing, radius, type scale, as the actual variables in Figma, and export them through a pipeline that generates the equivalent constants or CSS custom properties for the codebase, so a change in one place has one clear path to the other rather than two people independently guessing.
The part that took longest to get right wasn't the export tooling, it was naming. Our first token names were literal, blue-500, which meant that when we needed to change the brand's primary color, every design file still said blue-500 even though the actual color was now teal. We moved to semantic names, color-action-primary, that describe the token's role rather than its current value, so the underlying color can change without every reference becoming a lie.
We also learned to resist over-tokenizing early. On one project we tokenized every single spacing value used anywhere in the file, which produced almost sixty spacing tokens, most used exactly once. That's not a system, that's a spreadsheet with extra steps. We now cap the core spacing scale at eight to ten values and treat any request for a new one as a design review conversation, not an automatic addition.
Even with a solid pipeline, we still run a manual token audit before major releases, comparing what's actually defined in code against what's live in Figma. Automation narrows the gap, it doesn't close it permanently, especially once a team is large enough that not everyone touches the pipeline directly.
