Design Tokens in einer JSON-Datei sind erst der Anfang. Ohne eine Build-Pipeline, die diese Tokens in CSS Custom Properties, SCSS-Variablen, Tailwind-Konfigurationen oder native Plattform-Formate transformiert, bleiben sie ein theoretisches Konstrukt. Die Pipeline ist das operative Herzstück jeder Token-Architektur.

Style Dictionary: Der De-facto-Standard

Style Dictionary (von Amazon entwickelt, Open Source) ist das am weitesten verbreitete Tool für Token-Transformation. Version 4 bringt native DTCG-Unterstützung, ESM-Support und erweiterte Transformations-APIs.

Der Workflow: Token-Dateien (JSON oder DTCG-Format) als Input → Transformer verändern Werte (z.B. Farben von Hex zu RGB, Pixel zu Rem) → Formatter erzeugen die Ausgabedateien (CSS, SCSS, TypeScript, Android XML, iOS Swift). Jeder Schritt ist über Plugins erweiterbar.

// style-dictionary.config.mjs
export default {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'dist/css/',
      files: [{
        destination: 'tokens.css',
        format: 'css/variables',
        options: { outputReferences: true }
      }]
    },
    scss: {
      transformGroup: 'scss',
      buildPath: 'dist/scss/',
      files: [{
        destination: '_tokens.scss',
        format: 'scss/variables'
      }]
    }
  }
};

Die Option outputReferences: true ist entscheidend: Sie erhält Aliasing-Ketten in der CSS-Ausgabe. Statt --color-action-primary: #2563EB wird --color-action-primary: var(--color-blue-500) generiert – die Semantik bleibt im Code sichtbar.

Cobalt UI: DTCG-native Alternative

Cobalt UI wurde von Grund auf für das DTCG-Format entwickelt. Es ist schneller als Style Dictionary bei großen Token-Sets und bietet native Unterstützung für zusammengesetzte Token-Typen. Die Plugin-Architektur erlaubt Custom-Output-Formate.

Der Vorteil gegenüber Style Dictionary: Cobalt UI versteht DTCG-Typen nativ, während Style Dictionary 4 einen Kompatibilitätslayer verwendet. Für neue Projekte, die ausschließlich im DTCG-Format arbeiten, ist Cobalt UI die modernere Wahl.

UnoCSS- und Tailwind-Integration

Für Utility-first CSS-Frameworks gibt es zwei Ansätze:

Ansatz 1: CSS Custom Properties + Theme-Referenz. Tokens werden als CSS Custom Properties generiert. Die UnoCSS/Tailwind-Konfiguration referenziert diese Properties: colors: { primary: 'var(--color-action-primary)' }. Vorteil: Tokens bleiben die Single Source of Truth, das Framework wird zum Consumer.

Ansatz 2: Direkte Theme-Generierung. Ein Custom-Formatter in Style Dictionary generiert direkt eine UnoCSS- oder Tailwind-Konfigurationsdatei. Vorteil: Volle Nutzung der Framework-Features (Opacity-Modifiers, Color-Mix). Nachteil: Engere Kopplung an ein spezifisches Framework.

Figma → Code: Der vollständige Workflow

Der produktionsreife Workflow verbindet Figma Variables mit der Code-Pipeline: Figma Variables werden definiert (Collections, Modes, Aliasing). Tokens Studio synchronisiert die Variables in eine JSON-Datei im Repository. Eine CI/CD-Pipeline (GitHub Actions) führt Style Dictionary aus. Die generierten CSS/SCSS-Dateien werden automatisch committed oder als npm-Package published.

Tool
Stärke
DTCG-Support
Output-Formate
Style Dictionary 4
Ökosystem, Plugins
Ja (nativ)
CSS, SCSS, JSON, TS, iOS, Android
Cobalt UI
Performance, DTCG-native
Ja (core)
CSS, SCSS, JSON, TS
Tokens Studio
Figma-Integration
Ja (Export)
JSON (für Pipeline)
Specify
Cloud-Sync
Teilweise
CSS, SCSS, JSON, TS

Kernpunkte

  • Style Dictionary 4 ist der De-facto-Standard mit nativem DTCG-Support und einem großen Plugin-Ökosystem.
  • Cobalt UI ist die DTCG-native Alternative – schneller und moderner, aber mit kleinerem Ökosystem.
  • outputReferences: true erhält Aliasing-Ketten in der CSS-Ausgabe – entscheidend für Debugging und Wartbarkeit.
  • UnoCSS/Tailwind-Integration funktioniert über CSS Custom Properties als Brücke oder direkte Theme-Generierung.
  • Figma → Tokens Studio → Git → Style Dictionary → CSS ist der etablierte Produktions-Workflow.
  • Alle genannten Build-Tools sind Open Source – die Token-Pipeline gehört der Organisation, nicht einem Anbieter.