„Können Sie das Primärblau in ein etwas dunkleres Blau ändern?“ In einer älteren Codebasis kostet diese Anfrage 5.000 US-Dollar. Warum? Weil „#3b82f6“ in 400 CSS-Dateien, 20 JS-Dateien und 5 HTML-Vorlagen fest codiert ist. In einer modernen Codebasis kostet diese Anfrage 0 €. Sie aktualisieren das Design-Token in Figma und es wird automatisch an iOS, Android und Web weitergegeben.

Warum Maison Code darüber spricht

Bei Maison Code Paris fungieren wir als das architektonische Gewissen unserer Kunden. Wir übernehmen oft „moderne“ Stacks, die ohne grundlegendes Verständnis für Skalierung gebaut wurden.

Wir diskutieren dieses Thema, weil es einen kritischen Wendepunkt in der technischen Reife darstellt. Die korrekte Implementierung unterscheidet ein fragiles MVP von einer widerstandsfähigen Plattform auf Unternehmensniveau.

Was sind Design-Token?

Design-Tokens sind die „Atome“ des visuellen Designs. Es handelt sich um plattformunabhängige Schlüssel-Wert-Paare.

Legacy: Farbe: #000000;
Token: color: var(--color-foreground);

Die Token-Hierarchie

Wir machen nicht einfach alles flach. Wir verwenden eine dreistufige Hierarchie, um die semantische Bedeutung sicherzustellen.

1. Primitive Token (global)

Rohwerte. Sie sollten niemals direkt in der Benutzeroberfläche verwendet werden.

„blue-500“: „#3b82f6“.
„gray-900“: „#111827“.
„spacer-4“: „16px“.

2. Semantische Token (Alias): Zweckorientiert.

„color-primary“: „{blue-500}“.
„color-surface“: „{gray-900}“ (Entscheidend für Dunkler Modus)
spacing-card-padding: {spacer-4}

3. Komponenten-Tokens (spezifisch)

Kontextgesteuerte Überschreibungen.

button-bg-primary: {color-primary}
card-bg: {color-surface}
input-border-error: {color-destructive}

Der Workflow: Figma zu Code

Wir betrachten Figma als „Quelle der Wahrheit“ für Design, genauso wie wir Git als Quelle der Wahrheit für Code betrachten. Wir verwenden die Funktion Variablen in Figma in Kombination mit dem Plugin „Tokens Studio“.

Schritt 1: Token exportieren

Wir exportieren „tokens.json“. Diese Datei ist die einzige Quelle der Wahrheit.

