design toolsJune 30, 20269 min read

Versionskontrollierte Design-Tokens sind jetzt Standardpraxis

Design-Tokens werden heute in Pull Requests geprüft, semantisch verglichen und mit Changelogs ausgeliefert, genau wie Code, den Entwickler plattformübergreifend shippen.

By Boone
XLinkedIn
design tokens version controlled

Ein Design-Token ist längst kein Wert mehr, den man exportiert und vergisst. Er ist eine versionierte Produktänderung, die einen Branch, einen Pull Request, eine Review und ein Changelog durchläuft, genau wie Code, den Entwickler ausliefern. Aus dem stillen Wandel wurde ein lauter, als Designer:innen begannen, echte Pull Requests für Palettenänderungen zu posten: Ein Farb-Token wurde geändert, in einem PR geprüft, genehmigt, gemerged und mit einem Changelog-Eintrag veröffentlicht.

Der Grund, warum das wichtig ist, ist mechanisch, nicht ästhetisch. Wenn sich ein Token ändert, kann sich das auf jede Plattform und jedes Produkt auswirken, das ihn ausliest, weshalb eine ungeprüfte Farbänderung heute eine Produktionsänderung ist. Das ist die ganze Geschichte, der Rest dieses Artikels erklärt, wie es funktioniert und ob man es wirklich braucht.

Was „versionskontrollierte Tokens" wirklich bedeutet

Es bedeutet, dass deine Tokens in einem Repository liegen, nicht nur in einer Figma-Datei. Die Werte für Farbe, Abstand, Typografie, Radius und Bewegung werden als strukturierte Daten gespeichert, die ein Versionskontrollsystem zeilengenau nachverfolgen kann.

Der Auslöser dafür ist Tokens Studio. Mit Tokens Studio bearbeitest du Tokens direkt in Figma und synchronisierst diesen Token-Satz anschließend mit einem GitHub-Repository. Sobald deine Tokens in einem Repo liegen, wird jede Änderung zu einem Commit, jeder Änderungsvorschlag zu einem Pull Request und jedes Release zu einer getaggten Version mit einer nachlesbaren Historie.

Tokens Studio, „Design-Systeme, vollständig automatisiert", das Tool, das deine Figma-Tokens mit einem GitHub-Repository synchronisiert, sodass jede Änderung zu einem überprüfbaren Commit wird.
Tokens Studio, „Design-Systeme, vollständig automatisiert", das Tool, das deine Figma-Tokens mit einem GitHub-Repository synchronisiert, sodass jede Änderung zu einem überprüfbaren Commit wird.

„Versionskontrollierte Tokens" sind also keine Metapher. Es ist die buchstäbliche Praxis, Designentscheidungen demselben Git-Workflow zu unterwerfen, den GitHub Entwicklern bietet, und sich dabei die dazugehörigen Sicherheitsnetze zu leihen: Branches, die Arbeit isolieren, Reviews, die Fehler abfangen, und ein Changelog, damit niemand raten muss, was sich verändert hat.

Der Wandel: Eine Token-Änderung ist jetzt eine Produktionsänderung

Hier kommt der Teil, der alles neu einordnet. Ein Token ist per Definition geteilt. Der ganze Grund, warum du color.brand.primary zu einem Token gemacht hast, statt eines über alle Screens verstreuten Hex-Werts, war, dass eine einzige Änderung jeden Ort aktualisiert, der ihn verwendet.

Genau diese Superkraft ist auch das Risiko. In dem Moment, in dem du dieses Token bearbeitest, schlägst du eine Änderung für jeden Button, jeden Link, jedes Badge und jeden Zustand über Web, iOS und Android hinweg vor. Es gibt kein „nur für diesen einen Screen". Style Dictionary, der Build-Schritt, den die meisten Teams mit ihren Tokens kombinieren, kompiliert den zusammengeführten Token-Satz für jede Plattform, sodass eine einzelne Änderung zu einem plattformübergreifenden Release wird.

Eine Token-Quelle, die für jede Plattform kompiliert wird: Style Dictionary verwandelt einen einzigen zusammengeführten Token-Satz in Web-, iOS- und Android-Output, sodass eine Änderung zu einem plattformübergreifenden Release wird.
Eine Token-Quelle, die für jede Plattform kompiliert wird: Style Dictionary verwandelt einen einzigen zusammengeführten Token-Satz in Web-, iOS- und Android-Output, sodass eine Änderung zu einem plattformübergreifenden Release wird.

