Designsystem: was es ist und wann es sich lohnt. Was GOV.UK, REA und Allegro zeigen

Was ist ein Designsystem

Die Nielsen Norman Group, eines der bekanntesten Institute für Usability-Forschung, beschreibt ein Designsystem als vollständigen Satz von Standards, mit denen sich Design im großen Maßstab über wiederverwendbare Komponenten und Muster steuern lässt („Design Systems 101“). Ein solches System hat meist drei Ebenen. Die erste sind visuelle Vorgaben: Farben, Typografie, Logo. Die zweite ist eine Komponentenbibliothek, also Buttons, Formularfelder oder Karten, die einmal gestaltet und programmiert werden. Die dritte sind Muster, die zeigen, wie man aus diesen Bausteinen größere Einheiten zusammensetzt, etwa eine Navigation oder ein Bestellformular.

Dazu kommt ein vierter, weniger sichtbarer Teil: Menschen. Jemand muss ein Designsystem pflegen, verbessern und weiterentwickeln. Sonst beschreibt es nach einem Jahr ein Produkt, das es so nicht mehr gibt.

Designsystem, Markenhandbuch und UI-Kit

Diese drei Begriffe werden leicht verwechselt. Das Markenhandbuch beschreibt, wie die Marke aussieht: Logo, Farben und Schriften. Ein UI-Kit ist eine Datei mit Oberflächenelementen in einem Designprogramm. Ein Designsystem verbindet beides mit Code und Nutzungsregeln und hat außerdem eine verantwortliche Person oder ein Team. Figma nennt den Styleguide in seiner Einführung in Designsysteme eine Teilmenge des Systems, die sich auf die visuelle Ebene konzentriert. Das ganze System umfasst auch Standards für Code und Usability.

Für ein Unternehmen ist der Unterschied sehr praktisch. Das Markenhandbuch nutzen Druckerei und Agentur. Das Designsystem nutzen die Teams, die jede Woche neue Ansichten, Seiten und Materialien bauen.

Wie viel Unternehmen damit sparen

Am genauesten hat das die australische REA Group gemessen, die Immobilienportale betreibt. Chris Stonestreet, dort für Designsysteme verantwortlich, zeigte 2023 auf der Konferenz Web Directions, wie das Unternehmen den Wert seines Systems Construct Kit misst. Rund 58 Designer und 319 Entwickler für vier Marken arbeiten damit. Nach Berechnung des Unternehmens hat das System seit 2018 rund 300.000 Stunden Design- und Entwicklungszeit gespart. Die Arbeit an einer neuen Startseite schrumpfte von etwa 240 auf 60 Entwicklertage.

Ähnliche Zahlen nennt Headspace, der Anbieter der Meditations-App, in einer von Figma veröffentlichten Fallstudie. Eine durchschnittliche Designdatei besteht dort zu 85 Prozent aus Tokens und Komponenten des Designsystems. Einfache Aufgaben brauchen 20 bis 30 Prozent weniger Zeit, komplexe bis zur Hälfte weniger. Die Vorbereitung von hellem und dunklem Modus dauerte früher eine Stunde, heute eine Minute. Ein Entwickler schätzt, dass neue Versionen 30 Prozent schneller erscheinen.

Diese Zahlen stammen von den Unternehmen selbst, man sollte sie also mit etwas Vorsicht lesen. Zwei ältere Experimente sind besser kontrolliert. In einem Test des Figma-Teams von 2019 lösten Designer mit Zugang zu einem Designsystem eine Aufgabe 34 Prozent schneller, wobei Figma selbst betont, dass dies die Obergrenze ist, weil das System perfekt zu den Aufgaben passte. Die Agentur Sparkbox ließ acht Entwickler dasselbe Formular zweimal programmieren, einmal von Grund auf und einmal mit dem System IBM Carbon. Mit dem System ging es 47 Prozent schneller. Die Stichprobe war klein, doch alle Ergebnisse weisen in dieselbe Richtung.

Rebranding, ohne jede Seite umzubauen

Gut sichtbar ist das bei der britischen Regierung. Das GOV.UK Design System stellt gemeinsame Komponenten für Websites der Behörden bereit. Schon 2020 lief es in über 300 Diensten, und der Government Digital Service schätzte, dass es dem Staat jährlich 17 Millionen Pfund spart.

Im Juni 2025 begann GOV.UK, die Marke in allen Produkten aufzufrischen. Teams mit einer aktuellen Version des Systems mussten nichts tun, denn das neue Erscheinungsbild kam mit dem Update. Die Anleitung für sie passt in einen einzigen Satz.

“You do not need to take any action.”

„Sie müssen nichts unternehmen“ (Übers. CAASUAL).

