Überblick über Design-Token

Was sind Design-Token?

Mit Design-Token werden Designentscheidungen in Form von Name-Wert-Paaren ausgedrückt.

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

Eine Schaltfläche, für die das Farb-Token jds.color.background.brand verwendet wird, ist beispielsweise mit allen anderen Elementen konsistent, für die dieses oder ein zugehöriges Token verwendet wird. Wenn Sie das Theme ändern, sodass eine andere Markenfarbe verwendet wird, 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?

Token bieten eine flexible Möglichkeit der Verwendung von Themes im Guidewire Designsystem. Ein Theme ist eine Gruppe von Token, die für ein bestimmtes Aussehen oder einen bestimmten Stil kombiniert werden, 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 Änderungen bestimmter Benutzeroberflächenelemente (z. B. Schaltflächen) ohne Auswirkung auf die übrige Designlösung. Mit Design-Token können Sie den Wert eines Tokens ändern. Die Aktualisierung wird dann auf alle Instanzen im System übertragen.

Einheitlichkeit: Mit Design-Token lässt sich Gleichwertigkeit zwischen der Entwurfs- und der Entwicklungsphase herstellen. Designer müssen sich nicht zweimal um den Entwurf kümmern. Entwickler müssen sich nicht zweimal um die Implementierung kümmern.

Wie sind die Namen von Design-Token zu verstehen?

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

1. System: Abkürzung für Jutro Design System. Unterscheidet unsere Token, um Konflikte mit vorhandenen Token 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 Token ist kein Modifikator erforderlich.

Das Format der Token-Namen kann je nach Tool und Umgebung variieren. Die Token-Deskriptoren bleiben jedoch immer gleich.

In den meisten Fällen werden die Teile eines Token-Namens durch Punktnotation getrennt. Durch die Punktnotation können die Namen der Design-Token zur leichteren Verwendung in einer Baumstruktur strukturiert werden. Dies gilt auch für die Verwendung von Erstellungstools 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 Transformation werden alle Punkte durch Bindestriche ersetzt.

Vom Design zum Code

Design-Token werden in Punktnotation erstellt (z. B. jds.color.background.brand). Während des Transformationsprozesses werden diese in CSS-Variablen (z. B. --JDS-COLOR-BACKGROUND-BRAND) umgewandelt, die in der Anwendung zum Rendern von Stilen verwendet werden.

Während die meisten CSS-Variablen, die mit --JDS- beginnen, direkt aus Design-Token transformiert werden, können einige in der Codebasis als „Coverage“- oder „interne“ Variablen für Entwicklungszwecke vorhanden sein. Da das Vorhandensein einer Variablen im Browser Inspector kein übereinstimmendes Design-Token in den Quelldateien garantiert, sollten Sie immer die Liste der Design-Token als maßgebliche Quelle für Theme-fähige Eigenschaften heranziehen.

Suchen und Verwenden von Design-Token

Untergruppen von Token mit den entsprechenden Beschreibungen zur Verwendung finden Sie in der Liste der Design-Token.

Best Practices

Wählen Sie Token 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 scheint. Unsere Design-Token sind spezifisch auf Eigenschaften und den Zweck abgestimmt.