Ein datengetriebenes Design-System misst seinen Nutzen, statt ihn zu behaupten. Beim US-Anbieter Scribe kletterte die tatsächliche Komponenten-Abdeckung in einem halben Jahr von 37 auf 52 Prozent, weil ein Design-Engineer jede Entscheidung an Zahlen band. Der Weg dorthin verrät, warum die meisten Design-Systeme still verfallen.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Design-Systeme wachsen schnell und altern leise: Neue Bausteine entstehen doppelt, alte bleiben ungenutzt, und niemand bemerkt den Verfall ohne Messung. Genau diese Lücke schließt der Ansatz, den Design-Engineer Ky Decker bei Scribe dokumentierte.

Das Wichtigste in Kürze

  • Ein datengetriebenes Design-System steuert Ausbau und Pflege über Kennzahlen statt über Bauchgefühl.
  • Bei Scribe stieg die Komponenten-Abdeckung laut Fallbericht binnen sechs Monaten von 37 auf 52 Prozent, die Gesamtbewertung über 18 Monate von 7,6 auf 9,1.
  • Werkzeuge wie Omlet für die Nutzungsanalyse, Chromatic für visuelle Regression und Playwright mit axe-core für Barrierefreiheit liefern die Zahlen.
  • Für den DACH-Raum wird die Barrierefreiheits-Messung zur Pflicht: Das Barrierefreiheitsstärkungsgesetz gilt seit dem 28. Juni 2025.

Warum verfallen Design-Systeme ohne Kennzahlen?

Meßuhr auf Metallstapel mit Notizzetteln „Gemessen, nicht geraten“
Fehlende Messung führt zu Neuentwicklung statt Wiederverwendung von Komponenten, woraus nur Sammlungen statt echter Systeme entstehen

Ohne Messung bleibt unsichtbar, welche Bausteine ein Team wirklich nutzt. Entwickler bauen Komponenten neu, statt vorhandene zu finden, und das System zerfasert zur bloßen Sammlung. Viele Firmen besitzen deshalb keine echte Grundlage, sondern nur eine Komponenten-Bibliothek.

Der Mechanismus dahinter ist statische Code-Analyse. Ein Werkzeug wie Omlet durchsucht die Codebasis und zählt, wie oft jede Komponente und jede Eigenschaft tatsächlich vorkommt. Erst diese Nutzungsdaten zeigen, wo Doppelarbeit sitzt und welche Bausteine niemand mehr aufruft.

Welche Zahlen machen ein Design-System messbar?

Vier Messfelder bilden den Ansatz: Nutzung, Optik, Barrierefreiheit und die Stimmung im Team. Omlet liefert die Abdeckungsquote, Chromatic prüft jede Änderung gegen den letzten Stand, und Playwright mit axe-core testet automatisch auf fehlende Fokusringe oder zu schwache Kontraste. Dazu kommt alle sechs Monate eine Umfrage, die den gefühlten Zustand auf einer Skala festhält.

Die Wirkung lässt sich beziffern. Bei Scribe verbesserte sich die Wirksamkeit der Dokumentation um 40 Prozent, die Gesamtbewertung des Systems stieg von 7,6 auf 9,1 von zehn.[1] Wer nur die semantische Ebene der Design Tokens ordnet, hat die Bausteine benannt, ihren Einsatz aber noch nicht gemessen.

Ein Design-System ohne Kennzahlen ist eine Behauptung. Erst die Abdeckungsquote zeigt, ob die Investition im Alltag ankommt oder nur in der Bibliothek liegt.

— Markus Seyfferth, Chefredakteur Dr. Web

Was heißt das für Teams im DACH-Raum?

Die Barrierefreiheits-Messung ist im DACH-Raum keine Kür mehr. Seit dem 28. Juni 2025 verlangt das Barrierefreiheitsstärkungsgesetz, dass Webshops, Apps und viele B2C-Dienste die Norm EN 301 549 und damit die WCAG 2.1 auf Stufe AA erfüllen; Verstöße kosten bis zu 100.000 Euro.[2]

Automatische Tests mit Playwright und axe-core im Design-System liefern genau den Nachweis, den das Gesetz fordert, und finden Kontrast- oder Fokusfehler zentral an der Komponente statt auf hundert Einzelseiten. Alle drei Werkzeuge sind quelloffen oder in einer kostenlosen Stufe nutzbar.

  1. Die Abdeckung der wichtigsten Komponenten einmal messen.
  2. Visuelle Regressionstests in die Prüfkette einbauen.
  3. Die Barrierefreiheit automatisch an der Komponente prüfen.

Datengetriebene Steuerung macht aus einem Design-System ein Produkt mit Belegen statt mit Versprechen. Der Fallbericht von Scribe liefert die Kennzahlen und Werkzeuge als Vorlage, die sich auch in kleinen Teams übernehmen lässt.

Ein Design-System in Zahlen führen

Vier Messfelder und die Werkzeuge, die den Nutzen eines Design-Systems belegen.

NutzungOmlet zählt per statischer Analyse, welche Komponenten die Codebasis wirklich einsetzt.
OptikChromatic prüft jede Änderung als visuelle Regression gegen den letzten Stand.
BarrierefreiheitPlaywright und axe-core testen automatisch auf Kontrast- und Fokusfehler.
TeamAlle sechs Monate misst eine Umfrage den gefühlten Zustand auf einer Skala.
37 → 52 %

Komponenten-Abdeckung bei Scribe in sechs Monaten

7,6 → 9,1

Gesamtbewertung des Systems über 18 Monate

+40 %

wirksamere Dokumentation nach dem Umbau

Quellen

[1] Ky Decker: „Building data-driven design systems“

[2] Bundesministerium der Justiz: Barrierefreiheitsstärkungsgesetz (BFSG)

Mehr Newshunger?

4,6 14 Bewertungen

Wie hat Ihnen dieser Artikel gefallen?