Zu Hauptinhalten gehen

Designsystem 104: Kennzahlen eine Bedeutung geben

Eine abstrakte digitale Illustration mit miteinander verbundenen geometrischen Formen in einer lebendigen Farbpalette. Die Komposition besteht aus großen, dreidimensionalen blauen Strukturen, die Säulen oder Trägern ähneln und in einem gestaffelten Muster angeordnet sind. Diese Strukturen haben winkelförmige Verlängerungen, die durch dünne orangefarbene Stäbe verbunden sind, wodurch ein netzartiger Effekt entsteht. Im Hintergrund befinden sich zwei große gelbe kreisförmige und rechteckige Formen, die möglicherweise die Sonne und eine Tür darstellen und sich vor einem grünen strukturierten Hintergrund abheben. Das Kunstwerk hat ein mechanisches und architektonisches Gefühl, mit einer surrealen, fast kinetischen Energie.Eine abstrakte digitale Illustration mit miteinander verbundenen geometrischen Formen in einer lebendigen Farbpalette. Die Komposition besteht aus großen, dreidimensionalen blauen Strukturen, die Säulen oder Trägern ähneln und in einem gestaffelten Muster angeordnet sind. Diese Strukturen haben winkelförmige Verlängerungen, die durch dünne orangefarbene Stäbe verbunden sind, wodurch ein netzartiger Effekt entsteht. Im Hintergrund befinden sich zwei große gelbe kreisförmige und rechteckige Formen, die möglicherweise die Sonne und eine Tür darstellen und sich vor einem grünen strukturierten Hintergrund abheben. Das Kunstwerk hat ein mechanisches und architektonisches Gefühl, mit einer surrealen, fast kinetischen Energie.

Hinter jedem erfolgreichen Designsystem steckt ein überraschendes Geheimnis: Zahlen. Erfahre, wie die Nachverfolgung der richtigen Kennzahlen das Designsystem von einer hilfreichen Ressource in einen leistungsstarken Effizienzmotor verwandelt.

Designsystem 104: Kennzahlen eine Bedeutung geben teilen

Kunst von Cynthia Alfonso.

Über die erheblichen Zeitersparnisse hinaus zeigte das Experiment einen qualitativen Vorteil: Die Teilnehmenden berichteten von größerem Selbstvertrauen in ihre Entwürfe, wenn sie ein Designsystem verwendeten, da sie wussten, dass diese mit dem Gesamtprodukt übereinstimmten.

Die Daten sprechen für sich selbst: Das Data-Science-Team von Figma hat festgestellt, dass Designer*innen mit Zugriff auf ein Designsystem ihre Aufgaben um 34 % schneller erledigen als Designer*innen ohne System. Um dies in die richtige Perspektive zu setzen, betrachten Sie ein Team von sieben Produktdesigner*innen, die jeweils 20 Stunden fokussierte Designzeit pro Woche haben. Eine Effizienzsteigerung von 34 % durch ein Designsystem ist so, als würde das Team jede Woche um 3,5 Designer*innen erweitert. Bei Unternehmen wie Vanguard, wo Design-Updates um 50 % schneller mit richtigen Systemen erfolgen, summieren sich diese Gewinne erheblich.

Eine Effizienzsteigerung von 34 % durch ein Designsystem ist so, als würde das Team jede Woche um 3,5 Designer*innen erweitert.

Während sich Teams oft darauf fokussieren, Komponenten und Dokumentationen zu erstellen, wenn sie anfangen, ein Designsystem zu entwerfen, zeigt das Messen der Annahme und Nutzung die tatsächliche Geschäftsauswirkung. Unternehmen wie Headspace haben 20%–30% Zeitersparnis bei einfachen Aufgaben und bis zu 50 % bei komplexen Projekten durch ihre Verwendung von Token und Variablen gesehen, während Swiggy nach der Implementierung eines robusten Trackings die Einführungszeit von Funktionen um die Hälfte verkürzt hat. Diese Kennzahlen beleuchten klare Wege zu verbesserter Konsistenz, Effizienz und Skalierbarkeit.

