Building a Production-Ready Design System with Tailwind CSS v4 and Figma Variables

Design systems live or die by one thing: consistency between what's designed and what's shipped. After years of watching Figma mockups drift from codebases, we became obsessed with closing that gap permanently.

On the Halcyon project, we built a 220-component design system from scratch in 14 weeks — and by launch day, the Figma file and the live product were pixel-for-pixel identical.

The Problem with Traditional Handoffs

The classic workflow: designer makes a decision in Figma → exports specs → developer interprets → drift begins. Every subsequent design iteration requires another manual sync, and the gap widens with every sprint.

The only way to eliminate drift is to make the design file and the codebase share the same source of truth — not just reference each other.

Step 1: Figma Variables as Primitive Tokens

Figma's Variables feature is the missing link. Instead of hardcoding colors and spacing, you define named variables — and those variables become the single source of truth.

// Primitive tokens
        color/navy/base     → #0a192f
        color/navy/light    → #112240
        color/primary/base  → oklch(79.5% 0.184 86.047)

        // Semantic tokens (reference primitives)
        color/bg/surface    → {color/navy/light}
        color/text/default  → {color/slate/lighter}
        color/accent        → {color/primary/base}

Step 2: Exporting to Tailwind v4 @theme

With Tailwind CSS v4, design tokens live in CSS — not a JS config file. We wrote a Node.js script that reads Figma's Variables JSON export and auto-generates the @theme block:

@theme {
        /* Auto-generated from Figma Variables */
        --color-primary:       oklch(79.5% 0.184 86.047);
        --color-navy:          #0a192f;
        --color-navy-light:    #112240;
        --color-slate-lighter: #ccd6f6;
        }

Step 3: The Sync Workflow

1. Designer updates a variable value in Figma
2. Pushes to a shared Figma library
3. Developer runs npm run sync-tokens
4. Script fetches via Figma API → regenerates @theme block
5. Tailwind rebuilds CSS — zero manual edits

Results

• Zero design-to-dev drift at launch
• Design iteration time cut ~60%
• New engineers onboarded in under 2 hours
• 98 Lighthouse score maintained

The full sync script and Figma token template are available on GitHub. Questions? Drop a comment or reach out directly.