Die Welt des digitalen Designs entwickelt sich ständig weiter. Um wettbewerbsfähig zu bleiben, ist es wichtig, die visuelle Konsistenz auf allen Plattformen und Geräten aufrechtzuerhalten. Hier kommen Design-Tokens ins Spiel. Diese kleinen Designeinheiten spielen, obwohl sie oft übersehen werden, eine wesentliche Rolle bei der Schaffung harmonischer und effektiver Benutzererlebnisse.

Was ist ein Design-Token?

Design-Token sind standardisierte Werte die die Grundelemente eines Designsystems darstellen.
Zur Erinnerung, ein Design-System ist ein Repository, das alle Komponenten eines digitalen Projekts zusammenführt. Diese ermöglichen es, während der gesamten Produktion eine kohärente Logik zu entwerfen und alle an der Gestaltung einer Schnittstelle beteiligten Teams anzuleiten.
Design-Tokens können zum Definieren von Farben, Schriftarten, Größen, Rändern, Leerzeichen und anderen Designelementen verwendet werden. Dies sind leistungsstarke Tools, die zur Verbesserung beitragen können Konsistenz und hochwertige Qualität Design sowie die Zusammenarbeit zwischen Designern und Entwicklern.
Anstatt einen Wert zu verwenden, verwenden wir den Token. Dies ermöglicht Ihnen dann, nur eine Seite mit allen eingegebenen Token zu haben und sich auf eine verlassen zu können einzige Quelle.

Beispiel für einen Token einer Farbe:

Auf dieser Ebene ähnelt ein Token-Design in etwa den Stilen darauf Figma ou Skizze (Farben, Schriftarten, Schatten usw.), aber mit viel mehr Möglichkeiten und viel mehr Flexibilität. Ein Design-Token wird am häufigsten für Farben, Größe, Ränder, Deckkraft, Ränder usw. verwendet.

Anstatt also:

Wir würden haben:

Das Token-Design ermöglicht es uns Wert ändern bei Bedarf im laufenden Betrieb von „{primary}“ aus, ohne zu den verschiedenen Zeilen zurückkehren zu müssen.
Außerdem im Falle von Mehrmarken-Designsystem, dadurch ist es auch möglich, nur einen zu haben eine einzige Seite zum Bearbeiten den Stil ändern.
Ideal ist es, in den Stilen unserer Designsoftware denselben Namen zu verwenden, um eine größere Konsistenz und Einfachheit zu erreichen weiterleiten zwischen Designern und Entwicklern.
Der Einsatz von Design-Tokens als integraler Bestandteil eines Design-Systems geht jedoch weit über das hinaus. Sie erlauben auch a erhöhte Skalierbarkeit, bessere Kommunikation zwischen Teams und damit bessere Entscheidungsfindung.

Die zwei Arten von Design-Token

• Token-Grundelemente
  Die Token-Grundelemente sind Grundwerte des Designsystems. Dazu gehören Farben, Schriftarten, Schriftgrößen, Ränder, Leerzeichen und andere Designelemente. Token-Grundelemente werden normalerweise in einem standardisierten Datenformat gespeichert, z JSON, CSS ou YAML. Dies macht es für Designer und Entwickler einfacher, sie zu teilen und zu verwenden.
• Semantik-Token
  Semantische Token sind Kombinationen primitiver Token, die im Designsystem eine bestimmte Bedeutung haben. Ein Semantik-Token könnte beispielsweise eine bestimmte Farbe sein, die für eine Befehlsschaltfläche verwendet wird, oder eine bestimmte Schriftart, die für einen Seitentitel verwendet wird. Mit semantischen Token können Sie eine erstellen stimmiges und homogenes Designund vereinfachen Sie die Zusammenarbeit zwischen Designern und Entwicklern.

Primitive und Semantik sind zwei wesentliche Elemente eines Designsystems. Sie erlauben Definieren Sie die Grundelemente Entwerfen und organisieren Sie sie so, dass sie leicht zu finden und zu verwenden sind. Durch die Verwendung von Token können Designer und Entwickler schneller und einfacher konsistente, hochwertige Schnittstellen erstellen.

Die Vorteile von Design-Tokens

• Konsistenz
  Design-Token reagieren unter anderem auf a Geschäftsproblem : Wie kann die grafische Identität der Marke mit einem Minimum an Reibung gewährleistet werden?
  Im Falle einer Änderung der Grundlagen (z. B. eines Rebrandings) ermöglichen Design-Tokens eine schnelle Umsetzung dieser Änderungen.
  Die Stile sind für alle Produkte und Plattformen einheitlich.