Eine abstrakte digitale Illustration mit einer geometrischen Komposition aus geschichteten, buchähnlichen Strukturen. Eine große blaue rechteckige Form dominiert die Mitte und wirkt, als ob sie sich öffnet oder entfaltet. Darunter und darum herum erstrecken sich mehrere gestapelte Ebenen in Grün, Orange und Gelb in einem gestuften Muster, das an aufgefächerte Seiten oder architektonische Formen erinnert. Einige der Ebenen enthalten schwarze abstrakte Markierungen, die den Eindruck von verschlüsselten Informationen oder digitalem Text vermitteln. Der Hintergrund ist ein lebhaftes Orange, das den Kontrast zwischen den strukturierten Elementen und ihrer Umgebung verstärkt.Eine abstrakte digitale Illustration mit einer geometrischen Komposition aus geschichteten, buchähnlichen Strukturen. Eine große blaue rechteckige Form dominiert die Mitte und wirkt, als ob sie sich öffnet oder entfaltet. Darunter und darum herum erstrecken sich mehrere gestapelte Ebenen in Grün, Orange und Gelb in einem gestuften Muster, das an aufgefächerte Seiten oder architektonische Formen erinnert. Einige der Ebenen enthalten schwarze abstrakte Markierungen, die den Eindruck von verschlüsselten Informationen oder digitalem Text vermitteln. Der Hintergrund ist ein lebhaftes Orange, das den Kontrast zwischen den strukturierten Elementen und ihrer Umgebung verstärkt.

Willkommen zu Teil vier unserer Einführung in Designsysteme. Falls du unsere vorherigen Artikel verpasst hast, sieh dir die folgenden an: Was ist ein Designsystem?, Wie entwickelt man ein Designsystem?, und Dokumentation, die zur Akzeptanz führt.

Lesen der Signale

In Designsystemen gibt es Nutzungskennzahlen, Akzeptanzraten, Übereinstimmungswerte und andere Leistungsindikatoren. Aber welche sind die richtigen für dein Unternehmen? Die Häufigkeit, mit der Komponenten verwendet oder Design-Token eingesetzt werden, kann Aufschluss über die wahren Leistungsträger deines Designsystems geben. Und dann ist da noch die wertvolle Zeit, die durch die Wiederverwendung von Komponenten eingespart wird – ein messbarer Vorteil, der Stakeholder und Teams gleichermaßen überzeugt.

Zu den wichtigsten Kennzahlen, die bei der Nachverfolgung berücksichtigt werden sollten, gehören die Folgenden:

  • Bibliotheks- und Komponenten-Nutzung: Überwache, welche Komponenten, Variablen und Stile am häufigsten verwendet werden – und welche nicht. Diese Daten helfen dabei, Möglichkeiten zur Verbesserung oder zur Abschaffung wenig genutzter Elemente zu identifizieren.
  • Wirksamkeit der Dokumentation: Verfolge nach, wie Teams mit deiner Dokumentation interagieren. Beliebte Seiten und häufige Suchanfragen können aufzeigen, wo Teams die meiste Anleitung benötigen.
  • Messungen für mehr Konsistenz: Suche nach Mustern bei der Ablösung von Komponenten oder Stilüberschreibungen, die auf Bereiche hinweisen, in denen das Designsystem den Anforderungen des Teams nicht gerecht wird.

Für Veronica Agne, Senior UX-Designer bei athenahealth, bieten Ablösungsraten von Komponente besonders wertvolle Insights: „Wenn jemand in unserer Organisation eine Komponente ablöst, möchte ich wissen, warum“, erklärt sie. „Es kann eins von drei Dingen bedeuten: Es gibt einen Bug, Leute wollen eine Erweiterung der Funktionalität, die nicht vorhanden ist, oder Leute kombinieren bestehende Elemente auf eine Weise, die ich nicht erwartet habe. Ich interessiere mich für alle drei Antworten.“

Diese Detektivarbeit zahlte sich kürzlich aus, als Veronica einen Anstieg der Ablösungen eines Containerbauteils bemerkte. „Wir hatten ein kleines Problem mit dem Auto-Layout, da der Umbruch nicht so funktionierte, wie wir es benötigten“, erinnert sie sich. Ich sah, wie eine Gruppe von Mitarbeitenden es ablöste, und mir wurde klar, dass das wahrscheinlich der Grund war. Ich musste nicht warten, bis mir jemand ausdrücklich sagte, dass es ein Problem gibt, bevor ich es beheben konnte.“ Nachdem ihrer Arbeit in den Bereichen Datenwissenschaft und Analytik und ihrer jetzigen Tätigkeit als Designleiterin für das Forge-Designsystem von athenahealth bringt Veronica eine einzigartige Perspektive für die Messung des Erfolgs eines Systems mit, das in großem Maßstab arbeitet und Hunderte von Designer*innen, Entwickler*innen und Produktmanager*innen mit rund 100.000 Komponenteneinsätze pro Monat bedient.

Nutzung von Tools und Automatisierung