„json { „global“: { “Farben”: { “blue”: { “500”: { “value”: “#3b82f6” } } } }, „semantisch“: { „primary“: { „value“: „{colors.blue.500}“ }, „on-primary“: { „value“: „{colors.white}“ } } } „

Schritt 2: Transformationen (Stilwörterbuch)

JSON ist für iOS (Swift) oder Android (XML) nutzlos. Wir verwenden Style Dictionary (von Amazon), um den JSON in plattformspezifische Artefakte umzuwandeln. Die Build-Pipeline („npm run build:tokens“) sieht folgendermaßen aus:

„Meerjungfrau Grafik LR Figma[Figma-Variablen] ->|Plugin| JSON[tokens.json] JSON ->|CI/CD| SD[Stilwörterbuch]

SD ->|Transformieren| CSS[CSS-Variablen]
SD ->|Transformieren| TS[Tailwind Config]
SD ->|Transformieren| Swift[Color.swift]
SD ->|Transformieren| XML[colors.xml]

„

Schritt 3: Verbrauch bei Rückenwind

Für unsere Headless Storefront (erstellt mit Atomic Design) ordnen wir diese Token Tailwind CSS zu. In „tailwind.config.js“ codieren wir Werte nicht fest. Wir lesen die Build-Artefakte.

„Javascript // tailwind.config.js const tokens = require(’./build/tokens.js’);

module.exports = { Thema: { Farben: { Primary: ‘var(—color-primary)’, // Wird der CSS-Variable zugeordnet Hintergrund: ‘var(—color-background)’, }, erweitern: { borderRadius: tokens.radius, Schriftartenfamilie: tokens.typography, Abstand: tokens.spacing } } } „

Das bedeutet, dass wir niemals „class=“bg-[#3b82f6]“ schreiben. Wir schreiben „class="bg-primary". Wenn die Marke in Red umbenannt wird, ändern wir den Token „primary“ -> „red-500“ in Figma. Die gesamte Website wird sofort nach der Bereitstellung aktualisiert.

Dark-Mode-Architektur

Im Dunkelmodus geht es nicht darum, „Farben umzukehren“. Es geht um Token Swapping. Wir definieren eine „helle“ Karte und eine „dunkle“ Karte. Sie haben die gleichen semantischen Namen („—color-background“), verweisen aber auf unterschiedliche Primitive.

CSS-Implementierung

„css :root { /* Standard (Licht) */ —color-background: var(—white); —color-text: var(—black); —color-border: var(—gray-200); }

[data-theme=“dark”] { /* Überschreiben */ —color-background: var(—black); —color-text: var(—white); —color-border: var(—gray-800); } „

Da Tailwind den Semantischen Namen verwendet, funktioniert die Klasse „bg-background“ in beiden Modi. Im Hellmodus ist es Weiß und im Dunkelmodus Schwarz. In Ihren React-Komponenten sind keine zusätzlichen Klassen („dark:bg-black“) erforderlich. Dadurch wird die Bündelgröße erheblich reduziert.

Mehrmarkensysteme (Theming)

Für Agenturen, die mehrere Storefronts verwalten (z. B. GAP, Old Navy, Banana Republic), ermöglichen Token-Systeme die Wiederverwendung derselben React-Codebasis. Sie laden einfach eine andere „tokens.css“-Datei.

Lücke: „primär = Blau“, „Radius = 4px“.
Alte Marine: „primär = Marine“, „Radius = 8px“. Der Komponentencode „

Typografie-Token

Design-Token bestehen nicht nur aus Farben.

Größe: text-xl -> 1.25rem
Gewicht: „font-bold“ -> „700“.
Linienhöhe: „leading-tight“ -> „1,25“.
Buchstabenabstand: „tracking-wide“ -> „0,025em“.

Wir kodieren „Typescales“ (Große Terz, Perfekte Quarte) in die Token, um mathematische Harmonie sicherzustellen. Wenn Sie „font-size: 17px“ manuell festlegen, unterbrechen Sie den Rhythmus. Token erzwingen das System.

9. Visualisierung von Token: Das Storybook-Addon

Token sind abstrakt. Entwickler müssen sie sehen. Wir erstellen ein benutzerdefiniertes Storybook-Addon, das alle Token live anzeigt.

Farbpalette: Raster aus Farbfeldern mit ihren Token-Namen.
Typografie-Skala: Text wird in jeder Schriftgröße dargestellt.
Schatten: Kästchen mit Höhenangaben. Dies dient als „lebendige Dokumentation“. Wenn ein Entwickler eine Farbe benötigt, öffnet er Figma nicht. Sie öffnen Storybook, suchen nach „Primär“ und kopieren den Klassennamen.

10. Der „Theme-Anbieter“-Kontext

Wie wechselt man in React effizient das Thema? Geben Sie keine Requisiten weiter. Verwenden Sie CSS-Variablen + Kontext. „tsx const ThemeContext = createContext({ theme: ‘light’, toggle: () => {} });

Exportfunktion ThemeProvider({ children }) { const [theme, setTheme] = useState(‘light’);

useEffect(() => { document.documentElement.dataset.theme = Thema; }, [Thema]);

return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>; } „ Dadurch wird das Attribut „data-theme“ im Tag „“ aktualisiert. Die CSS-Variablen werden sofort neu berechnet. Der Reaktionsbaum wird nicht neu gerendert (mit Ausnahme der Umschalttaste selbst). Dies ist entscheidend für die Leistung.

11. Wartung und Governance

„Mit großer Macht geht große Verantwortung einher.“ Wenn ein Junior-Designer versucht, das „primäre“ Blau zu ändern, könnte er die Barrierefreiheitskonformität in der gesamten App verletzen. Wir implementieren CI Checks (Style Dictionary Linting) für Token.

Automatisierte Prüfungen

Kontrastprüfung: Stellen Sie sicher, dass der „on-primäre“ Text einen Kontrast von 4,5:1 zum „primären“ Hintergrund aufweist. Wenn nicht, schlägt der Build fehl.
Namenskonvention: „blue-final-v2“ ablehnen. Erzwingen Sie „blue-500“.
Verwaiste Token: Warnen Sie, wenn ein definiertes Token nie in der UI-Logik verwendet wird.

12. Token-Aliasing für Barrierefreiheit

Barrierefreiheit bedeutet nicht nur Farbkontrast. Es ist eine Benutzerpräferenz. Einige Benutzer benötigen den „High Contrast Mode“. Einige Benutzer benötigen „Reduced Motion“. Wir ordnen diesen Medienabfragen Token zu. motion-duration: { var(--motion-fast) } @media (prefers-reduced-motion) { --motion-fast: 0ms; } Durch die Tokenisierung von Bewegungen können wir den Wunsch des Benutzers respektieren, Animationen global zu deaktivieren, ohne CSS-Komponenten neu schreiben zu müssen.

13. Mobile vs. Web-Token

iOS verwendet Punkte. Web verwendet Rem. Android verwendet DP. Ein naiver Export schlägt fehl. Wir verwenden Style Dictionary Transforms, um die Mathematik zu handhaben. „spacing.4“ (16px) -> iOS „16pt“ -> Android „16dp“. Wir kümmern uns auch um Namenskonventionen:

Web: kebab-case (--color-primary)
iOS: „camelCase“ („colorPrimary“)
Android: snake_case (color_primary) Dies stellt sicher, dass sich Entwickler auf ihrer Plattform zu Hause fühlen.

14. Fazit

Design-Tokens sind die „API“ zwischen Design und Engineering. Sie entkoppeln den Wert (Hex-Code) von der Absicht (Primärfarbe). Für eine Maison, in der Markenrichtlinien heilig sind, sind Design-Tokens die einzige Möglichkeit, 100 % Treue über jeden digitalen Berührungspunkt hinweg zu garantieren. Hören Sie auf, CSS zu schreiben. Beginnen Sie mit dem Schreiben von Systemen.

Beauftragen Sie unsere Architekten.