Für ein Unternehmen, das über ein Rebranding nachdenkt, ist das vielleicht die wichtigste Lehre. Ohne Designsystem müssen neue Farben und Schriften von Hand auf jeder Seite, in jeder App und in jeder Vorlage eingepflegt werden. Mit einem System passiert der größte Teil der Änderung an einer Stelle.

Wann sich ein Designsystem nicht lohnt

Die Nielsen Norman Group schreibt deutlich, dass ein Designsystem sinnvoll ist, wenn ein Unternehmen Jahre wiederkehrender Designarbeit vor sich hat. Bei einem Prototyp oder einem Produkt mit wenigen Ansichten ist eine schnelle Rendite unwahrscheinlich. Ein System braucht außerdem ein festes Team, denn es endet nicht am Tag der Übergabe.

Das größte Problem ist allerdings oft, dass es niemand nutzt. Im Bericht von zeroheight für 2026, der auf einer Umfrage unter 147 Menschen beruht, die mit Designsystemen arbeiten, stehen Akzeptanz und Bekanntheit im Unternehmen zum fünften Mal in Folge ganz oben auf der Liste der Herausforderungen. Drei von fünf Teams sind unterbesetzt, und nur etwa 5 Prozent messen die Rendite.

Spotify hat erlebt, was passiert, wenn ein System nicht zur Organisation passt. Das zentrale Team des ersten Systems wurde zum Engpass für unabhängige Produktteams. Nachdem es aufgelöst war, bauten die Teams eigene Lösungen, und irgendwann zählte das Unternehmen 22 davon. Der Ausweg war eine Familie von Systemen mit gemeinsamer Basis aus Farben, Typografie und Tokens, die die Teams um eigene Teile ergänzen. Auch Allegro kennt die Kosten der Pflege. Das Team schrieb im Technikblog des Unternehmens, dass die gemeinsamen Styles des Systems Metrum die Ladezeiten verbesserten, das Aktualisieren der Abhängigkeiten aber deutlich schwieriger machten.

Warum KI Designsysteme wichtiger macht

Bis vor Kurzem nutzten Designer und Entwickler das Designsystem. Heute nutzen es immer öfter KI-Agenten, die im Auftrag von Marketing, Vertrieb oder Produktmanagement Ansichten und Materialien bauen. Ohne System rät jeder Agent Farben, Abstände und Buttons. Am Beispiel von BILL haben wir das im Beitrag über Designsysteme für KI-Agenten beschrieben.

Allegro modernisiert sein System genau mit diesem Ziel. Marcin Łasica, dort für Design Excellence zuständig, sagt in einem von Netguru zusammengefassten Gespräch, dass das Unternehmen KI von Anfang an als vollwertigen Nutzer des Designsystems behandelt. Namen, Struktur und Einschränkungen sollen so festgehalten werden, dass Modelle markengerechte Oberflächen zusammensetzen. Uber hat KI von der anderen Seite eingesetzt und lässt sie sein System Base dokumentieren. Ein mit Figma verbundener Agent erstellt Komponentenspezifikationen in Minuten statt Wochen.

Interessant ist auch das Ergebnis einer Studie, die 2026 auf der Konferenz CHI vorgestellt wurde. Forschende aus Seoul verglichen drei Wege, einem Sprachmodell ein Designsystem zu übergeben. Am besten schnitt ein Register fertiger Komponenten ab, mit einer Übereinstimmung von 95 Prozent, vor einer reinen Beschreibung der Regeln. Große Unternehmen nutzen das bereits: Atlassian und GitHub stellen öffentlich MCP-Server bereit, über die Agenten Komponenten und Tokens ihrer Systeme abrufen (Atlassian Design System, Primer).

Wie Sie erkennen, ob Ihr Unternehmen eines braucht

Ein guter erster Schritt ist zu zählen, wie viele Ansichten, Seiten und Vorlagen im Jahr entstehen und wie viele Teams daran arbeiten. Geht es um eine Website, die sich zweimal im Jahr ändert, reichen ein solides Corporate Design und einige Vorlagen. Wächst das Produkt mit jedem Sprint, braucht das Marketing jede Woche neue Landingpages und nutzen mehrere Abteilungen KI, rechnet sich ein System deutlich schneller.

Für den Anfang genügen Tokens, also Farben, Typografie und Abstände als benannte Werte, dazu die am häufigsten genutzten Komponenten. Außerdem eine Person, die für das System verantwortlich ist, und eine einfache Kennzahl, etwa der Anteil neuer Ansichten, die aus vorhandenen Elementen entstehen. Solche Systeme gestalten wir zusammen mit der Oberfläche im Rahmen unseres UX/UI-Designs, und in unserer Leistung AI design workflows sorgen wir dafür, dass auch KI-Tools sie nutzen. Das ist der Bereich Konsistenz ohne Kontrollaufwand.