• Wiederverwendbarkeit
  Design-Tokens können für ein oder mehrere Produkte wiederverwendet werden, was dies ermöglichtSparen Sie Zeit und Ressourcen in Entwicklung. Entwickler rufen Token direkt ab, anstatt jedes Mal neue Stile erstellen zu müssen.
  Design-Token vermeiden das harte Schreiben von Werten im Code.
• Wartbarkeit
  Design-Token erleichtern die Projektwartung, weil sie es ermöglichen schnelles Style-Update. Wie ? Token sind Daten, die einen Namen und einen Wert enthalten, die zentralisiert sind.
  Durch einfaches Ändern des Werts eines Tokens, beispielsweise der Farbe einer Hauptschaltfläche, wirkt sich dies in einem einzigen Eingriff auf alle Schaltflächen der Anwendung/Site aus! Entwickler können so Projektstile einfacher beibehalten, auch wenn sich die Designentscheidungen ändern.

Die Grenzen von Design-Tokens

• Die Werkzeuge sind nicht bereit
  Da das Format von Design-Tokens nicht in Stein gemeißelt ist, hat sich noch niemand auf die Verwendung geeinigt. Jedes Team und jedes Unternehmen hat seine eigene Funktionsweise und seine eigene Sprache. Derzeit ist die W3C arbeitet derzeit an einem Format, das dieses Problem lösen würde. Aber im Moment ist es angebracht, sich mit den verfügbaren Werkzeugen und ihren Grenzen zufrieden zu geben. Figma hat angegeben, dass an diesem Thema gearbeitet wird, diese Funktion wird jedoch voraussichtlich nicht vor Jahresende veröffentlicht.
• Eine Verlangsamung des Arbeitsablaufs
  Finde einen Nomenklatur Jeder versteht, dass es sich um eine wahre Suche nach dem Heiligen Gral handelt. Darüber hinaus muss es sich wie jedes System anhand einer Reihe von Parametern weiterentwickeln. Hinzu kommt die Komplexität der Dokumentation und Zeit, die es brauchte, um es zu schreiben. Auf Design-Systeme spezialisierte Teams sind immer noch nicht weit verbreitet, und dies gilt umso mehr für Leute, die sich dem Schreiben von Dokumentationen widmen.
  Die kleinste Änderung eines dieser Grundelemente kann zahlreiche Aktualisierungen generieren, die berücksichtigt werden müssen.
  Bei der Implementierung von Design-Tokens ist es wichtig, einen Überblick über das System zu haben.
  L 'Die Umsetzung ist komplex und erfordert erhebliche Anstrengungen an der Basis, aber ich bin zuversichtlich, dass ein solcher Ansatz durch die exponentiellen Vorteile, die er mit sich bringen kann, bei weitem aufgewogen wird.

Zusammenfassung

Design-Tokens sind Entitäten mit einem bestimmten Namen und einer bestimmten Nomenklatur, die gespeichert werden unteilbare Daten (z. B. Abstand oder Farbe). Es handelt sich dabei alles um Werte, die für den Aufbau und die Wartung von Systemen notwendig sind. Wir verwenden diese Werte, anstatt sie im Code „hart zu codieren“, um das Maximum zu gewährleisten Flexibilität, Homogenität und Skalierbarkeit über die verschiedenen Produkte und Erfahrungen hinweg … Sie sind außerdem agnostisch und sollten auf jeder Plattform funktionieren.
Vor allem aber stellen sie eine Methodik dar und nicht nur „Variablen“. Sie ermöglichen es jedem Designsystem, über alle Plattformen, Geräte und Produkte einer Marke hinweg zu wachsen. Der variable Teil ist nur ein Tropfen auf den heißen Stein.

wegnehmen

• Design-Token speichern nicht nur Informationen, sondern auch Informationen übermitteln.
• Sie werden verwendet, um anzuzeigen primitive Werte, aber ihr wahres Potenzial zeigt sich, wenn sie eingesetzt werden Dokumentation der UI-Komponenten.
• Sie ähneln einem Methodik und eine Möglichkeit, ein komplexes System aufzubauen.

Ressourcen, um weiter zu gehen

• Tokens in Designsystemen: 10 Tipps zum Entwerfen und Umsetzen von Designentscheidungen für alle: Hier zu lesen 
• Design-Tokens jenseits von Farben, Typografie und Abständen: Hier zu lesen

 

 

 

Alexandre Caillé, UI & Design System Lead bei UX-Republic