Die Power von Design Tokens in Figma - eine Single Source of Truth für Design Systeme
Wieso Unternehmen in Zukunft für schnellere Prozesse Design Tokens nutzen sollten, Entwickler und Designer glücklich machen und überflüssige Sync Meetings sparen.
artikel teilen
.svg)
.svg)
.svg)
Veröffentlicht am
February 23, 2023
Autor
Nadia Wiegand
UX + UI Designerin
Was sind Design Tokens?
Designtoken sind die visuellen Designatome des Designsystems – genauer gesagt sind sie benannte Entitäten, die visuelle Designattribute speichern. Wir verwenden sie anstelle von hartcodierten Werten (z. B. Hex-Werten für Farben oder Pixelwerten für Abstände), um ein skalierbares und konsistentes visuelles System für die UI-Entwicklung aufrechtzuerhalten. Salesforce, Lightning-Design-System
Design Token sind ein leistungsfähiges Tool in Figma für alle Unternehmen, die ein konsistentes, einheitliches Designsystem schaffen wollen. Einfach ausgedrückt, sind Design Token standardisierte Values und Properties, die die Eigenschaften von Design Elements wie Fontsize, Colors, Boarder Radius, Spacing und Animations definieren.
Diese Token können projekt- und plattformübergreifend verwendet werden und sorgen für Konsistenz bei allen Produkten und Dienstleistungen des Unternehmens.
Warum Design-Token für ein Design System verwenden?
Design Tokens sind für jedes Unternehmen, das ein einheitliches Designsystem in Figma aufbauen möchte, unerlässlich. Sie ermöglichen es Designern und Entwicklern, Interface Komponenten zu erstellen, die über mehrere Projekte, Plattformen sowie Design und Development Teams hinweg funktionieren.
Diese Konsistenz führt zu einem reibungslosen Benutzererlebnis, schnelleren Entwicklungszyklen und weniger kostspieligen Fehlern.
Design Tokens: die Magie entfesseln
Designsysteme umfassen hunderte von Atoms und Elemente. Wenn Unternehmen mehrere Teams haben, die an und mit einem Designsystem arbeiten, ist es wichtig, dass alle dieselbe Sprache sprechen.
Naming Conventions in Designsystemen
Die größte Herausforderung bei Designsystemen ist, dass das Design und der implementierte Code unterschiedliche Benennungen für UI-Components und Values aufweist.
Ein einfaches Beispiel ist diese Component
Benennungen sind nicht nur in unserem Alltag wichtig. Wie wäre es, wenn jeder sich selbst aussuchen könnte, wie wir die Banane nennen? Du fragst nach einer Banane, und bekommst alles, außer einer Banane.
Ohne sich darauf zu einigen, welcher Begriff für welches Ding steht, können wir nicht kommunizieren. Dasselbe gilt für UI-Components.
Wie würdest du die Component benennen? Ist es ein Banner, eine Message oder ein Alert?
Naming Pinciple 1: Logische Benennung
Gute Namen sind einfach zu verstehen. Die Benennung orientiert sich logisch an dem Objekt.
Naming Pinciple 2: Simple Bennennung
Wenn Benennungen komplex werden und nicht einfach gehalten werden können, läuft vermutlich etwas falsch. Entweder gibt es die Component bereits in anderer Form oder dir Component ist nicht generisch genug.
Naming Pinciple 3: Skalierbare Bennennung
Wenn klar ist, dass Components skalieren, sollte eine ebenso skalierbare Benennung genutzt werden. Ein Beispiel für größen ist xs, sm, md, lg, xl, xxl, 3xl und soweiter. Nicht gut wäre, SpacingKlein, SpacingKleiner, SpacingKleinerer, SpacingKleinester
Naming Pinciple 4: Standarisierte Bennennung
Jeder Skateholder muss verstehen, welche Bennenung für was steht. Designer, Developer, QA, PO, Analysten etc. sollten immer wissen, um welche Component es sich handelt, über die gesprochen wird.
Naming Semantic für Design Tokens
Um ein Token korrekt zu benennen, werden die Informationen eines Elements in 4 Bereiche aufgeteilt:
Design Components in Figma benennen
Wenn wir Farben in einem Designsystem nutzen, benennen wir die Tokens nicht mehr nach dem, was sie sind (Grün500), sondern nach dem, für das sie genutzt werden.
Durch die direkte Verknüpfung von Farbe und Verwendung kann ein Designsystem von mehreren Designern sauber gepflegt werden, ohne dass bei jedem Element nach Referenzen geschaut werden muss, oder gar „einfach irgendeine Farbe“ genutzt wird.
Das Plug-In Tokens Studio for Figma
Jan Six, ein Product Designer bei GitHub, hat bereits mehrere Plug-Ins für Figma entwickelt. Neben Batch Styler und Auto Grid hat er das revolutionäre Plug-In Tokens Studio for Figma entwickelt, das die Lücke zwischen den nativen Figma Stylings und weiteren standatisierten Werten für Designsysteme ermöglicht.
Die Vorteile des Plug-Ins
Mit dem Plug-In lassen sich schnell und einfach Values und Properties für Components erstellen, die nicht nur von Designern genutzt werden können, sondern ebenso von Developern. Durch eine einheitliche Naming Convention und einen nahezu identischen Aufbau von Components im Design und der Entwicklung, spart das ei der Frontend eine Menge Zeit. Developer müssen nicht mehr für jede Komponente einen Wert manuell eingeben, sondern können stattdessen die in Figma erstellten Token verwenden.
Eine Single Source of Truth
Design Values die global für ein Designsystem verwendet werden, können durch das Plug-In als JSON File exportiert und synchronisiert werden, um Designvorgaben nutzen zu können.
Synchronisiert werden kann über:
- Lokaler Speicher (Standard)
- JSONBin.io
- URL
- GitHub
- GitLab
- Azure-DevOps
- Allgemeiner versionierter Speicher
Intelligentes Referenzieren
Durch das Erstellen von semantischen Design-Token kann auf andere Token im JSON File verwiesen werden. Auf diese Weise können Themes erstellt werden, die von einem globalen Set anderer Token abhängig sind.
Ein Beispiel ist hier der Light- und Dark Mode, der in der händischen Anpassung viel Zeit benötigt, mit dem Plug-In und dem semantischen Aufbau einfach zu verwalten ist.
Mathematik für Tokenwerte nutzen
Um Token Values mit einer bestimmten Skala zu multiplizieren, auf Zahlen zu runden oder ein Spacing Pattern zu erstellen, kann direkt innerhalb des Plug-Ins multipliziert, dividiert, addiert oder subtrahiert werden. So können Designentscheidungen dynamisch getroffen werden.
Token für Radien/Abstände etc
Die Erstellung von systematischen Design Values sind mit den Figma Boardmitteln auf Colors, Fonts und Effekte wie z.B. Dropshadows beschränkt.
Weitere Designeigenschaften wie Radien, Strokewidths, Spacings bei Autolayout, und Größenanpassungen können über das Plug-In festgelegt werden, und für alle Atoms eines Designsystems wiederverwendet werden.
Installation des Plug-Ins
Das Plug-In für Figma kann hier installiert werden. Alternativ sucht ihr nach "Tokens Studio" in der Figma Community. Über "get started" könnt ihr euch alle Features ansehen und loslegen.
Dokumentation des Funktionsumfangs
Die umfangreiche Dokumentation des Plug-Ins für Designer und Developer kann hier eingesehen werden.
Tokens für Designer und Developer Synchonisieren
Die definierten Design Tokens können über mehrere Optionen synchronisiert werden.
Lokaler Speicher
Alle Token aus dem Plug-In werden standardmäßig in dem Dokument gespeichert, in dem gearbeitet wird. Diese Lösung funktioniert gut, allerdings nur so lang, bis die Token in mehreren Dokumenten verwendet werden müssen. Dann müssen alle Token kopiert und in dem anderen Dokument eingefügt werden.
JSONBin.io
Wer ein Konto bei JSONBin.io hat, kann hier alle Token synchronisieren. Diese Option ist kostenlos und in der Handhabung eine einfache Möglichkeit, um die Token zu synchronisieren. Der Nachteil ist, dass die Token nicht standardmäßig versioniert werden.
URL
Die Token können auf einem auf dem eigenen Server gespeicherten Remote .json File abgespeichert werden. Diese Synchronisierungsmethode ist schreibgeschützt.
GitHub
Das synchronisieren mit dem GitHub ist die vom Plug-In Entwickler empfohlene Methode. Über das Herstellen einer Verbindung mit dem Repository, können Token gepullt und gepusht werden. Es kann ebenfalls ein Branch ausgewählt werden, in das gepusht werden soll, wodurch Design Decisions zunächst überprüft und untersucht werden können, bevor sie in die Production gepusht werden.
GitLab
Für das GitLab gilt das selbe wie beim GitHub. Stelle eine Verbindung mit dem Repositiory her, sodass Tokens gepusht und gepullt werden können. Auch das Branching für die Untersuchung der Tokens am "lebendenen Herzen" ist möglich.
Azure-DevOps
Diese Option ermöglicht es, Token auf ADO zu speichern.
Allgemeiner versionierter Speicher
Hier wird ein Read-Only-, Write-Only und Read-Write-Create-Flow unterstützt.
BitBucket
BitBucket wird aktuell noch nicht unterstützt, es ist aber geplant, dies zu integrieren.
Diese Arbeiten könnten dich interessieren
Neues Designsystem in Figma für Deichmann
.webp)
Bist du bereit, neue Maßstäbe zu setzen?
Dann lass uns sprechen.