Behandelst du das wie ein beiläufiges Speichern, hast du eine ungetestete Produktionsänderung über deine gesamte Oberfläche ausgerollt. Behandelst du es wie Code, bekommst du eine Review, bevor irgendetwas live geht.

Das Versionskontroll-Playbook, übertragen auf Tokens

Das ist die Tabelle, die sich zu merken lohnt. Jede Praxis, die Entwickler nutzen, um Code sicher auszuliefern, hat jetzt eine saubere Entsprechung bei Design-Tokens.

Software-PraxisToken-Äquivalent
BranchEine Arbeitskopie des Token-Satzes, in der du eine Palette bearbeitest, ohne die Produktion anzufassen
Pull RequestDie vorgeschlagene Token-Änderung, zur Review geöffnet, bevor sie gemerged wird
Code ReviewEine Design-Systems-Leitung, die die Farbe, den Abstand oder die Typo-Änderung samt ihrem Wirkungsradius genehmigt
Semantic VersionDas Hochzählen des Token-Releases, damit Konsumenten wissen, ob es sich um einen Patch, ein Minor- oder ein Breaking-Update handelt
ChangelogDas menschenlesbare Protokoll dessen, was sich geändert hat, warum, und welche Plattformen betroffen sind
Continuous IntegrationStyle Dictionary, das die zusammengeführten Tokens beim Merge automatisch für Web, iOS und Android kompiliert

Diese Zuordnung ist kein nettes Gimmick. Jede Zeile löst einen echten Fehlerfall.

Branches verhindern, dass halbfertige Paletten-Experimente in die Produktion durchsickern. Reviews fangen das Problem „ich habe die Markenfarbe abgedunkelt und damit den Kontrast bei drei Zuständen kaputtgemacht" ab, bevor Nutzer es zu sehen bekommen. Semantic Versioning sagt den App-Teams, ob sie dein Update an einem Freitag ziehen können oder es einplanen müssen.

GitHub, die Versionskontroll-Basis, auf der Tokens jetzt aufsetzen, wo Branches, Pull Requests, Reviews, Releases und Changelogs bereits von jedem Engineering-Team kampferprobt sind.
GitHub, die Versionskontroll-Basis, auf der Tokens jetzt aufsetzen, wo Branches, Pull Requests, Reviews, Releases und Changelogs bereits von jedem Engineering-Team kampferprobt sind.

Wie ein semantischer Diff einer Palette aussieht

Ein semantischer Diff zeigt, was eine Token-Änderung tatsächlich bedeutet, nicht nur, welche Zeichen sich verschoben haben. Ein roher Git-Diff sagt dir, dass aus #ff6b3d #ff6434 wurde. Ein semantischer Diff sagt dir, dass die primäre Markenfarbe leicht gesättigter geworden ist, dass davon jetzt 14 Komponenten betroffen sind und dass der neue Wert beim deaktivierten Zustand unter deinen Kontrast-Schwellenwert fällt.

Eine Token-Änderung als überprüfbarer Pull Request: der alte Wert entfernt, der neue Wert hinzugefügt, und ein cyanfarbener Haken, wenn ein Reviewer den Diff vor dem Merge genehmigt.
Eine Token-Änderung als überprüfbarer Pull Request: der alte Wert entfernt, der neue Wert hinzugefügt, und ein cyanfarbener Haken, wenn ein Reviewer den Diff vor dem Merge genehmigt.

In der Praxis wird der Pull Request zur Review-Oberfläche. Die alte Farbe steht links, die neue rechts, die geänderten Eigenschaften sind aufgelistet, und ein Reviewer genehmigt oder fordert Änderungen an. Das ist die ganze Zeremonie, und es ist genau die Routine, die ein Code-Reviewer ohnehin schon beherrscht.

Der Wert liegt darin, dass eine Farbentscheidung nicht mehr unsichtbar bleibt. Vor diesem Workflow passierten Paletten-Änderungen in einer Figma-Datei, wurden exportiert und landeten ohne jede Aufzeichnung, wer was entschieden hatte, in der Produktion. Jetzt hat die Entscheidung einen Autor, einen Reviewer, einen Zeitstempel und einen Grund. Wenn in drei Wochen etwas falsch aussieht, liest du das Changelog, statt das Team zu verhören.

