Figma Variables Style Dictionary Platform Tokens

Design Tokens,
End to End.

A production-grade pipeline that transforms structured token definitions into platform-ready CSS custom properties and typed JavaScript exports — the same workflow that powers enterprise design systems at scale.

See the Pipeline View Source

The Pipeline

Tokens are defined once in a format-agnostic source and transformed into every platform artifact your team needs.

  1. Token Source

    Design decisions captured as structured JSON following the W3C Design Token Community Group spec. Each token carries a $type and $value.

    • Color
    • Typography
    • Spacing
    • Shadow
    • Motion

  2. Style Dictionary

    Tokens-Studio SD transforms pre-process DTCG format tokens. Style Dictionary v4 then applies platform-specific transforms and formats the output.

    • DTCG Pre-process
    • Name Transform
    • Value Transform

  3. Platform Output

    A single token source produces multiple output artifacts — each optimized for its target environment with correct naming conventions.

    • CSS Custom Properties
    • ES Module JS
    • TypeScript Declarations

Try It Live

Edit the token JSON and watch the CSS, JavaScript, and TypeScript output update instantly — no build step required.

Generated Output

These artifacts are produced by running npm run build:tokens. They are never hand-authored — only the source token JSON files are edited.

dist/tokens.css

How to Use

Integrate the generated tokens into any project in three steps.

  1. Install & Build

    Clone the repository and run the token build script to generate the output artifacts. 

    npm install
npm run build:tokens

  2. Import CSS Tokens

    Add the generated stylesheet to your project. All tokens are available as CSS custom properties on :root. 

    @import "./dist/tokens.css";

.my-button {
  background-color: var(--token-color-orange-500);
  border-radius: var(--token-border-radius-md);
  padding-block: var(--token-spacing-2);
  padding-inline: var(--token-spacing-4);
  transition-duration: var(--token-motion-duration-base);
}

  3. Import JS Tokens

    Use the typed JavaScript exports for design-system tooling, tests, or JavaScript-driven styling. 

    import {
  tokenColorOrange500,
  tokenMotionDurationBase,
  tokenSpacing4,
} from "./dist/tokens.js";

// Use in component logic, tests, or animation libraries
element.animate(
  [{ opacity: 0 }, { opacity: 1 }],
  { duration: parseInt(tokenMotionDurationBase) }
);