Design-Tokens
Mit Design-Tokens vertraut werden
Design-Tokens geben bestimmten Werten einen Namen. Diese Werte beziehen sich zum Beispiel auf Farben oder Größen. Sie beschreiben, wie die jeweiligen Eigenschaften eingesetzt werden sollen, ohne dass Pixel und Hex-Codes fest eingegeben werden müssen. Das Token-System ermöglicht es, eine gemeinsame und konsistente Sprache zwischen Design und Entwicklung aufzubauen. Dadurch wird die Zusammenarbeit von Designer:innen und Entwickler:innen effizienter.
Tokensystematik für KERN
Token-Ebenen
Die Token-Systematik startet mit den Grundwerten, wie zum Beispiel in der Abbildung unten der Hex-Code für eine Farbe #D8F7F0. Dabei handelt es sich um einen Grünton, der direkt für Komponenten verwendet werden könnte, beispielsweise einen grünen Badge oder eine Erfolgsmeldung. Sollte sich dieser Wert aus irgendeinem Grund ändern, müsste dieser an jeder Stelle, an der er verwendet wird, manuell angepasst werden. Der grüne Badge oder die Erfolgsmeldung müsste individuell angepasst werden. Das könnte sehr mühsam werden, da alle Stellen aufgespürt werden müssten, an denen der Wert vorkommt. Desweiteren müsste er erneut für jede Komponente benannt werden, die neu entwickelt wird. Daher gibt es in KERN spezifischere Tokens, die mit diesem Wert arbeiten. Dies ist die Ebene 1 der Core-Tokens, im Beispiel das Token „--core-color-green, tint80%“. Diese dienen der Definition der semantischen Tokens, die die höchste Spezifität in der Ebene 2 aufweisen, beispielsweise „--semantic-color-bg-static-success“. Es handelt sich dabei um den ursprünglichen Grünton. Wenn neue Komponenten erstellt werden, kann also auf die semantischen Tokens zurückgegriffen werden. Das erleichtert Designer:innen die Auswahl der richtigen Farbe für bestimmte Eigenschaften.
Die Tokens der Ebene 1 und Ebene 2 sind als Variablen in Figma angelegt, wobei nur die Tokens der Ebene 2 für die Gestaltung auswählbar sind.
Benennungs-Systematik
Die Benennung der Design-Tokens setzt sich aus den folgenden sieben Elementen zusammen. Wie die Tokens spezifisch aufgebaut sind, wird auf den entsprechenden Seiten (zum Beispiel beim Thema Farbe) näher erläutert.
1. Collection
beschreibt die Ebene, die verschiedene Sammlungen von Eigenschaften zusammenfasst. Momentan gibt es bei KERN „core“ oder „semantic“.
2. Category
bestimmt die Kategorie der Eigenschaften, um die es in dem Token geht. Dies sind zum Beispiel:
- color
- size
- space
- stack
- borderradius
- font
Je nach „Category“ und je nach Bedarf kann das Token weitere Ergänzungen tragen:
3. Concept
beschreibt den Anwendungsbereich des Tokens. Dieser kann je nach „Category“ unterschiedliche Werte annehmen.
4. Property
beschreibt die Eigenschaften eines Tokens. Bei Farben kann dies z.B. statisch oder interaktiv sein. Bei anderen Tokens wird die „T-Shirt-Systematik“ verwendet (2xs, xs, sm, md, lg, xl, 2xl etc.).
5. Variant
definiert die „Property“ genauer. Zu starke Festlegungen wie primär, sekundär, tertiär werden dabei vermieden. Stattdessen werden softere, skalierbarere Begrifflichkeiten genutzt.
6. Modifier
wandelt die in „Variant“ definierte Ausprägung ab. Es können auch mehrere „Modifier“ verwendet werden oder auch gar keine.
7. State
beschreibt den Status eines Elements, auf den das Token angewendet wird, zum Beispiel den „Hover“-Status bei Buttons.
Die Benennung im Code kann sich unterscheiden, da zum Beispiel die Abstufungen der Farben programmatisch erzeugt werden.
Design-Tokens werden in den folgenden Bereichen verwendet:
Farbe
Schrift
Größen und Abstände
Icons
Animation und Interaktivität