Token-basierte Design Systeme - Wie Experience Design & Entwicklung enger zusammenarbeiten

Wir machen uns regelmäßig Gedanken darüber, wie die einzelnen Teams bei uns besser zusammenarbeiten können. Bei Kundenprojekten ist die enge Zusammenarbeit zwischen Experience Design und Entwicklung natürlich super wichtig. Oftmals werden beide getrennt gesehen und die Leistungen sogar getrennt voneinander gebucht. Das kann mit einigen Hürden verbunden sein, denn mit dem Wissen beider Teams schaffen wir die beste Customer Experience und bringen das Projekt mit weniger Aufwand und Fehlerpotential auf den Markt. Hierbei spielen natürlich gemeinsame Termine und eine gute Kommunikation eine wichtige Rolle, aber es gibt auch Systeme, die eine Zusammenarbeit verbessern. Und genau dazu gehören Token-basierte Design Systeme! Aber was ist das überhaupt?

Bevor wir ins Eingemachte gehen, wollen wir erst einmal klären, womit wir aktuell arbeiten. Wieso? Weil das Dir den Überblick gibt, wie wir grundsätzlich in der UX/UI arbeiten und Dir damit auch erklären, wieso Token-basierte Design Systeme bei einigen Projekten Sinn machen und wie sie uns unterstützen können.

Styleguide

Ein Styleguide ist eine Art zentrale Datenquelle oder eine Reihe von Richtlinien, in der sich alle wichtigen Informationen für das Design des Produktes wiederfinden. Die meisten Styleguides befassen sich in der Regel mit der Markenbildung (Farben, Schriftarten, Layouts, Icons, etc.), können aber auch Anleitungen für den Inhalt (wie Sprachton und Sprachempfehlungen), sowie visuelle und interaktionsdesign bezogene Standards (auch als Front-End-Styleguides bekannt) bieten. 

Design Library

Eine Design Library enthält vordefinierte, wiederverwendbare UI-Elemente und dient Designer:innen und Entwickler:innen gleichermaßen als Anlaufstelle, um spezifische UI-Elemente kennenzulernen, umzusetzen oder weiterzuentwickeln. Dazu gehören zum Beispiel einzelne UI-Elemente wie Buttons, Formulare, Navigationselemente, Karten oder Icons, aber auch Kombinationen dieser Elemente als ganze Module. Dadurch wird die Effizienz erhöht und die Konsistenz im Designprozess gewährleistet.

Design System

Ein Design System ist ein Satz von Designrichtlinien und wiederverwendbaren Elementen, die sich an den Design Standards der Marke orientieren. Mit Hilfe des Design Systems können Apps, Websites, neue Features o.ä. im festgelegten Design der Marke einfacher und schneller erstellt oder angepasst werden. Design Systeme enthalten üblicherweise sowohl Styleguides, als auch Design Libraries.

Grundlage dieses Konzeptes bildet der oben genannte Styleguide. Token-basierte Design Systeme gehen noch einen Schritt weiter und nutzen Tokens als zentrale Bausteine, um Designelemente zu definieren und im Design System zu verwalten. 

Unter Design Tokens kannst Du Dir einzelnen Bausteine vorstellen, die spezifische Designwerte repräsentieren, wie zum Beispiel Farben, Schriftarten, Größen, Abstände, Schatten und andere visuelle Eigenschaften. Es ist sogar beinahe eine eigene Sprache, da sich zu Iterationsbeginn auf ein System der Benennung der Tokens geeinigt wird, das Gewerkeübergreifend funktioniert.

Bei bisher verwendeten Design Systemen können wir bei Bedarf die Angaben ändern (zum Beispiel bei einem Rebrand), was konsistente Anpassungen auf Seite der Entwicklung ermöglicht. Token-basierte Design Systeme sind eine konsequente Weiterentwicklung: Wenn wir ein Token im Design System anpassen, werden die Änderungen automatisch auf alle Komponenten reflektiert. Das muss im klassischen Design System noch händisch erfolgen. Wir haben zwar "Master Komponenten", aber wenn wir also etwas anpassen wollen, müssen unsere Designer:innen das für jede Komponente einzeln machen. 

