Figma: Design Tokens – Die gemeinsame Sprache von Design und Code

Design Tokens sind technologie-agnostische, benannte Designentscheidungen – Farben, Abstände, Radien, Typografie –, die als gemeinsame Referenz zwischen Design (Figma) und Code (CSS, iOS, Android) dienen.

Rubrik: Software & Tools Deep-Dive · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Token-System, Design-Variablen, CSS Custom Properties (Code-Seite)

Was sind Design Tokens?

Design Tokens sind das Konzept, Designentscheidungen – z. B. „Der primäre Knopf hat Hintergrundfarbe #3B82F6, Padding 16px, Radius 8px" – als benannte, maschinenlesbare Werte zu speichern. Statt diese Werte in Figma und im Code-Repository doppelt zu pflegen, gibt es eine einzige Quelle (Single Source of Truth), aus der beide Seiten schöpfen. In Figma werden Tokens durch Variables implementiert; auf Code-Seite als CSS Custom Properties, SCSS-Variablen oder JSON-Objekte.

Erklärung

Warum Design Tokens?

In klassischen Workflows ändern Designer eine Farbe in Figma und kommunizieren das dem Entwickler, der dann manuell im Code nachzieht. Bei einem Design System mit 500+ UI-Komponenten und mehreren Plattformen (Web, iOS, Android) ist das fehleranfällig und zeitaufwendig. Design Tokens lösen dieses Problem:

1. Der Token wird in Figma (oder einer Token-Quelle) geändert.
2. Ein Build-Prozess (z. B. Style Dictionary) transformiert den Token in plattformspezifischen Code.
3. Alle Plattformen erhalten konsistente Werte automatisch.

Token-Architektur: Drei Ebenen

Moderne Token-Systeme folgen einem Tier-Modell:

Ebene 1 – Primitive Tokens (rohe Werte): `` color/blue/500 = #3B82F6 spacing/4 = 16px radius/md = 8px ``

Ebene 2 – Semantic Tokens (Bedeutung): `` color/interactive/primary = {color/blue/500} spacing/button/horizontal = {spacing/4} radius/button = {radius/md} ``

Ebene 3 – Component Tokens (komponentenspezifisch): `` button/background = {color/interactive/primary} button/padding-x = {spacing/button/horizontal} button/border-radius = {radius/button} ``

Durch diese Hierarchie kann man auf Ebene 1 eine Farbe ändern, und alle abhängigen Semantic und Component Tokens aktualisieren sich automatisch.

W3C Design Tokens Community Group

Der W3C-Standard für Design Tokens (Design Tokens Format Module) definiert ein JSON-Format, das Token-Name, Typ und Wert festlegt. Figma Variables sind noch nicht vollständig W3C-kompatibel (Stand 2024), aber die Richtung ist klar. Tools wie Tokens Studio for Figma und Token Transformer ermöglichen heute schon den W3C-konformen Export.

Tokens in Figma: Variables als Implementierung

Figma Variables (2023) sind Figmas native Antwort auf Design Tokens:

• Color Variables → Farb-Tokens
• Number Variables → Spacing-, Radius-, Typografie-Tokens
• Boolean Variables → Feature-Flags, Component-States
• String Variables → Inhalts-Tokens (für Prototypen und Lokalisierung)

Variables unterstützen Aliases (Token-Referenzierung) und Modes (Theming), sind aber aktuell nicht direkt als JSON exportierbar – dafür sind Plugins erforderlich.

Export-Workflow

Typischer Export-Workflow für Design Tokens:

1. Designer definiert Variables in Figma.
2. Plugin (z. B. „Variables2JSON", „Tokens Studio") exportiert Variables als JSON.
3. JSON wird in ein Code-Repository eingecheckt.
4. Build-Tool (z. B. Style Dictionary von Amazon) transformiert JSON in CSS, SCSS, Swift, Kotlin etc.
5. Entwickler nutzen die generierten Werte im Code.

Token Naming Conventions

Gute Token-Namen sind beschreibend und technologie-agnostisch:

• Gut: color/surface/raised, spacing/component/sm
• Schlecht: blueColor, padding16

Namen sollten Kontext (Kategorie), Nutzungsbereich und Skala beschreiben.

Beispiele

1. Komponenten-System: Das Design System hat 120 Color Tokens in drei Ebenen. Ändert man color/brand/primary von Blau auf Grün, aktualisieren sich alle 37 abhängigen Semantic Tokens und damit alle Komponenten-Farbwerte automatisch.
2. Responsive Design: Spacing Tokens mit Modes Mobile, Tablet, Desktop steuern alle Abstände plattformspezifisch ohne manuelle Überarbeitung.
3. Prototyping/Handoff: Im Figma Dev-Mode sehen Entwickler Token-Namen statt Rohwerte. Die CSS-Ausgabe lautet padding: var(--spacing-button-horizontal).
4. Team-Workflow: Ein Token-Repository auf GitHub ist die einzige Quelle. Designänderungen werden als PRs eingereicht, vom Team geprüft und dann als Build an alle Plattformen ausgeliefert.
5. Dark Mode / Theming: Semantic Color Tokens wechseln per Mode ihre Primitive-Referenz. color/surface/default zeigt im Light Mode gray/100, im Dark Mode gray/900.

In der Praxis

Variables für Tokens nutzen: Figma → rechtes Panel → Variables → Collections nach Tier-Modell aufbauen Alias erstellen: Variable bearbeiten → Wert durch andere Variable referenzieren Export: Plugin „Tokens Studio for Figma" installieren → Variables exportieren → JSON laden Style Dictionary einrichten: style-dictionary.org → Config-Datei erstellen → Build-Befehl ausführen Dev-Mode Token-Ansicht: Im Dev-Mode werden Variable-Namen statt Hex-Codes angezeigt

Vergleich & Abgrenzung

Design Tokens unterscheiden sich von Figma Styles dadurch, dass sie technologieoffen und exportierbar sind. Styles sind Figma-intern; Tokens sind die plattformübergreifende Schicht.

Häufige Fragen (FAQ)

Muss ich Design Tokens verwenden, wenn ich nur für Web designe? Nicht zwingend. Für kleine Projekte mit einem Team ist ein einfaches Styles-System ausreichend. Bei mehreren Plattformen, Teams oder Marken lohnt sich der Aufwand für ein Token-System erheblich.

Was ist der Unterschied zwischen Figma Styles und Design Tokens? Styles sind Figma-interne Designdefinitionen ohne plattformübergreifenden Export. Design Tokens sind ein abstrakteres Konzept mit standardisiertem JSON-Format, das für Code-Generierung auf Web, iOS und Android genutzt wird. Figma Variables sind die Brücke: Sie können als Tokens definiert und per Plugin exportiert werden.

Verwandte Einträge

• Figma: Variables
• Figma: Styles
• Figma: Dev Mode
• Figma: Handoff

Weiterführend

• W3C Design Tokens Community Group – tr.designtokens.org
• Salesforce (2014ff.): Theo / Style Dictionary. Amazon Open Source.
• Online: tokens.studio – Tokens Studio Dokumentation; DesignSystems.com – Token Architecture