Überblick über Design-Token

Was sind Design-Token?

Design-Token sind einfach Designentscheidungen, angegeben als Namens- und Wertepaare.

Dies sind alle Werte, die für die Erstellung und Pflege eines Designsystems erforderlich sind – Abstände, Farbe, Typografie, Animation usw. – dargestellt als Daten. Sie werden anstelle von fest codierten Werten verwendet, um Flexibilität und Einheitlichkeit übergreifend für alle Produkterfahrungen zu gewährleisten.

Beispielsweise ist eine Schaltfläche, die das Farbtoken jds.color.background.brand verwendet, mit allen anderen Elementen konsistent, die dieses oder ein verwandtes Token verwenden. Wenn Sie das Theme ändern, um eine andere Markenfarbe zu verwenden, werden alle diese Elemente automatisch aktualisiert.

Design-Token dienen Designern und Entwicklern als gemeinsame Sprache und Single Source of Truth für das Theming in einem Designsystem.

Was sind Themes?

Design-Token bieten eine flexible Möglichkeit für das Theming unseres Design-Systems. Ein Theme ist eine Gruppe von Tokens, die kombiniert werden, um ein bestimmtes Aussehen oder einen bestimmten Stil zu erzeugen, oft zum Zweck des Branding.

Ein neues Theme oder neue Stile können erstellt werden, indem lediglich die Werte für einige wenige (5-10) Token geändert werden.

Warum sind Design-Token sinnvoll?

Zusammenarbeit. Mit Design-Token können Designer, Entwickler und multidisziplinäre Teams zusammenarbeiten, basierend auf einer gemeinsamen Sprache agieren und über verschiedene Tools und Sprachen auf dem gleichen Stand bleiben.

Kontrolle. Design-Token erleichtern das Ändern bestimmter UI-Elemente, wie z. B. Schaltflächen, ohne den Rest Ihrer Gestaltung zu beeinträchtigen. Mit Design-Token können Sie den Wert eines Tokens ändern, und die Aktualisierung wird an alle Instanzen im System weitergegeben.

Einheitlichkeit. Design-Token tragen dazu bei, Parität zwischen der Gestaltungs- und der Entwicklungsphase zu erreichen. Designer müssen sich keine Gedanken über doppelte Designarbeit machen. Entwickler müssen sich keine Gedanken über die doppelte Implementierung machen.

Wie sind die Namen von Design-Token zu verstehen?

Token-Namen bestehen aus Deskriptoren, die die Verwendung des Tokens beschreiben.

1. System: Kurz für das Jutro Design System. Unterscheidet unsere Tokens, um Konflikte mit vorhandenen Tokens von Kunden zu vermeiden.
2. Kategorie: Typ des visuellen Designattributs, z. B. Farbe, Größe oder Erhöhung.
3. Eigenschaft: Der Teil der Benutzeroberfläche, auf den das Token angewendet wird, z. B. Hintergrund, Rahmen oder Text.
4. Modifikator: Weitere Angaben zur Verwendung des Tokens, z. B. Rolle, Bedeutung oder Interaktionsstatus. Für einige Tokens ist kein Modifikator erforderlich.

Das Format der Tokennamen kann je nach Tool und Umgebung variieren. Die Tokendeskriptoren bleiben jedoch immer gleich.

In den meisten Situationen werden die Teile eines Tokennamens durch Punktnotation getrennt. Punktnotation ermöglicht es uns, Namen von Design-Token in einer Baumstruktur zu organisieren, was deren Verwendung erleichtert. Dies gilt auch für die Verwendung von Erstellungs-Tools wie Tokens Studio for Figma.

Bindestriche werden für Eigennamen verwendet, die aus mehreren Wörtern bestehen, z. B. Komponenten, und für Blattknoten der Bäume, wenn es nicht sinnvoll ist, eine neue Schachtelungsebene hinzuzufügen. Bei der Umwandlung werden alle Punkte durch Bindestriche ersetzt.

Suchen und Verwenden von Design-Token

Untergruppen von Token mit den entsprechenden Beschreibungen zur Verwendung Sie in der Liste der Tokens.

Best Practices

Wählen Sie Tokens nach Bedeutung, Kontext und Zweck und nicht nach speziellen Werten aus.

Verwenden Sie ein Design-Token mit einem Namen und einer Beschreibung, das genau Ihren Anforderungen entspricht.

Verwenden Sie ein Token nicht allein deshalb, weil es optisch passend erscheint. Unsere Design-Token sind spezifisch für Eigenschaften und Zwecke.