Design tokens belong in a build step · Souha Sakly
Souha Sakly
All writing
DESIGN SYSTEMS8 min read · May 2026

Why your design tokens belong in a build step, not a spec

A spec describes intent. A pipeline guarantees it. Here's how moving tokens into the build ended visual drift on a mature enterprise SaaS.

Most teams I've worked with have a design-token "system" that is really a token document — a Figma page, a spreadsheet, a wiki table — that describes the colors, spacing, and radii the product should use. It's accurate the day it's written. Then the product ships a few times, and the document and the code quietly diverge.

On Infor RMS, that divergence had a name in our bug tracker. Every release surfaced a handful of small visual inconsistencies: a spacing value a few pixels off, a blue that wasn't quite the brand blue, a border radius that didn't match the rest of the screen. Designers filed them. Engineers re-implemented the values by hand. The same class of bug came back the next sprint. The handoff itself was the defect.

A spec describes; a pipeline guarantees

The insight that changed our approach was simple: as long as a human re-types a value somewhere between Figma and production, drift is not a question of discipline — it's a question of time. Someone will eventually type #0073ee instead of #0072ed, and no amount of care prevents it at scale.

So we stopped treating tokens as a thing to read and started treating them as a thing to compile. Figma variables became the single source of truth. A build step exported them, transformed them, and published them as versioned CSS custom properties the application consumed directly. No one re-typed a value, because there was no longer a place to re-type it.

Visual consistency stopped being a discipline problem and became a property of the build.

The pipeline, end to end

The flow has four stages, and the important thing about it is that none of them involve a person copying a number:

# 1 · designers own variables in Figma
color/action/default
= #0072ed
# 2 · export + transform (Style Dictionary)
$ style-dictionary build
# 3 · published as versioned CSS custom props
--color-action: #0072ed;
# 4 · components render straight from tokens
✓ figma and prod cannot disagree

Because tokens are versioned, a theme change is now a reviewable, revertible artifact — not a sweep of find-and-replace across the codebase. And because they're consumed as custom properties, runtime theming (light, dark, density) is a matter of swapping a token layer, not re-styling components.

What it unlocked: a dark theme in three months

The pipeline proved its worth under a real deadline. We needed a complete dark theme for RMS — a data-dense enterprise product with a deep component inventory. Historically that's a multi-quarter effort, because every hard-coded color is a landmine.

With tokens flowing from Figma, the work changed shape. I drove the dark theme end-to-end in three months, using Kiro and MCP-connected Figma variables so that every dark-mode value originated in Figma and compiled into production. There was no manual color audit at the end, because there were no hand-typed colors to audit. The theme was, in effect, a new token layer — not a re-skin.

What I'd tell another team

If your tokens live only in a spec, you have documentation, not a system. The leap is to make tokens the input to a build, so that "matching the design" is something the pipeline does, not something a person remembers to do.

  • Make Figma variables the single source of truth — one place a value can change.
  • Put the export and transform in the build, not in a person's hands.
  • Version the output, so theming and rollbacks are reviewable artifacts.
  • Measure success by what disappears — in our case, an entire category of UI bug.
Keep reading
PROCESS
A Definition of Done that designers and engineers both sign
CASE STUDY
Infor Revenue Management System