Warum das gerade jetzt passiert

Drei Dinge sind zusammengekommen:

  • Tokens Studio hat den Hin- und Rückweg zwischen Figma und GitHub praxistauglich gemacht, sodass Designer:innen keinen Entwickler mehr brauchen, um Tokens in ein Repo zu bringen.
  • Style Dictionary ist als Build-Layer gereift, der aus einer Token-Quelle plattformspezifischen Output macht, wodurch ein Merge zu einem echten Release wird.
  • GitHub war schon immer als Basis da, mit Branches, Pull Requests, Reviews, Releases und Changelogs, die bereits von jedem Engineering-Team auf der Welt kampferprobt sind.

Der andere Treiber ist Skalierung. Plattformen wie Supernova haben das Management und die Verteilung von Tokens über mehrere Produkte hinweg zu einem Produkt gemacht, also zu der Art von Tool, zu dem man nur greift, wenn die eigene Palette mehr als eine App speist. Sobald ein Token-Satz Web plus zwei native Apps plus eine Marketing-Site bedient, ist „ich habe die Figma-Datei bearbeitet" kein sicherer Satz mehr.

Der Wandel ist also weniger eine Erfindung als eine Kollision. Designer:innen bekamen Tools, die Git sprechen, Design-Systeme wurden groß genug, um es zu brauchen, und die Engineering-Praktiken hatten sich längst bewährt. Die viral gegangenen Pull Requests haben die Veränderung nur für alle sichtbar gemacht, die sie noch nicht bemerkt hatten.

Das ehrliche Gegenargument (Design-Ops-Theater ist real)

Die meisten Teams brauchen die volle Git-Flow-Zeremonie für ihre Palette nicht. Wenn du ein Drei-Personen-Studio bist, das ein einziges Produkt ausliefert, dann ist es Prozess-Kostüm, jede Farbänderung in einen Branch, einen Pull Request, zwei Genehmigungen und ein Semantic-Version-Update zu verpacken. Du bezahlst Engineering-Overhead, um dich gegen einen Wirkungsradius abzusichern, den du gar nicht hast.

Design-Ops-Theater ist ein echter Fehlerfall. Es sieht nach Fortschritt aus, weil es Artefakte produziert: PRs, Changelogs, Review-Warteschlangen, Status-Labels. Aber Artefakte sind keine Ergebnisse. Wenn deine Token-Änderung ein einziges Produkt betrifft, das eine Person verantwortet, dann ist die Review du, der dich selbst prüfst, und das Changelog ein Tagebuch, das du für ein Publikum von einer Person führst.

Der Overhead ist auf beiden Seiten real. Versionskontrolle gibt Tokens echte Sicherheit, und sie verleitet gleichzeitig Teams, die sie eigentlich nicht brauchen, dazu, Prozess statt Produkt auszuliefern. Die Falle ist, das Ritual zu übernehmen, weil es seriös aussieht, und sich danach zu fragen, warum einfache Farbänderungen jetzt zwei Tage dauern.

So bringst du deine Tokens unter Versionskontrolle

Fang mit der Entscheidung an, nicht mit dem Tooling. Versioniere die Tokens, die an mehr als einen Ort ausgeliefert werden und bei Änderung etwas kaputt machen können. Den Rest lässt du in Figma, wo er hingehört.

Überschreitest du diese Grenze, ist das Setup kurz:

  1. Verschiebe deinen Token-Satz in Tokens Studio innerhalb von Figma, damit die Werte strukturierte Daten sind, keine losen Styles.
  2. Synchronisiere diesen Satz mit einem GitHub-Repository. Jetzt ist jede Änderung ein Commit und jeder Vorschlag ein Pull Request.
  3. Füge Style Dictionary als Build-Schritt hinzu, damit ein Merge die Tokens automatisch für Web, iOS und Android kompiliert.
  4. Lege deine Review-Regel fest. Wer eine Token-Änderung genehmigen muss, bevor sie gemerged wird, und was als Breaking Change zählt.
  5. Schreib das Changelog fortlaufend mit. Eine Zeile pro Änderung: was sich verändert hat, warum, welche Plattformen betroffen sind.

Wenn du die selbstgebaute Version irgendwann hinter dir lässt, verwaltet und verteilt eine Plattform wie Supernova Tokens über Produkte hinweg, sodass du die Pipeline nicht mehr von Hand betreuen musst. Greif darauf zurück, wenn die Anzahl der konsumierenden Produkte, nicht die Anzahl der Designer:innen, die manuelle Verteilung schmerzhaft macht.

