Design Tokens

Design Tokens sind die visuellen Bausteine eures Designs – Farben, Abstände, Typografie. In Celestia verwaltet ihr sie zentral in Figma.

Was sind Design Tokens?

Statt zufällige gewählte Werte (z.B. #007BFF oder 16px) zu verwenden, arbeitet ihr mit semantischen Namen wie color-primary. Das bedeutet:

• Konsistenz über alle Screens
• Einfache Anpassungen – Ändert ihr den Token, ändert es sich überall
• Klare Kommunikation mit Entwickler*innen

Die drei Ebenen

1. Primitive Tokens (Grundwerte)

Die atomaren Werte – werden nie direkt verwendet:

• color-blue-500: #0066CC
• spacing-4: 16px
• font-size-base: 16px

2. Semantic Tokens (Bedeutung)

Verleihen Primitiven Kontext:

• color-text-primary → für Haupttext
• color-background-default → für Hintergründe
• spacing-section-padding → für Section-Abstände

Regel: Nutzt immer Semantic Tokens, nie Primitive direkt!

3. Component Tokens (Komponenten-spezifisch)

Spezifisch für einzelne Komponenten:

• button-background-primary
• card-border-radius
• input-border-color-focus

In Figma arbeiten

Color Styles

• Alle Farben sind als Color Styles definiert
• Zu finden im rechten Panel unter „Fill” → Styles
• Namenskonvention: color/{kategorie}/{konzept}/{variante}

Beispiele:

• color/background/primary/default
• color/text/secondary/hover
• color/border/default

Text Styles

• Alle Typografie-Definitionen
• Schriftarten, Größen, Gewichtungen
• Namenskonvention: {kategorie}/{größe}/{gewicht}

Beispiele:

• typography/heading/h1/bold
• typography/body/large/regular
• typography/caption/small/medium

Effect Styles

• Schatten und Elevationen
• Namenskonvention: shadow/{größe}

Beispiele:

• shadow/sm
• shadow/md
• shadow/lg

Variables (neu in Figma)

• Für werte-basierte Tokens (Spacing, Radien)
• Ermöglicht Theming und Dark Mode
• Namenskonvention: {kategorie}/{konzept}

Beispiele:

• spacing/4
• border-radius/md
• animation/duration/fast

Praktische Anwendung

Beim Designen

1. Nie Primitive direkt verwenden – immer Semantic oder Component Tokens
2. Konsistenz prüfen – gleiche Elemente = gleiche Tokens
3. Dark Mode berücksichtigen – Testet mit Theme-Varianten

Beim Handoff

• Tokens sind im Inspect-Mode sichtbar
• Entwickler*innen können direkt die Token-Namen sehen
• Keine zufälligen Werte mehr
• Handoff wird in Zukunft über ein Plugin automatisiert

Neue Tokens erstellen

Wann nötig:

• Wiederholt sich ein Wert in 3+ Komponenten
• Bestehende Tokens passen nicht

Prozess:

1. Im Design System Team vorschlagen
2. Naming nach Konvention
3. In Figma und Code synchronisieren
4. Dokumentieren

Checkliste für Designer*innen

• Color Styles für alle Farben verwendet
• Text Styles für Typografie genutzt
• Keine zufällig gewählten Werte
• Tokens für Dark Mode getestet
• Kommunikation mit Entwickler*innen geklärt

---

Design Tokens sind eure beste Freundin für konsistente Designs. Einmal gelernt, spart ihr enorm Zeit.