Design Tokens in Figma – Ein wertvolles Tool für konsistentes Design

Figma ist eines der bekanntesten und meistgenutzten Tools für UX- und UI-Designer. In der rasanten Entwicklung dieses Tools gehen jedoch einige coole Funktionen oft unter. Besonders, wenn man bereits mit einem etablierten Designsystem arbeitet, kann es eine Herausforderung sein, neue Features zu integrieren. Eine dieser äußerst nützlichen Funktionen sind Design Tokens. Doch was genau sind Design Tokens, wie setzt man sie sinnvoll ein und warum sollte man sie in einem modernen Designprozess verwenden?

Was sind Design Tokens?

Design Tokens sind Variablen, die in Figma hinterlegt werden, um sie an verschiedenen Stellen innerhalb eines Designs zu verwenden. Sie bieten eine einfache Möglichkeit, Designentscheidungen wie Farben, Abstände, Schriftgrößen und vieles mehr konsistent zu halten. Besonders wichtig sind sie, wenn du eine Corporate Identity (CI) entwickeln oder bereits etabliert hast. Das Tolle an Design Tokens ist, dass sie dabei helfen, Designkonformität in großen Teams oder bei der Arbeit an umfangreichen Projekten zu wahren. Sie stellen sicher, dass alle Design-Elemente in einem Figma-File mit denselben, vordefinierten Werten verwendet werden – ideal, um die Einheitlichkeit in einem Design zu gewährleisten.

Besonders nützlich sind Design Tokens in diesen Bereichen:

• Colors and Color Modes
• Border Radius
• Border Widths
• Font Sizes
• Font Widths &
• Spacings

Wie legt man Design Tokens an?

Der erste Schritt, um Design Tokens zu erstellen, beginnt mit Primitives. Primitives sind die grundlegenden Designwerte, aus denen die Design Tokens später gebildet werden. Zum Beispiel könnten Primitives Farben in Hex-Codes sein, die mit einem beschreibenden Namen versehen sind. Nehmen wir an, du arbeitest mit einer Farbpalette, die Blau- und Grüntöne verwendet, sowie unterschiedliche Grauabstufungen. Deine Primitives könnten dann so aussehen:

Figma bietet die Möglichkeit mehrere Collections anzulegen, die man inhaltlich weiter gruppieren kann. In diesem Fall sind Primitives eine eigene Collection, die wiederum in color, border, spacings, font und box-shadow unterteilt ist. Das ist aber lediglich eine mögliche Idee, wie man Primitives einteilen kann.

Diese Primitives dienen als Grundlage. Daraus entstehen dann Design Tokens, die speziell für bestimmte Zwecke verwendet werden. Design Tokens sind also die spezifizierten Werte, die du für konkrete Design-Elemente benötigst.

Ein Beispiel: Du hast eine Farbe, die für UI Oberflächen verwendet werden soll. Dies könnte das Design Token „background” nutzen, dem ein passendes Primitive zugewiesen wird.

Für ein Modal, das etwas heller sein soll als der Hintergrund der gesamten Anwendung, könnte dann der Design Token ,,background-subtle” verwendet werden. Für andere Komponenten können ebenso spezifische Design Tokens definieren und vergeben werden.

Die Nutzung von Design Tokens ist denkbar einfach. Über die vier Kreise in der Designleiste gelangt man zu der eigenen Design Library, die alle Tokens enthält.

Color Modes mit Design Tokens

Dark und Light Mode

Einer der größten Vorteile von Design Tokens zeigt sich, wenn man zwischen verschiedenen Design-Modi, wie Dark Mode und Light Mode, wechseln musst. Das ist insbesondere dann Interessant, wenn man das Thema Accessability miteinbezieht. Für eine gute Barrierefreiheit im Web kann es sinnvoll sein neben einem Light Mode, ebenso einen Dark Mode oder einen High Contrast Mode einzuführen.

In einem gut strukturierten Design System kannst man dann für jeden Design Token eine zusätzliche Spalte für den jeweiligen Modus hinzufügen. So kannst du Farben oder andere Designwerte anpassen, ohne das gesamte System neu definieren zu müssen.