Konsistenzwerte und die Einhaltung der Vorgaben für die Barrierefreiheit dienen als wichtige Indikatoren für den Zustand eines Designsystems. Indem du die Überwachung als Teil einer fortlaufenden Routine und nicht nur als gelegentliche Kontrolle behandelst, ist es wahrscheinlicher, dass du potenzielle Probleme erkennst, bevor sie eskalieren. Durch die Automatisierung können sich die Teams auf das konzentrieren, was sie am besten können – Design und Innovation – und müssen sich nicht mit der detaillierten Datennachverfolgung aufhalten. Mit Plugins, Build-Skripten und Test-Frameworks weichen manuelle Aufgaben Effizienz und Präzision.

Ab dem 11. Februar 2025 bieten die aktualisierten Library Analytics von Figma den Kunden von Organisationen und Enterprise tiefere Insights, wie ihre veröffentlichten Bibliotheken genutzt werden, ohne dass die Designumgebung verlassen werden muss. Teams können jetzt neben den bestehenden Komponentenanalysen auch die Akzeptanz von Variablen und Stilen direkt in Figma verfolgen, was es einfacher denn je macht, die Nutzung des Designsystems innerhalb ihrer Organisation zu verstehen. Die Bibliotheksanalysen umfassen Folgendes:

  • Komponenten: Überwache die Nutzungsmuster und ermittle, welche Elemente die Teams am häufigsten verwenden.
  • Stile: Verfolge nach, wie Farb-, Schrift- und Effektstile in Dateien implementiert werden.
  • Variablen: Erkunde, wie Token und dynamische Eigenschaften genutzt werden

Für Unternehmenskunden bietet die neue Library Analytics API noch mehr Flexibilität, um Analysesichten anzupassen. Teams können Nutzungsmuster über spezifische Zeiträume hinweg sehen, verschiedene Arten von Daten kombinieren und Designsystemkennzahlen mit ihren bestehenden Tools und Workflows integrieren.

Nutzbarmachung der Daten

Bei athenahealth gehörten Veronica und ihr Team zu den Ersten, die die neuesten Ergänzungen der Figma-Bibliotheksanalysen ausprobierten, um sie zum Bestandteil ihres Prozesses zu machen, Kennzahlen in Verbesserungen umzuwandeln. „Ich nutze die aktualisierten Bibliotheksanalysen von Figma, um eine feinere Kontrolle darüber zu erhalten, wie, wann und warum Leute Komponenten ablösen“, erklärt sie. Ihr Team verwendet benutzerdefinierte Skripte, um die API-Daten in detaillierte Berichte umzuwandeln, Kontexte wie Komponententypen und erwartete Ablösungsrate hinzuzufügen und sie dann monatlich über ein Tableau-Dashboard zu visualisieren und zu überprüfen.

Diese Daten treiben dann einen dreistufigen Prozess an:

  1. Diagnose: Untersuchung der Komponenten auf offensichtliche Probleme
  2. Nutzeransprache: Kontaktaufnahme mit Teams zur Ermittlung ihrer Anforderungen
  3. Umsetzung: Erstellung von Tickets für notwendige Verbesserungen, entweder in Figma oder Code

„Wir arbeiten ständig an der Vermeidung von Problemen in unserem Designsystem“, erklärt Veronica. „Die Mitarbeitenden werden nicht jedes auftretende Problem melden. Wenn ich eine andere Kennzahl habe, die auf ein Problem hinweisen kann, muss ich mich nicht auf die Bereitschaft der Mitarbeitenden verlassen, mir zu sagen, dass etwas nicht in Ordnung ist.“

Bei Squarespace nutzt das Designsystem-Team den Bibliothekenvergleichsfilter, um die Migration zwischen verschiedenen Versionen zu verfolgen. Dadurch können sie die Nutzung zwischen alten und neuen Iterationen überwachen und sicherstellen, dass ältere Versionen ordnungsgemäß ausgemustert werden.

Microsoft nutzt auch die Analyse von Designsystemen als eine Form des Feedbacks. „Es gibt so viele Teams bei Microsoft, die das Fluent Design System verwenden, und wir erhalten nicht immer Feedback darüber, was funktioniert und was nicht“, erklärt Damien Aistrope von Microsoft, früher Principal Designer bei Fluent. „Deshalb ist es für uns hilfreich zu sehen, welche Komponenten nicht genutzt werden und nicht gewartet werden müssen, und welche Komponenten häufig abgelöst werden und möglicherweise aktualisiert werden müssen.“

