Design Tokens sind ein Konzept um Designentscheidungen zu vereinfachen und zu standardisieren. Sie dienen als kleine Bausteine, um visuelle und gestalterische Eigenschaften wie Farben, Typografie-Stile, Abstände, Schatten, Animationen und andere Designelemente zu definieren.
Die Verwendung von Tokens beschleunigt nicht nur den Übergang von Design zu Entwicklung, sondern trägt auch dazu bei, dass Design und Entwicklung konsistent bleiben weil sie variabel bleiben, anstatt harte Codewerte wie Pixelwerte oder Hex-Werte für Farben zu verwenden. - und das über verschiedene Plattformen wie Web, iOS oder Android hinweg. Diese Tokens helfen dabei, Änderungen vom Design-Tool zum Live-System entweder vollständig oder automatisiert zu übertragen.
Einige Vorteile von Design Tokens:
•Beschleunigung des Übergabeprozesses
•Konsistente Designimplementierung in der Entwicklung
•Automatisierung
•Plattformunabhängigkeit
Es gibt im Wesentlichen drei verschiedene Arten von Tokens.
1. Globale-Tokens, Primitive-Tokens oder Simple-Tokens
2. System-Tokens, Semantische-Tokens oder Alias-Tokens
3. Komponenten-Tokens
Globale-Tokens
Globale Tokens beinhalten nur einen (RAW-) Wert, der unabhängig vom Kontext ist und keine spezifische Bedeutung oder Verknüpfung hat. Sie enthalten eine vollständige Liste aller verfügbaren Optionen innerhalb eines Designsystems. Die Namen sollten einfach, kurz und skalierbar sein.
System-Token
System-Token sind kontextspezifisch und beziehen sich auf globale Token. Im Gegensatz zu globalen Token hat jeder System-Token einen spezifischen Verwendungszweck, eine Bedeutung, eine Rolle und eine Designentscheidung. Zum Beispiel kann es um die Gestaltung des Hero-Titels oder die Farbauswahl für Buttons, Hintergründe oder Oberflächen gehen.
Benennung von System-Token
(1) Grundlage: Die Art der visuellen Design-Eigenschaft oder der grundlegende Stil, wie Farbe oder Typografie.
(2) Eigenschaft: Das UI-Element, auf das sich das Token bezieht, wie Rahmen, Hintergrund, Schatten oder andere Eigenschaften.
(3) Modifikator: Zusätzliche Details über den Zweck des Tokens, wie seine Rolle, Betonung oder Interaktionszustand.
Komponenten-Token
Die globalen Tokens sollen möglichst abstrakt bleiben, während bei den System-Tokens Rollen und Bedeutungen hinzugefügt werden. Bei den Komponenten-Tokens wird dagegen darauf geachtet, möglichst präzise zu sein. Hier hat man die Kontrolle darüber, wie die Styles von Entwicklern implementiert werden. Die Regel lautet, dass jede Komponente ihren eigenen Satz von Tokens haben sollte. Der Top-Level-Name wird so gewählt, dass er dem tatsächlichen Namen der Komponente entspricht.