Sind nun alle Tokens für sowohl Light, als auch Dark Mode gesetzt, können die Design Elemente mit wenigen klicks die Modis übernehmen.

So einfach geht’s:

• Klicke auf das Element, dessen Farbschema geändert werden soll
• Gehe auf “Appearance” und wähle „Apply variable mode“ aus
• Wähle den gewünschten Farbmodus (z.B. Light oder Dark Mode)

Voilà! Deine UI passt sich automatisch an. Ein extrem effektives Werkzeug, um flexible Designs für verschiedene Darstellungsmodi mit wenigen Klicks zu erstellen.

Responsive Design Tokens

Mobile vs. Desktop

Design Tokens helfen nicht nur bei der Umstellung zwischen verschiedenen Modi, sondern auch bei der Anpassung von Designs auf unterschiedliche Geräte. Bei der Arbeit mit Design Tokens kannst du den Übergang zwischen der mobilen und der Desktop-Version eines Designs nahezu mühelos gestalten.

Primär handelt es sich dabei um die Schriftgrößen und Abstände. Diese beiden Dinge müssen meistens bei einem Switch von Desktop zu Mobile mitbedacht werden. Das gute daran: Diese lassen sich in Design Tokens genauso anpassen genau wie Farben für den Dark- oder Light Mode.

Beispiel: Nehmen wir an, du hast für die Schriftgrößen zwei Design Tokens, eine für Desktop und eine für Mobile:

Nun kann man im Design ganz einfach zwischen den verschiedenen Größen für Desktop und Mobile wechseln, indem man in den Appearance-Einstellungen auf „Typography“ geht und den Mobile-Modus auswählt.

Das Gleiche gilt für Spacings. Auch hier kannst du verschiedene Werte für Desktop und Mobile hinterlegen und bei Bedarf zwischen den Versionen umschalten.

So wie auch bei den Color Modes können diese Design Tokens bei den entsprechenden Screens über die Designleiste Appearance -> Apply variable mode hinzugefügt werden.

Design Tokens und ihre Grenzen

Auch wenn Design Tokens unglaublich nützlich sind, haben sie ihre Grenzen. Sie sind eine sehr einfache Methode, um grundlegende Designwerte zu speichern und anzuwenden, jedoch können sie in Figma keine komplexeren Design-Eigenschaften wie Schatten oder Schriftarten in ihrer vollen Komplexität abbilden.

Ein Schatten in Figma benötigt separate Werte für die X- und Y-Achse, den Blur-Effekt, die Spread-Eigenschaft und die Farbe. Ebenso wie eine Schriftart mehrere Tokens für die Schriftfamilie, Gewicht und Größe braucht. Figma bietet derzeit keine Möglichkeit, all diese Eigenschaften als einzelnes Token zu definieren, aber du kannst diese Werte als Local Styles in deinem Figma-Design dokumentieren:

Ob Figma in Zukunft erweiterte Funktionen für Design Tokens bieten wird, bleibt abzuwarten. Für den Moment ist es jedoch eine sehr effektive Methode, um grundlegende Designentscheidungen zu strukturieren.

Fazit

Design Tokens bieten eine unglaublich mächtige Möglichkeit, konsistente und skalierbare Designs zu erstellen. Wenn du einmal eine saubere Grundstruktur aufgebaut hast, eröffnen sie dir eine völlig neue Dimension in der Arbeit mit Figma.

Die schnelle und einfache Anpassung von Farben, Schriftgrößen, Abständen und anderen Designelementen für verschiedene Modi und Geräte ist ein Game-Changer, der dir viel Zeit und Aufwand spart. Figma entwickelt sich kontinuierlich weiter, und mit Design Tokens hast du ein Tool an der Hand, das dir hilft, deine Designs noch effizienter und flexibler zu gestalten.

Figma wird immer mehr zu einem unverzichtbaren Tool für Designer, und Design Tokens spielen dabei eine zentrale Rolle. Bist du bereit, dein Design auf das nächste Level zu heben?