TheWhiteCode

Die Datei heißt buttons-final-v3.fig, sie ist 41 MB groß, und sie enthält vierzehn Varianten eines Buttons. Vierzehn. Ich habe sie gezählt, weil ich eine davon brauchte und danach zwei Stunden damit verbracht habe, die richtige zu finden.

Im Code gibt es drei. Nicht, weil jemand aufgeräumt hat, sondern weil die anderen elf niemand importiert hat. Sie existieren in Figma, sie haben Namen wie „Primary / Hover / Large / Icon+“, und sie sind für niemanden erreichbar.

Ein Designsystem, das nur in Figma existiert, ist eine Bildergalerie. Sie wird bewundert, sie wird verlinkt, sie wird nicht benutzt. Der Unterschied ist messbar, und ich habe angefangen zu messen.

Vierzehn Buttons und ein Token namens --blue-2

--blue-2 ist der vierte Blauton in unserer Palette, und er existiert, weil --blue schon belegt war und --blue-1 niemand mehr findet. Der Name beschreibt die Position in einer Liste, die nur in dem Kopf der Person existiert, die sie angelegt hat.

Token-Namen sind eine Oberfläche. Diese Oberfläche ist bei uns kaputt, und sie ist kaputter als jeder Button, weil jeder Button irgendwann importiert wird und jedes Token irgendwann gelesen. --blue-2 sagt nichts. --color-action-default sagt, wofür es da ist, und man kann es morgens um neun lesen, ohne nachzudenken.

Wie viel davon im Code ankommt

Die Badge ist die einzige Komponente mit vollständiger Nutzung, und das liegt nicht an ihrer Qualität. Sie hat zwei Props, sie ist in zwanzig Minuten geschrieben worden, und sie wurde von jemandem gebaut, der gefragt hat, bevor er etwas Neues angefangen hat.

Gezählt habe ich mit einem Skript, das in den Komponenten-Verzeichnissen nach <Button sucht und die Treffer nach Datei gruppiert. 340 Treffer, elf Kopien, drei Importe. Das Skript hat zwanzig Minuten gebraucht und war in der anschließenden Diskussion überzeugender als jedes Argument, das ich hätte formulieren können.

Die elf Button-Kopien sind der eigentliche Bestand. Sie sehen zu 90 Prozent gleich aus, und die 10 Prozent sind der Grund, warum niemand sie zusammenführt: Eine hat einen anderen Fokus-Ring, eine hat andere Innenabstände, eine hat einen Ladezustand, den die Komponente nicht hat. Jede Kopie ist eine Entscheidung, die jemand einmal getroffen hat, ohne sie aufzuschreiben.

Warum Leute kopieren statt importieren

Drei Gründe, in der Reihenfolge, in der ich sie gehört habe. Erstens: „Die Komponente kann nicht, was ich brauche.“ Zweitens: „Ich wusste nicht, dass es sie gibt.“ Drittens: „Der Import hat bei mir nicht funktioniert und ich hatte keine Zeit.“

Der erste Grund ist ein Feature-Request und ein gutes Zeichen: Jemand benutzt das System und stößt an eine Grenze. Der zweite ist Dokumentation, und Dokumentation ist bei uns eine Confluence-Seite, die zuletzt vor sieben Monaten aktualisiert wurde. Der dritte ist ein Build-Problem, das seit vier Monaten offen ist und das niemand als Designsystem-Problem zählt, obwohl es das einzige ist, das zählt.

Es gibt einen vierten Grund, den niemand laut sagt: Kopieren ist schneller, wenn du eine Abweichung willst. Ein Designsystem, das jede Abweichung verbietet, wird umgangen. Eines, das Abweichungen erlaubt und sichtbar macht, wird benutzt. Der Unterschied ist nicht Strenge, sondern Reibung.

Ein Token ist ein Versprechen

:root {
  --color-surface: #ffffff;
  --color-text: #14161a;
  --color-action: #0b57d0;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 20px;
  --radius-control: 6px;
}

.button--primary {
  background: var(--color-action);
  color: var(--color-surface);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
}

Der Wert steht an einer Stelle. Wenn wir das Blau ändern, ändert es sich an 340 Stellen, ohne dass jemand eine Datei öffnet. Das ist der ganze Zauber, und er funktioniert nur, wenn niemand #0b57d0 direkt in eine Komponente schreibt.

Deshalb haben wir einen Lint gebaut, der Hex-Werte in Komponenten meldet. Beim ersten Lauf: 91 Treffer. Nach zwei Wochen: 12. Die zwölf stehen alle in einem alten Widget, das niemand mehr anfasst, und das ist in Ordnung, solange es auf einer Liste steht und nicht im Kopf von jemandem.

Das ist der Unterschied zwischen einem Designsystem und einer Styleguide-Seite: Ein Designsystem kann man prüfen. Eine Seite kann man nur lesen.

Fazit

Ein Designsystem ist kein Set von Komponenten. Es ist eine Wette darauf, dass Menschen weniger Zeit mit Entscheidungen verbringen wollen, die schon entschieden sind — und diese Wette gewinnt man nicht mit einer schöneren Figma-Datei.

Man gewinnt sie mit einem Import, der funktioniert, mit Namen, die man sich merken kann, und mit einer Dokumentation, die dort liegt, wo jemand sucht. Alles andere ist ein Museum mit sehr guter Typografie.

Wenn du morgen eine neue Seite baust: Wie viele deiner Komponenten würdest du importieren — und wie viele würdest du abtippen, weil es schneller geht?