Design Tokens: Das Ende des Ping-Pongs zwischen Design und Entwicklung

Was sind Design Tokens?

Design Tokens sind grundlegende Bausteine für konsistentes UI-Design. Hierzu zählen Farben, Schriften, Abstände, Borders usw. Diese werden an einer Stelle in Figma festgelegt und schlussendlich in verschiedenen UI-Komponenten im Code verwendet. Zentral definiert, ermöglichen sie einfache Anpassungen und erleichtern die Einführung neuer Brands durch die Definition neuer Token-Sets.

Figma meets css in 4 steps

Schritt 1: Design-Tokens mit Tokens-Studio

Öffne Figma und hol dir das Figma-Plugin Tokens-Studio. Dort kannst du alle deine Design-Tokens definieren.

Schritt 2: Git-Repository für JSON-Files

Verbinde Tokens-Studio mit einem Git-Repository, damit deine Tokens sicher gespeichert und versioniert werden. Nur auf diese Weise können sie als zuverlässige Quelle für die Transformation zu CSS-Variablen dienen.

json
{
  "colors": {
    "button": {
      "background": {
        "default": { "value": "#3e7fc3" },
        "disabled": { "value": "#b83a3a" },
        "hover": { "value": "#8c564b" }
      },
      "text": {
        "default": { "value": "#ffffff" },
        "disabled": { "value": "#999999" },
        "hover": { "value": "#ffcc00" }
      }
    }
  },
  "radii": {
    "button": {
      "border": {
        "width": { "value": "2px" },
        "style": { "value": "solid" },
        "radius": {
          "default": { "value": "5px" },
          "disabled": { "value": "{radii.none.value}" },
          "hover": { "value": "{radii.sm.value}" }
        }
      }
    }
  },
  "spacing": {
    "button": {
      "padding": {
        "vertical": { "value": "10px" },
        "horizontal": { "value": "20px" }
      }
    }
  }
}

Schritt 3: JSON --> CSS mit Style-Dictionary

Anschliessend verwende Style-Dictionary, um die Tokens von JSON in CSS-Variablen zu verwandeln. Verpacke sie am besten in ein NPM-Package, das automatisiert über deine Build-Pipeline aktualisiert wird. So führen Figma-Anpassungen direkt zu neuen Versionen des CSS-Packages.

css
:root {
  --button-background-default: #3e7fc3;
  --button-background-disabled: #b83a3a;
  --button-background-hover: #8c564b;
  
  --button-text-default: #ffffff;
  --button-text-disabled: #999999;
  --button-text-hover: #ffcc00;

  --button-border-width: 2px;
  --button-border-style: solid;
  --button-border-radius: 5px;
  
  --button-padding-vertical: 10px;
  --button-padding-horizontal: 20px;
}

Schritt 4: Nutze CSS-Variablen in deinen Components

Nun hast du einen riesigen Haufen CSS-Variablen, die du ganz leicht in deinen UI-Komponenten verwenden kannst.

css
.button {
  background-color: var(--button-background-default);
  color: var(--button-text-default);
  border: var(--button-border-width) var(--button-border-style) var(--button-background-default);
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  border-radius: var(--button-border-radius);
}

.button:disabled {
  background-color: var(--button-background-disabled);
  border-color: var(--button-background-disabled);
  color: var(--button-text-disabled);
}

.button:hover {
  background-color: var(--button-background-hover);
  color: var(--button-text-hover);
  border-color: var(--button-background-hover);
}

Design Tokens, ja nein vielleicht?

Ok, das klingt jetzt erstmal alles sehr einfach und positiv und als sei es die perfekte Lösung für alle. Doch ist es das wirklich?

Vorteile 👍

1. Single source of truth in Figma: Sorgt für konsistente und einheitliche UI-Elemente.
2. Technologieagnostisch: Funktioniert unabhängig von spezifischen Technologien und bietet Flexibilität in der Implementierung.
3. Effiziente Zusammenarbeit: Minimiert den Abstimmungsaufwand zwischen Design und Entwicklung.
4. Einfache Integration neuer Brands: Vereinfacht die Integration neuer Marken ohne Entwicklungsengpässe.
5. Automatisierte Aktualisierungen: Aktualisiert Designänderungen automatisch über die Build-Pipeline.

Nachteile 👎

1. UI/UX-Aufwand: Figma-Arbeiten werden aufwändiger.
2. Komplexitätsanstieg: Die Gefahr wachsender Komplexität der Software-Architektur.
3. Lernkurve für Teams: Die Herausforderung bei der Einführung.
4. Tool-Abhängigkeit: Das Risiko, von bestimmten Tools abhängig zu sein.
5. Potenzielle Overhead-Kosten: Anfängliche Investitionen und Ressourcen.

Fazit

«Well, it depends.»

Der Einsatz von Design Tokens hängt stark vom jeweiligen Projekt ab. In kleineren Projekten ist der Einsatz von Design Tokens wohl ein Overkill, da die initiale Einrichtung ziemlich aufwändig ist. Aber in komplexeren Umgebungen ist es durchaus eine sich lohnende Investition.

Dennoch muss man sich bewusst sein, dass es zu einem Engpass im Bereich UI/UX führen kann, da die Entwicklung alleine nicht mehr so flexibel Änderungen vornehmen kann.

Es ist wichtig zu überlegen, wie weit man gehen will. Sollen alle Komponenten tokenisiert werden? Falls ja, wie genau? Bis ins kleinste Detail oder eher oberflächlich mit Fokus auf Farben und Schriften?

Ausserdem können Drittanbieter-CSS-Frameworks einem das Leben erschweren, indem sie das Überschreiben von Styles kompliziert machen. Letztendlich ist es eine Balance zwischen Flexibilität und Komplexität, die im Auge behalten werden muss.

TL;DR
Den kompletten Design-Tokens-Workflow einzurichten dauert und ist gar nicht so einfach. Aber sobald es mal läuft ist es genial! 😍

Das könnte dich interessieren