Design Tokens in Practice: From Figma Variables to Production Code

Here is a scenario that plays out in product teams everywhere. A designer updates the primary button colour — a brand refresh approved weeks ago. The developer opens the codebase and finds that colour hardcoded in fourteen different files across three component libraries. The update takes three days instead of three minutes. A regression ships to production. This is not a development problem. It is a design system problem. And the solution is design tokens.

Design tokens are the foundational layer of any scalable design system. They store every visual decision — colours, typography, spacing, shadows, motion — in a format both designers and developers can consume. When implemented correctly, a token change in one place cascades consistently across every surface, platform, and theme. This guide walks through the complete pipeline: from Figma Variables, to Style Dictionary, to production code.

What Are Design Tokens and Why Do They Matter?

A design token is a named design decision stored as a key-value pair. Instead of hardcoding a hex value, components reference color.brand.primary. That token maps to the actual value in exactly one place — everything else references the name. The W3C Design Tokens Community Group is standardising this format across the industry, meaning the investment you make in token architecture today aligns with an emerging open standard.

Tokens operate in three tiers. Global tokens define raw values — every colour in your palette, every step in your type scale. Alias tokens assign semantic meaning: color.feedback.error references color.red.600. Component tokens apply aliases to specific UI contexts: button.background.primary references color.brand.primary. This three-tier hierarchy gives design systems both flexibility and consistency simultaneously.

Step 1: Token Architecture in Figma Variables

Figma Variables are the native implementation of design tokens inside Figma, supporting four data types: colour, number, string, and boolean. Build your foundation with two collections: Global and Semantic.

The Global Collection: Raw Values Only

The Global collection is your raw palette — every colour your product uses, structured as color/orange/600 and color/neutral/50. Never name global tokens by intent. color/brand/primary is a semantic decision. color/orange/600 is a global definition. Keeping these separate is what allows you to retheme your product by updating one alias rather than hundreds of component references.

The Semantic Collection: Meaning and Modes

The Semantic collection assigns intent to global values. background/surface/default references color/neutral/50. text/brand/primary references color/orange/600. This is the layer that changes when you introduce dark mode or a white-label theme. Figma Variables support modes — your Semantic collection has a Light mode and a Dark mode. Switch a frame’s mode and every component using semantic tokens updates instantly, with no manual overrides or duplicated component libraries. For structure guidance, the Guides to Variables in Figma and Tokens Studio documentation are both essential starting points.

Step 2: Exporting Tokens from Figma

Tokens Studio for Figma

Tokens Studio is the most widely adopted plugin for token management in Figma. It extends native Variables with W3C Design Token format support and direct sync to GitHub or GitLab. When designers push an update, a source-of-truth JSON file is immediately available to developers. A colour token in the exported JSON looks like: color.brand.primary with value #C0780A and type color — the raw input your transformation pipeline consumes.

Native Figma Variables Export via API

Figma’s REST API now exposes Variables data, allowing teams to build custom export pipelines without relying on a plugin. A GitHub Action that pulls Variables from the Figma API on every design file publish is a robust, fully automated alternative — removing the manual push step from the designer’s workflow entirely and ensuring token JSON is always in sync with the latest design decisions.

Step 3: Transforming Tokens with Style Dictionary

Style Dictionary, originally built by Amazon and maintained as open source, is the industry standard for transforming design token JSON into platform-specific output. A single Style Dictionary configuration can generate CSS custom properties for web, Swift colour extensions for iOS, and Android XML resources from the same source JSON simultaneously. The output tokens.css contains exactly what you expect: --color-brand-primary: #C0780A; --spacing-4: 16px; --font-size-body: 1rem — all generated automatically, ready to import at your application root.

Transform Groups and Custom Transforms

Style Dictionary’s real power is its transform pipeline. Transforms modify token values before output — converting pixel values to rem, generating CSS shadow syntax from structured token objects, or adding platform-specific prefixes. You can compose built-in transforms into groups or write custom transforms for specific needs. For a team outputting to web and iOS simultaneously, a single config generates both formats from one source of truth without any duplication.

