How do I sync design tokens between Figma and code?

Use Tokens Studio (Figma plugin) to define tokens in Figma and export them as JSON. Style Dictionary transforms the JSON into CSS custom properties, Swift values, Kotlin values, or any format needed. This creates a workflow where designers update tokens in Figma, the JSON is committed to the repository, and Style Dictionary generates platform-specific files. Changes propagate automatically from design to all platforms.

Design

Design Token

A named value representing a design decision (color, spacing, typography) that can be shared across platforms and tools.

Design tokens create a single source of truth for design decisions shared between Figma, web, and mobile platforms.
Semantic tokens (--color-text-primary) reference primitive tokens (--blue-600), enabling theme switching and dark mode.
CSS custom properties (variables) are the native web implementation of design tokens, requiring no tooling.

Design Token Architecture

A well-structured token system has three layers:

Primitive tokens: Raw values with no context. `--blue-500: #3B82F6`, `--space-4: 16px`, `--font-size-lg: 18px`.
Semantic tokens: Contextual references to primitives. `--color-primary: var(--blue-500)`, `--text-body: var(--font-size-lg)`.
Component tokens: Component-specific overrides. `--button-bg: var(--color-primary)`, `--card-padding: var(--space-4)`.

This layered approach means changing `--blue-500` updates every component that uses it. Switching to a dark theme means only changing semantic token mappings, not individual components.

Frequently Asked Questions

Related Services

Web & Mobile Development

Related Terms

CSS

Cascading Style Sheets. A stylesheet language used to describe the presentation of HTML documents.

UI/UX

User Interface / User Experience. The visual design and overall experience of interacting with a digital product.

Need Help With Implementation?

Our team specializes in implementing the solutions described in this glossary.

Get in Touch