Design Tokens in Practice: Eliminating the Rework Loop Between Figma and Production

In nine out of ten engineering organizations, the handoff between design and engineering remains an unresolved friction point.

The scenario is universal: a product designer spends three weeks perfecting an enterprise design system in Figma. Spacing increments are carefully calibrated, dark-mode color scales are verified for contrast, and typography follows an orderly mathematical scale.

Yet, three sprints after engineering begins implementation, entropy takes over:

• Hex codes are hardcoded ad-hoc inside Tailwind classes (bg-[#1a1b1e] vs bg-[#161719]);
• Spacing values diverge between platforms (an 8px gap in iOS becomes 12px in React);
• Dark theme adjustments require manual, multi-week search-and-replace refactors;
• Designers lose confidence that what they draw in Figma will match what ships in production.

At PROJECT/X (MadeByPX), we do not treat design tokens as passive CSS variables. We treat design tokens as compiled software contracts.

1. The 3-Tier Token Architecture#permalink

The foundational failure of most design token implementations is treating every token as a flat key-value pair. When color-brand: #20808D is referenced directly inside twenty different UI components, rebranding or introducing theme shifts creates catastrophic ripple effects.

A resilient design system organizes tokens into three distinct tiers:

1[Tier 1: Global Primitives]  -> Raw physical values (hex, rem, ms, cubic-bezier)
2         │                       Example: color.cyan.500 = #20808D
3         ▼
4[Tier 2: Semantic Intent]    -> Contextual purpose (roles, states, surfaces)
5         │                       Example: surface.interactive.active = {color.cyan.500}
6         ▼
7[Tier 3: Component Scoped]   -> Specific component bindings
8                                 Example: button.primary.hover.bg = {surface.interactive.active}

Tier 1: Global Primitive Tokens

Global tokens define the raw palette of your universe. They describe what a value is, never where or why it is used.

1{
2  "primitive": {
3    "color": {
4      "hanaasagi": {
5        "100": { "value": "#E0EFF1" },
6        "500": { "value": "#20808D" },
7        "900": { "value": "#0F3D43" }
8      },
9      "neutral": {
10        "0": { "value": "#FFFFFF" },
11        "900": { "value": "#0A0A0C" }
12      }
13    },
14    "space": {
15      "1": { "value": "4px" },
16      "2": { "value": "8px" },
17      "4": { "value": "16px" }
18    }
19  }
20}

Tier 2: Semantic Tokens

Semantic tokens map raw values to intent and interface role. This is where dark mode, high-contrast modes, and brand themes live:

1{
2  "semantic": {
3    "surface": {
4      "canvas": {
5        "value": "{primitive.color.neutral.900}",
6        "description": "Primary application background"
7      },
8      "accent": {
9        "value": "{primitive.color.hanaasagi.500}",
10        "description": "Focal points, active states and indicators"
11      }
12    },
13    "text": {
14      "primary": { "value": "#EDEDED" },
15      "secondary": { "value": "#8E8E93" }
16    }
17  }
18}

Tier 3: Component-Scoped Tokens

Component tokens insulate atomic UI components from broader semantic shifts:

1{
2  "component": {
3    "button": {
4      "primary": {
5        "background": { "value": "{semantic.surface.accent}" },
6        "paddingX": { "value": "{primitive.space.4}" },
7        "radius": { "value": "9999px" }
8      }
9    }
10  }
11}

2. The Bi-Directional Pipeline: Figma Variables to Code#permalink

A design token architecture is only as reliable as its synchronization pipeline. In traditional workflows, tokens are manually copied from Figma inspect panels into code repositories. This manual step guarantees divergence within weeks.

At PROJECT/X, the single source of truth is maintained in versioned JSON repository schemas, synced bidirectionally via the Figma REST API & Variables Plugin:

3. Style Dictionary Transformation Pipeline#permalink

Below is a production-ready configuration illustrating how tokens are parsed into strongly-typed TypeScript declarations and CSS custom properties:

1// build-tokens.ts
2import StyleDictionary from 'style-dictionary'
3
4StyleDictionary.registerTransform({
5  name: 'size/pxToRem',
6  type: 'value',
7  matcher: (prop) => prop.attributes?.category === 'space',
8  transformer: (prop) => `${parseFloat(prop.value) / 16}rem`,
9})
10
11const sd = new StyleDictionary({
12  source: ['tokens/**/*.json'],
13  platforms: {
14    css: {
15      transformGroup: 'css',
16      transforms: ['size/pxToRem'],
17      buildPath: 'src/styles/',
18      files: [
19        {
20          destination: 'tokens.css',
21          format: 'css/variables',
22          options: { outputReferences: true },
23        },
24      ],
25    },
26    ts: {
27      transformGroup: 'js',
28      buildPath: 'src/types/',
29      files: [
30        {
31          destination: 'tokens.d.ts',
32          format: 'typescript/module-declarations',
33        },
34      ],
35    },
36  },
37})
38
39await sd.buildAllPlatforms()

4. The Anti-Drift Contract: Eliminating Hardcoded Values in Code Reviews#permalink

Having design tokens in your repository does not prevent engineers from writing:

1// ANTI-PATTERN: Silent drift occurs through hardcoded arbitrary values
2<div className="p-[18px] bg-[#1a2226] text-[#71a3ab]">

To eliminate drift permanently, our CI pipeline enforces an AST Linter Rule (via custom Oxlint/ESLint rules) that rejects arbitrary style declarations in production branches:

1. 1Zero Raw Hex Colors in Components: Any occurrence of #[0-9a-fA-F]{3,8} in JSX styles triggers a build failure.
2. 2Explicit Semantic Utilities: Engineers must write bg-surface-accent or text-content-secondary.
3. 3Contrast Regression Guard: If a token update reduces body text contrast below 7:1 against its parent surface, CI aborts the merge.

5. Strategic ROI: Why Founders Should Care About Token Systems#permalink

Design tokens are frequently dismissed by non-technical stakeholders as an internal perfectionist habit. This is an expensive misconception.

When you invest in a compiled token architecture:

• Redesigns take hours instead of quarters: Changing brand identity, color themes, or corner radiuses requires editing a single token file, instantly propagating across mobile, web, and marketing surfaces.
• QA cycle time drops by 70%: Visual regression testing shifts from manual eyeball checks on 50 screens to automated unit tests on token mappings.
• Acquisitions and White-Labeling become trivial: Deploying dedicated brand themes for enterprise clients is reduced to providing an alternative Tier-2 token payload.

A product with disciplined design tokens feels solid, cohesive, and intentional. It signals to your users—and your investors—that the software was crafted by engineers who respect precision.