Beispiel: Der Border Radius, wie die Abrundung von Ecken bei Buttons, muss auf alle Komponenten im System angepasst werden. In der Komponenten Library und im Styleguide müssen wir dies händisch für jede Master Komponente einzeln machen. Das kann je nach Größe des Design Systems viel Arbeit sein. Mit Tokens können wir den Border Radius einmalig ändern und überall wo dieser verwendet wird, wird er “Master Komponenten”-übergreifend angepasst.

Das ist natürlich noch nicht alles, dieses System sorgt für richtig schöne Produkte, indem es Lösungen für klassische Probleme bietet.

🔁  Konsistenz

Mit Tokens kannst du Informationen über Designelemente wie Farben, Schriftarten, Abstände und Schattierungen spezifizieren und ihrem Zweck zuordnen. Nehmen wir das Beispiel von Farben: Du kannst optionale oder Referenz-Tokens verwenden, die den reinen Farbcode wie #FE9415 enthalten. Darüber hinaus können Alias-Tokens definiert werden, die den Einsatz des Tokens spezifizieren, wie z. B. "interaction-color-default". Und schließlich können Component-Tokens erstellt werden, die den Einsatz der Farbe für spezifische Komponenten festlegen, wie zum Beispiel "button-primary-background-color".

Dieses Konzept der Tokens ermöglicht es, ein gut strukturiertes und flexibles Design System zu erstellen. Allerdings kann die Implementierung von Tokens auch einen erhöhten Aufwand bedeuten, da sie sorgfältig geplant und organisiert werden müssen. Langfristig spart das System aber Geld, da iterative Weiterentwicklung mit weniger Aufwand betrieben werden kann.

🗂️ Single Source of Truth

Das Konzept der Design Tokens ist so angelegt, dass sie als einzige Quelle der Wahrheit für Designentscheidungen dienen. Wenn sich das Team entscheidet, ein Designelement zu ändern, wird das mit einer Veränderung des entsprechenden Tokens im Design System erledigt.

👍 Einfache Anpassung

Wie oben beschrieben, werden Design Tokens zentralisiert und verwaltet. Dadurch können Designanpassungen schnell und effizient vorgenommen werden. Das ermöglicht es den Teams schnell auf Änderungen in Design-Richtlinien, Marken-Updates oder Benutzerfeedback zu reagieren.

💡 Schnelle Light/Dark Mode Implementierung & Design Tests

Apropos einfache Anpassungen - in der Design System können auch Token Variablen für den Light- und Dark Mode eingestellt werden. Das macht den Wechsel für den Design- und Entwicklungsprozess auch nochmal ein ganzes Stück einfacher.

Eine praktische Funktion sind die sogenannten Themes. Diese sind den verschiedenen Modes in der Entwicklung zugeordnet und können direkt über einen einfachen Klick getestet werden. Dadurch können wir die Änderungen im Mode direkt im Design testen, ohne dass wir jede Komponente einzeln anpassen müssen. Früher war dieser Prozess mühsam und zeitaufwendig, aber jetzt können wir die Mode-Änderung leicht und effizient überprüfen.

🤝 Nahtlose Übergabe an Entwickler:innen

Design Tokens sind in der Regel plattformunabhängig und können von unseren Entwickler:innen leicht in verschiedenen Umgebungen, z.B. Apps oder Websites verwendet werden. Dies erleichtert die Zusammenarbeit zwischen UX/UI Designer:innen und Entwickler:innen und sorgt für einen reibungslosen Übergang vom Design zur Implementierung.

🧪 Verringerte QA-Zeit

