Was ist ein Designsystem?
Ein Designsystem ist der gemeinsame Satz an Design-Entscheidungen, Komponenten und Regeln, mit dem ein Team ein Produkt konsistent baut. Dazu gehören üblicherweise Design-Tokens, eine Komponentenbibliothek, Nutzungsrichtlinien und Dokumentation - gepflegt als eine einzige Quelle der Wahrheit für Design und Code.
Woraus es besteht
Die meisten funktionierenden Designsysteme haben vier Ebenen, und den scheiternden fehlt üblicherweise die erste.
Design-Tokens: die benannten Werte unter allem anderen - Farbe, Typografie, Abstände, Radius, Schatten, Bewegung.
Komponenten: die wiederverwendbaren Bausteine, gebaut so, dass sie Tokens referenzieren statt fest verdrahteter Werte. Ein Button, ein Formularfeld, ein Modal.
Richtlinien: wann welche Komponente, wie man dafür textet, was Barrierefreiheit verlangt.
Dokumentation: die lesbare Oberfläche, auf der Menschen all das finden.
Was es nicht ist
Keine Komponentenbibliothek. Eine Bibliothek ist eine Ebene. Ein Designsystem ohne Tokens liefert konsistente Komponenten auf inkonsistenten Werten.
Keine Figma-Datei. Eine Figma-Datei ist eine Darstellung davon. Referenziert der Code nicht dieselben Entscheidungen, hast du zwei Designsysteme, die einander zufällig ähneln.
Keine Dokumentation. Dokumentation beschreibt das System. Teams, die mit einer Doku-Site beginnen, bevor die Tokens entschieden sind, haben die Beschreibung von nichts geschrieben.
Warum sie auseinanderlaufen
Designsysteme brechen nicht zusammen, sie erodieren. Niemand beschließt, es aufzugeben. Es sammeln sich einfach Werte außerhalb an:
- Eine Designerin braucht eine Farbe, die nicht in der Palette steht, und wählt eine in der Datei.
- Ein Entwickler unter Termindruck schreibt
padding: 14px, statt eine Abstandsstufe zu ergänzen. - Ein KI-Assistent erzeugt eine Komponente mit erfundenen Hex-Werten, weil er das System nicht lesen kann.
Jeder Fall ist für sich vertretbar. Zusammen ergeben sie eine Codebasis mit mehreren parallelen Designsystemen, die niemand angelegt hat.
Das Gegenmittel ist nicht Disziplin, die skaliert nicht. Es ist, das System zum Weg des geringsten Widerstands zu machen: verfügbar in jedem Werkzeug, das es konsumiert, im Format, das dieses Werkzeug erwartet, ohne manuellen Zwischenschritt.
Wie lange der Bau dauert
Von Hand sind es für ein erstes stimmiges System meist Tage bis Wochen. Nicht weil eine einzelne Entscheidung schwer wäre, sondern weil es hunderte sind und sie einander bedingen. Farbskalen, die bei jeder Paarung den Kontrast halten; ein Dark Mode, der keine Invertierung ist; eine semantische Benennung, die ein Rebranding übersteht.
Wo Flash DSM hier steht
Flash DSM erzeugt die Token-Ebene und Komponentenspezifikationen aus einem Prompt, einer URL, einer Figma-Datei oder einem Screenshot und hält sie danach mit Code, Figma und KI-Coding-Agenten synchron.