Supernovas Design-Token-Manager, eine echte Tabelle semantischer Farb-Tokens mit Werten, Dark-Varianten und CSS-Variablennamen, das produktisierte Ende versionierter Tokens über mehrere Produkte hinweg.
Supernovas Design-Token-Manager, eine echte Tabelle semantischer Farb-Tokens mit Werten, Dark-Varianten und CSS-Variablennamen, das produktisierte Ende versionierter Tokens über mehrere Produkte hinweg.

Nutze diese Regel, um zu bestimmen, wo jedes Token hingehört.

SituationWo das Token leben sollte
Speist ein Produkt, einen Owner, geringer WirkungsradiusFigma, keine PR-Zeremonie nötig
Speist mehrere Plattformen oder ProdukteRepository, mit Review und Changelog
Änderung kann Kontrast, Layout oder Marke kaputtmachenRepository, mit verpflichtender Genehmigung
Experimentell oder lokal auf einen Screen begrenztFigma, nicht versionieren

FAQ

Brauchen kleine Teams versionskontrollierte Tokens?

In der Regel nicht. Wenn deine Tokens ein einziges Produkt speisen, das eine Person verantwortet, ist die Review du, der seine eigene Änderung genehmigt, und das Changelog ein Tagebuch. Führ es ein, sobald eine Token-Änderung etwas für jemanden kaputtmachen kann, der nicht im Raum ist.

Was ist der Unterschied zwischen Tokens Studio und Style Dictionary?

Tokens Studio ist der Ort, an dem du Tokens bearbeitest und synchronisierst, indem du Figma mit einem GitHub-Repository verbindest, sodass Änderungen zu Pull Requests werden. Style Dictionary ist der Build-Schritt, der die zusammengeführten Tokens für jede Plattform kompiliert. Das eine übernimmt Erstellung und Review, das andere die Verteilung.

Kann man Tokens auch ohne GitHub versionieren?

Du kannst jeden beliebigen Versionskontroll-Host nutzen, aber GitHub ist die gängige Basis, weil Branches, Pull Requests, Reviews, Releases und Changelogs dort bereits ausgereift sind. Die Praxis zählt mehr als die Marke. Was du brauchst, ist ein Ort, an dem eine Token-Änderung zu einem überprüfbaren, dokumentierten Ereignis wird.

Was ist ein semantischer Diff für ein Design-Token?

Es ist eine Ansicht dessen, was eine Token-Änderung bedeutet, nicht nur, welche Zeichen sich geändert haben. Statt zu zeigen, dass ein Hex-Wert zu einem anderen wurde, zeigt er die alte Farbe neben der neuen, welche Komponenten betroffen sind und ob die Änderung einen Schwellenwert wie den Kontrast überschreitet. Das macht eine Farbentscheidung überprüfbar.

Ersetzt das die Einschätzung meiner Designerin oder meines Designers?

Nein. Es dokumentiert und überprüft die Einschätzung, statt sie unsichtbar zu lassen. Der Workflow entscheidet nicht, ob die neue Markenfarbe richtig ist, er stellt nur sicher, dass ein Mensch sie genehmigt hat und ein Changelog erklärt, warum, bevor sie auf jeder Plattform ausgeliefert wird.

Das Fazit (versioniere, was ausgeliefert wird)

Der Wandel ist real. Tokens Studio, Style Dictionary und GitHub haben das Design-Token gemeinsam von einem statischen Export in eine versionierte Produktänderung mit Branches, Reviews, semantischen Diffs und einem Changelog verwandelt. Wenn eine einzige Änderung gleichzeitig auf jeder Plattform live gehen kann, verdient sie dieselben Sicherheitsnetze, die Entwickler längst nutzen.

Die Disziplin besteht darin, zu wissen, wo die Grenze liegt. Versioniere die Tokens, die plattformübergreifend ausgeliefert werden und bei Änderung etwas kaputtmachen können. Lass den Rest in Figma und widersteh dem Drang, eine Farbänderung mit einem einzigen Owner in einen Pull Request mit zwei Genehmigungen zu verpacken.

Need a design system that ships across platforms without breaking? Brainy builds them.

Get Started

More from Brainy Papers

Keep reading