Quality Assurance spielt bei uns natürlich eine riesige Rolle und dabei geht es nicht nur um die technische Performance, sondern auch um das Design, da es ein wichtiger Teil der User Journey ist. Mit Design Tokens wird die Wahrscheinlichkeit von Designfehlern oder Inkonsistenzen reduziert. Das macht die Qualitätsprüfung und Fehlerbehebung natürlich einfacher und schneller.

⏱️ Zeitsparend für das Team

Die Verwendung von Design Tokens ermöglicht eine effiziente und konsistente Gestaltung, was zu einer Zeitersparnis für das Design- und Entwicklungsteam führt.

Uns hilft das zum Beispiel durch die Typography-Klassen (H6, Body1, etc.), denn damit müssen wir nicht mehr bei jedem Label genau nachgucken, was denn genau die Font-Size, Font, Letter-Spacing, etc. ist. Apps haben viele Labels, das spart enorm Zeit und vermeidet Designfehler. Durch die saubere Trennung von Design-Tokens und -Screens können wir uns auf das "layouten", also das Anordnen und Anzeigen von Dingen, konzentrieren. Der Code wird dadurch zudem übersichtlicher, wartbarer und flexibler.

In Android-Apps verwenden wir Material-Design-Komponenten (Buttons, Switches, Textfelder, etc.) als Grundlage für unser eigenes Design. Diese passen wir durch "Branding" an, indem wir eigene Farben und Schriften festlegen. Das erfordert die Implementierung des Design-Systems als "App-Theme". Ohne Design-System war es bisher mühsam, Elemente wie Hauptfarben oder Schriftarten genau abzustimmen. Das war sehr aufwändig, weil es nie ganz gepasst hat.

Die Verwendung von Design Tokens ermöglicht eine engere Zusammenarbeit zwischen Experience-Design und Entwicklung, indem sie eine einheitliche Grundlage für die Gestaltung und Implementierung schaffen. Für diese Zusammenarbeit müssen wir zu Beginn eine für das Projekt geeignete Struktur für die Komponenten-Tokens festlegen. Diese Struktur hat Auswirkungen auf die Token-Auszeichnung und sollte für das gesamte Projekt konsistent sein.

Die Spezifikationen für die Token-Struktur können von einfachen Formaten wie (Color ➡️ Action) bis zu ausführlichen wie (System ➡️ Element ➡️ Category ➡️ Concept ➡️ Property ➡️ Variant ➡️ State) ausgebaut und verschieden angeordnet werden. Durch diese Vereinheitlichung wird die Kommunikation zwischen Designern und Entwicklern erleichtert, da alle Beteiligten die gleiche Struktur und Bezeichnung der Tokens verstehen.

Insgesamt führt die Verwendung von Design Tokens zu einer effizienteren und produktiveren Zusammenarbeit zwischen Experience-Design und Entwicklungsteams. Es schafft eine gemeinsame Sprache und Plattform, auf der Designentscheidungen nahtlos in die Entwicklung übertragen werden können.

Dadurch, dass nicht nur Styles für Farben, Formen, Fonts etc. festgelegt werden, sondern insbesondere ihr Einsatz definiert wird, erleichtert das den fortführenden Einsatz für weitere digitale Projekte, ohne auf eine dauerhafte Betreuung durch externe Designer:innen angewiesen zu sein.

Ein Design System mit Tokens anzulegen ist natürlich erst einmal Arbeit. Das Ganze muss mit allen Werten ordentlich angelegt werden. Je umfangreicher das Design System ist und je mehr Designelemente abgedeckt werden sollen, desto mehr Aufwand ist erforderlich, um Design Tokens zu definieren und zu implementieren. Es gibt allerdings auch die Möglichkeit, die Tokens nach und nach zu erweitern und mit dem Design System wachsen zu lassen.

Unter dem Strich bedeutet es, dass es einen gewissen Mehraufwand gibt. Genau deswegen empfehlen wir Token-basierte Design Systeme bei langfristigen Projekten, die kontinuierlich weiterentwickelt werden und Wartung erfordern. Design Tokens können hier den Aufwand über die Zeit hinweg reduzieren und die Skalierbarkeit des Design Systems verbessern.

