12.5Design Token Workflow

Token Generation Pipeline

Figma (design source)
    |
    +-- Style Dictionary / Figma Tokens plugin
    |   exports tokens.json
    |
    +-- Token transformer (Style Dictionary)
    |   generates:
    |     +-- css/variables.css (CSS custom properties)
    |     +-- ts/tokens.ts (TypeScript constants)
    |     +-- ios/tokens.swift (iOS)
    |     +-- android/tokens.xml (Android)
    |
    +-- CI verification
        compares:
          +-- tokens.json vs computed CSS properties
          +-- Figma API values vs tokens.json

Example tokens.json

{
    "colors": {
        "primary-500": "#3B82F6",
        "primary-600": "#2563EB",
        "primary-700": "#1D4ED8",
        "neutral-100": "#F3F4F6",
        "neutral-900": "#111827",
        "error-500": "#EF4444",
        "success-500": "#22C55E"
    },
    "typography": {
        "heading-1": {
            "fontSize": "36px",
            "fontWeight": 700,
            "lineHeight": "44px"
        },
        "heading-2": {
            "fontSize": "24px",
            "fontWeight": 600,
            "lineHeight": "32px"
        },
        "body": {
            "fontSize": "16px",
            "fontWeight": 400,
            "lineHeight": "24px"
        }
    },
    "spacing": {
        "xs": "4px",
        "sm": "8px",
        "md": "16px",
        "lg": "24px",
        "xl": "32px",
        "2xl": "48px"
    },
    "radii": {
        "sm": "4px",
        "md": "8px",
        "lg": "12px",
        "full": "9999px"
    }
}