Step 4: Consuming Tokens in Production Code

With tokens transformed into CSS custom properties, consuming them in production is straightforward. A button component’s background-color is var(--color-brand-primary). Its border-radius is var(--border-radius-medium). Its font-size is var(--font-size-body-medium). The critical discipline: every visual value in every component must come from a token, never a hardcoded value. A single hardcoded hex causes that component to fall out of sync when tokens update. Code review checks for hardcoded values are a useful enforcement mechanism in the early stages of token adoption.

Tokens in React with CSS Custom Properties

In React, CSS custom properties work seamlessly with CSS Modules, styled-components, or Emotion. Import tokens.css at the application root and every component has access to every token as a CSS variable. For TypeScript teams, generating a typed token map from Style Dictionary output adds type-checking to token references — a typo in a token name becomes a compile error rather than a silent visual regression in production.

Tokens in React Native and iOS

For cross-platform products, Style Dictionary outputs platform-specific token formats from a single source. React Native components consume tokens as a JavaScript object from a generated tokens.js file. iOS Swift code references tokens as UIColor extensions or Color assets. One token change in the design system propagates to web, iOS, and Android consistently — the single source of truth principle applied at platform scale.

Step 5: Keeping Design and Code in Sync

The token pipeline is only as valuable as its governance. Without a clear process for how token changes flow from design to production, the system drifts. The most effective governance pattern is to treat tokens like code: token JSON files live in a version-controlled repository, changes go through pull requests, a CI/CD pipeline runs Style Dictionary on merge, and updated tokens are published as a versioned npm package. Consuming applications update to the new package version on a cadence that suits their release cycle.

For teams building this infrastructure from scratch, the Design Tokens W3C specification draft and the Style Dictionary GitHub repository are both worth studying as foundations for a pipeline that will scale with your organisation.

A design token is not just a variable. It is a contract between design and engineering — a shared language that ensures what the designer intended is exactly what the user experiences.

Common Mistakes and How to Avoid Them

• Naming tokens by value instead of intent — color/blue/500 as a semantic token means nothing when the brand refreshes to orange; name semantic tokens by role, not appearance

• Skipping the global-to-alias tier — applying global tokens directly to components means retheme requires touching every component instead of updating one alias

• Letting Figma and code drift — without an automated sync process, manual updates create divergence within weeks; automate the export and transformation pipeline from day one

• Overcounting token categories — start with colour, spacing, and typography, then expand as the system matures rather than defining every possible property upfront

• Ignoring dark mode from day one — retrofitting dark mode token support onto a system built without modes is extraordinarily painful; design the mode structure into your collections from the start

The Full Pipeline at a Glance

• Define — create Global and Semantic Variable collections in Figma with a clear naming convention and mode support from day one

• Export — use Tokens Studio or the Figma API to export token definitions as W3C-format JSON to a version-controlled repository

• Transform — run Style Dictionary in CI/CD to convert token JSON into CSS custom properties, Swift extensions, Android XML, or any platform format your product requires

• Consume — reference token variables in all component styles; enforce no hardcoded values through code review and linting rules

• Govern — treat tokens like code; version them, review changes via pull requests, publish as a package that consuming applications adopt on a controlled cadence

Final Thoughts: Tokens Are an Investment That Compounds

The up-front effort of building a token architecture — naming conventions, collection structure, export pipelines, Style Dictionary configuration — pays dividends that compound over the lifetime of a product. Every theme, every rebrand, every platform expansion, every accessibility mode becomes dramatically easier when the entire visual language is managed through a single, consistent token layer. The colour change that once took three days takes three minutes. The dark mode that once required a full sprint ships in an afternoon.

At Afrodity Designs, design tokens are a core part of every design system engagement we deliver. We build token architectures that are naming-convention-sound, mode-ready from day one, and wired to a transformation pipeline that engineering teams can own and extend. If you are building a design system and want to get the foundations right from the start, we would love to talk.