Die Verknüpfung des Codes mit dem Design System ist theoretisch machbar, aber steckt aktuell noch in den Kinderschuhen, sodass es sich noch nicht effektiv umsetzen lässt. Es lassen sich aber immer wieder Ansätze finden, die genau dies perspektivisch erreichen wollen. Das würde bedeuten, dass es durch die Verbindung des Codes mit den Tokens im Design System automatische Aktualisierungen an allen Stellen, an denen der entsprechende Token verwendet wird, geben würde. Solche Möglichkeiten könnten in Zukunft dafür sorgen, dass unsere Designer:innen sogar Tokens ändern können und das Auswirkungen auf die Entwicklung hat, wäre das die "engste" Zusammenarbeit, die wir je hatten.

In Figma soll es die Möglichkeit geben, Tokens ähnlich wie Design Librarys zu behandeln und diese so zu verknüpfen, sodass händische Anpassungen von Entwickler:innen nicht mehr nötig wären. Das bedeutet im Anwendungsfall, dass eine Anpassung eines Figma Tokens die betroffenen Komponenten in Figma aktualisiert und sich damit die Token-Datei ändert. Dadurch wird der verknüpfte CSS-Code automatisch angepasst und folglich auch das Aussehen der Komponenten auf der Webseite. Diese Funktionalität soll über verschiedene Plugins realisiert werden, die sich mit verschiedenen Diensten synchronisieren, wie beispielsweise JSONBIN, GitHub, GitLab oder Azure DevOps. Allerdings scheint diese Funktionalität momentan noch nicht reibungslos zu funktionieren.

Es gibt außerdem speziell nur für Android-Apps (nicht für iOS) die Möglichkeit, sich Jetpack Compose Komponenten und Themes über das Relay-Plugin von Google generieren zu lassen. Für Web und Flutter (falls wir Flutter nicht im Android Studio entwickeln) gibt es Figma for VS Code, mit dem wir manche Dinge verknüpfen können. Eine Live-Aktualisierung zur Laufzeit von Apps ist damit aber nicht möglich. Diese Verbindung würde die Möglichkeit zur nachträglichen Verfolgung von Versionsänderungen oder die Erstellung von wiederholbaren Entwicklungsversionen beeinträchtigen und die in unserer Arbeitsweise notwendige Dokumentation erschweren.

Update: In dieser schnelllebigen Zeit ist eine Information nach dem Posten direkt schon wieder alt. Dank Franziska sind wir jetzt wieder ein bisschen schlauer, denn sie hat uns auf Tokens Studio hingewiesen. Tokens Studio ermöglicht es Designer:innen, die Tokens aus Figma in JSON auf GitHub zu pushen, wodurch Versionierung möglich wird und Entwickler:innen damit arbeiten können. Obwohl dieser Ansatz einige zusätzliche Schritte mit sich bringt und die Zusammenarbeit etwas komplexer gestaltet, scheint er, wie so oft, besonders bei umfangreichen Projekten und großen Teams äußerst sinnvoll zu sein. Danke nochmals an Franziska! 🙌 Wir schauen da noch einmal genauer drauf. 🕵️‍♀️

Aktuelle Beispiele für Token-basierte Design Systeme findest Du auch bei Adobe, Salesforce und Audi. Sie verwenden bei den Tokens teils unterschiedliche Bezeichnungen und Attribute, doch das Konzept dahinter ist das gleiche.

Diese Ansätze sind für uns natürlich sehr interessant, sodass wir sie im Blick behalten werden, um perspektivisch mehr mit Tokens zu arbeiten.

Du bist ein Unternehmen und möchtest mit uns zusammenarbeiten? Melde Dich gerne!

Du bist ein:e krasse:r Digital-Expert:in und möchtest ein Homie werden? Hier entlang!