Bei Microsoft gibt es so viele Teams, die das Fluent Design System verwenden. Wir erhalten von ihnen nicht immer ein Feedback über die Qualität der Funktionsweise.
Damien Aistrope, zuvor Principal Designer, Fluent Design System Studio bei Microsoft
Ein Screenshot eines Designsystem-Analytics-Dashboard mit dem Titel „Bibliothek“ wird auf einem orangefarbenen Hintergrund angezeigt. Das Dashboard ist mit dem Tab „Analytics“ geöffnet und konzentriert sich auf „Variableneinsätze“, wobei ein Liniendiagramm die Einsatztrends über einen Zeitraum von 30 Tagen nachverfolgt. Unterhalb des Diagramms werden im Abschnitt „Top-Teams“ Teams nach der Anzahl der Variableneinsätze eingestuft, wobei das „Kernteam“ mit 372.516 Einsätzen (94 %) die Liste anführt. Eine Tabelle mit „Nutzungsstatistiken“ listet Farbvariablen wie „Cyan“, „Maroon“ und „Neon Green“ zusammen mit Daten zu Gesamtinstanzen, Einsätzen in den letzten 30 Tagen und Ablösungen auf. Die am meisten verwendete Variable ist „Cyan“ mit 917.580 Gesamtinstanzen und 109.630 Einsätzen in den letzten 30 Tagen.Ein Screenshot eines Designsystem-Analytics-Dashboard mit dem Titel „Bibliothek“ wird auf einem orangefarbenen Hintergrund angezeigt. Das Dashboard ist mit dem Tab „Analytics“ geöffnet und konzentriert sich auf „Variableneinsätze“, wobei ein Liniendiagramm die Einsatztrends über einen Zeitraum von 30 Tagen nachverfolgt. Unterhalb des Diagramms werden im Abschnitt „Top-Teams“ Teams nach der Anzahl der Variableneinsätze eingestuft, wobei das „Kernteam“ mit 372.516 Einsätzen (94 %) die Liste anführt. Eine Tabelle mit „Nutzungsstatistiken“ listet Farbvariablen wie „Cyan“, „Maroon“ und „Neon Green“ zusammen mit Daten zu Gesamtinstanzen, Einsätzen in den letzten 30 Tagen und Ablösungen auf. Die am meisten verwendete Variable ist „Cyan“ mit 917.580 Gesamtinstanzen und 109.630 Einsätzen in den letzten 30 Tagen.
Das aktualisierte Library-Analytics-Dashboard von Figma zeigt, wie Teams ihr Designsystem nutzen und alles von Variableneinsätzen bis zu Farbtoken nachverfolgen – alles in der Designumgebung.

Best Practices für die Messung des Einflusses

Beim Modelllernen werden Computerprogramme entwickelt und trainiert, um Muster zu erkennen, Vorhersagen zu treffen oder Verhaltensweisen aus Daten zu verstehen.

Teams, die mit der Nachverfolgung ihrer Kennzahlen beginnen oder diese verbessern wollen, empfiehlt Veronica einen historischen Ansatz: „Zunächst sollte ein Blick zurückgeworfen werden, bevor man versucht, einen Blick in die Zukunft zu erhalten. Mit der Bibliotheksanalyse kannst du ein Jahr zurückgehen und untersuchen, was in einem Zeitraum passiert ist, für den du die Ergebnisse bereits kennst. Es ist fast wie beim Lernen von Modellen– du kannst dir ansehen, was zu diesen Ergebnissen geführt haben könnte, und daraus ableiten, worauf du in Zukunft achten solltest.“

Mit der Bibliotheksanalyse kannst du ein Jahr zurückgehen und untersuchen, was in einem Zeitraum passiert ist, für den du die Ergebnisse bereits kennst.
Veronica Agne, Senior UX Designer, athenahealth

Die Vorteile der Nachverfolgung von Kennzahlen liegen auf der Hand, doch bringt der Prozess auch Herausforderungen mit sich, z. B. die Aufrechterhaltung der Datenqualität, die Akzeptanz der Stakeholder und die Umsetzung der Erkenntnisse in Maßnahmen. Zu den weiteren Best Practices gehören:

  • Früh und häufig messen: Warte nicht bis nach dem Start, um mit dem Nachverfolgen von Kennzahlen zu beginnen. Frühzeitige Messungen helfen, Barrieren bei der Akzeptanz und Chancen für Verbesserungen zu identifizieren, bevor sie zu systemischen Problemen werden.
  • Klare Ziele festlegen, die mit den Geschäftsanforderungen übereinstimmen: Verknüpfe Kennzahlen mit spezifischen Ergebnissen. Möchtest du die Akzeptanz erhöhen? Die Konsistenz verbessern? Die Designschulden reduzieren? Deine Ziele sollten die Kennzahlen bestimmen, die am wichtigsten sind.
  • Ein Blick hinter die Zahlen zur Erkennung von Kontext: Eine hohe Ablösungsrate ist nicht immer negativ – sie kann auch ein Hinweis darauf sein, dass eine für die Anpassung konzipierte Komponente wie vorgesehen funktioniert. Der Kontext ist dabei entscheidend. Kontext ist wichtig.
  • Deine Insights umfassend mit den Stakeholdern teilen: Verstärke die Unterstützung für dein Designsystem und zeige den Einfluss auf Effizienz und Einheitlichkeit durch den Austausch von Kennzahlen.
