Design Tokens

Wir haben entschieden, diese Technologie nicht mehr in unserem Tech-Radar zu führen. Dieser Entscheid ist unabhängig von der Relevanz der Technologie.

Design Tokens bilden die Basis von Design-Systemen. Mit ihrer Hilfe werden Designentscheidungen benannt, gespeichert und verteilt, sodass sie in verschiedenen Design-Tools und Programmiersprachen verwendet werden können. Sie ermöglichen Produkte mit einer konsistenten UI-Sprache für verschiedene Systemen und unter Einbezug vieler Stakeholder zu bauen.

Vorläufer von Design Tokens werden in fast allen unseren Projekten primär im CSS als Variablen abgebildet. Hier unterscheiden wir zwischen Kompilierzeitvariablen (SASS-Variablen) und Laufzeitvariablen (CSS Custom Properties). Viele unsere Projekte sind mandantenfähig. In solchen Systemen sind primär die Laufzeitvariablen interessant, weil sie eine Anpassung des Produkts direkt im Browser und ohne einen Build ermöglichen. Damit wird das Theming eines Produkts vereinfacht.

Obwohl nicht jedes Projekt die nötige Grösse hat, um dazu gleich auch ein Design-System zu bauen, möchten wir in Zukunft noch mehr Erfahrung mit solchen Laufzeitkonfigurationen mithilfe von Design Tokens sammeln. Wo möglich und sinnvoll, im Rahmen eines eigenen oder bestehenden Design-Systems.