Ein Screenshot eines Design-Analytics-Dashboards mit dem Titel „Earthling SDS“ wird vor einem grünen Hintergrund mit einem subtilen Schlagschatten-Effekt angezeigt. Das Dashboard ist mit dem „Analytics“-Tab geöffnet, der ein Liniendiagramm mit der Beschriftung „Komponenteneinsätze“ zeigt, mit einem sichtbaren Anstieg Anfang Januar. Ein Dropdown-Menü ist geöffnet und zeigt drei Optionen: „Komponenten“, „Stile“ und „Variablen“, wobei „Variablen“ mit dem Mauszeiger darüber schwebt. Unterhalb des Diagramms listet ein Abschnitt „Top-Teams“ Teams und ihre Komponenteneinsatz-Zählungen auf, wobei das „App Team“ mit 55 Einsätzen (93 %) führt. Weiter unten werden in einer Tabelle „Komponentenstatistiken“ die Namen der Komponenten, die Gesamtanzahl der Varianten, die Gesamtanzahl der Instanzen sowie die Anzahl der Einsätze und Ablösungen in den letzten 30 Tagen detailliert dargestellt. Die Komponente „Footer“ hat die höchste Aktivität mit insgesamt 25 Instanzen, 9 Einsätzen und 8 Ablösungen.Ein Screenshot eines Design-Analytics-Dashboards mit dem Titel „Earthling SDS“ wird vor einem grünen Hintergrund mit einem subtilen Schlagschatten-Effekt angezeigt. Das Dashboard ist mit dem „Analytics“-Tab geöffnet, der ein Liniendiagramm mit der Beschriftung „Komponenteneinsätze“ zeigt, mit einem sichtbaren Anstieg Anfang Januar. Ein Dropdown-Menü ist geöffnet und zeigt drei Optionen: „Komponenten“, „Stile“ und „Variablen“, wobei „Variablen“ mit dem Mauszeiger darüber schwebt. Unterhalb des Diagramms listet ein Abschnitt „Top-Teams“ Teams und ihre Komponenteneinsatz-Zählungen auf, wobei das „App Team“ mit 55 Einsätzen (93 %) führt. Weiter unten werden in einer Tabelle „Komponentenstatistiken“ die Namen der Komponenten, die Gesamtanzahl der Varianten, die Gesamtanzahl der Instanzen sowie die Anzahl der Einsätze und Ablösungen in den letzten 30 Tagen detailliert dargestellt. Die Komponente „Footer“ hat die höchste Aktivität mit insgesamt 25 Instanzen, 9 Einsätzen und 8 Ablösungen.

Erfahre mehr über die aktualisierte Bibliotheksanalyse von Figma für Organization- und Enterprise-Teams.

Auf Skalierung ausgerichtet

Mit der Weiterentwicklung deines Designsystems sollte sich auch deine Herangehensweise an Kennzahlen weiterentwickeln. Durch die regelmäßige Überprüfung deiner Kennzahlenstrategie kannst du sicherstellen, dass du das nachverfolgst, was für deinen aktuellen Entwicklungsstand wichtig ist. Erwäge eine Segmentierung der Daten nach Team oder Produkt, um detailliertere Einblicke zu gewinnen. Auf diese Weise lässt sich feststellen, wo zusätzliche Unterstützung oder Anpassungen erforderlich sind.

Vergiss nicht, dass Kennzahlen nur ein Mittel zum Zweck sind: Sie dienen zum Aufbau eines effektiveren, allgemein akzeptierten Designsystems, das die Effizienz deines Teams und die Einheitlichkeit deiner Produkte erhöht. Anhand dieser Messungen lässt sich das System verbessern, sein Wert nachweisen und sicherstellen, dass es auch in Zukunft den sich wandelnden Anforderungen deines Unternehmens gerecht wird.

Mit Figma kreativ sein und zusammenarbeiten

Kostenlos loslegen