Erstellen und Skalieren eines Designsystems in Figma: Eine Fallstudie

Um festzulegen, wie ein Designsystem für ein multinationales Unternehmen aufgebaut werden soll, müssen alle Komponenten und Muster bis ins kleinste Detail katalogisiert werden. Es ist ein gewaltiges Unterfangen, das sowohl eine Gesamtschau als auch eine Konzentration auf Einzelheiten erfordert. So hat es ein Leiter des Designsystem-Teams geschafft.

Als die in der Schweiz ansässige Holdinggesellschaft ABB sich daran machte, ein Designsystem zu entwickeln, war das Ziel, ein einheitliches Erscheinungsbild für Hunderte von Softwareprodukten zusammenzufügen, von denen viele die mechanischen Systeme antreiben, die Fabriken, Minen und andere Industriestandorte am Laufen halten . Keine leichte Aufgabe für ein Unternehmen mit fast zwei Dutzend Geschäftsbereichen und fast 150.000 Mitarbeitern weltweit. Für Abdul Sial, der als leitender Produktdesigner im 10-köpfigen Konstruktionssystemteam von ABB tätig war, hing die Skalierung der Komponenten- und Musterbibliothek von Offenheit und Transparenz ab, wobei der Schwerpunkt auf umfassender Dokumentation lag.

Die Rolle eines Designsystemdesigners

Große Unternehmen wie ABB haben zunehmend Teams, die sich ausschließlich der Erstellung und Wartung von Designsystemen widmen. „Ein Designsystem sorgt für Konsistenz, geht in angemessener Zeit auf den Markt und verhindert, dass die Produktion an Anpassungen hängen bleibt, die keinen Wert schaffen“, sagt der in Madrid ansässige Designer Alejandro Velasco. Oder, wie Alexandre Brito, ein Designer in Lissabon, Portugal, erklärt: „Designsysteme sorgen immer dann für Struktur, wenn viele Menschen dieselben Tools verwenden. Es ist, als hätten alle die gleiche Sprache.“

Wenn ein herkömmlicher Styleguide die Designgrundlagen abdeckt – zum Beispiel Schriftarten und Farben – hat ein Designsystem eine viel größere Reichweite. „Ein Designsystem ist eine Mischung aus Styleguide, Designkomponenten, Designmustern, Codekomponenten und darüber hinaus Dokumentation“, sagt Sial. Als er am Designsystem von ABB arbeitete, nutzten es etwa 120 Designer regelmäßig. Die Bemühungen stellten Version 4.8 des Systems dar, und das Team nannte es „Design Evolution“.

Designsystemdesigner spielen eine andere Rolle als diejenigen, die sich nur auf einzelne Produkte konzentrieren. „Sie haben einen Überblick über all die verschiedenen Produkte, die ein Unternehmen verwendet“, sagt Sial.

Die Arbeit im Konstruktionsbereich erfordert auch die Kommunikation mit Interessenvertretern im gesamten Unternehmen. „Entwickler von Designsystemen müssen sozial sein“, sagt Velasco. „Ein Designsystem-Designer muss es wirklich mögen, mit Menschen zu arbeiten und zu sprechen, die unterschiedliche Rollen innerhalb einer Organisation einnehmen. Sie müssen in der Lage sein, zu unterscheiden, welches Feedback einzubeziehen ist, um das Designsystem auf die Bedürfnisse des Unternehmens abzustimmen.“

Der Lebenszyklus einer Komponente

Bei der Arbeit am Konstruktionssystem von ABB ließ sich Sial von einer übergreifenden Philosophie leiten: „Dokumentation, Dokumentation, Dokumentation“. Sial wollte für jedes wiederverwendbare Element auf ABB-Websites, mobilen Bildschirmen oder großen eigenständigen Bildschirmen zeigen, was er den Lebenszyklus einer Komponente nennt. Das bedeutete umfangreiche Aufzeichnungen für alle Komponenten und Muster – Breadcrumbs, Kopfzeilen, Eingänge oder Schaltflächen, um nur einige zu nennen. „Welche Reisen hat es durchgemacht? Welche Entscheidungen flossen darin ein? Auf diese Weise erstellen wir nicht immer alles neu. Bevor Sie etwas ausprobieren, können Sie lesen und sehen, dass jemand es bereits getestet hat“, sagt Sial.

Seiner Erfahrung nach ist diese Philosophie eine Abkehr vom typischen Dokumentationsansatz. In der schnelllebigen Welt der Produktentwicklung wird beispielsweise die Dokumentation oft am Ende des Projekts geschrieben oder ganz aufgegeben. Aber für Designsysteme, sagt Sial, sollte die Dokumentation mehr als ein nachträglicher Einfall sein. „Ein Designsystem ist nie fertig; es muss kontinuierlich verbessert werden“, sagt er. „Entwickler und Verbraucher von Designsystemen wollen die Denkprozesse und Entscheidungen verstehen, um sie weiter zu verbessern.“

Die Dokumentation ist besonders wichtig für ein so großes Konstruktionssystem wie das von ABB. „Bei einem so großen Team muss man skalieren können“, sagt er. „Wie können wir sicherstellen, dass jeder, der dem Team beitritt, schnell zu jeder Komponente gehen und verstehen kann, wie sie gestartet wurde, wie sie bearbeitet wurde und welche Version sie verwenden?“

Das richtige Werkzeug finden

Es gibt viele Tools zum Erstellen von Designsystemen, darunter Figma, Sketch und Adobe XD. Sial experimentierte mit mehreren und probierte eine Mischung aus Design- und Projektmanagement-Tools aus, bevor sie sich für Figma entschied, das viel Platz für die Dokumentation bietet.

Sial und sein Team legten fest, dass jede Komponente in einer eigenen Datei gespeichert werden sollte. „Meistens arbeitet man an einer Komponente nach der anderen. Wenn Sie alle Komponenten in eine Datei packen, verlangsamt dies Figma. Indem jeder Komponente eine eigene Datei zugewiesen wird, lässt sie sich schneller öffnen, und Sie haben den gesamten Verlauf und die gesamte Dokumentation an einem Ort“, sagt er.

Einstellen der Hierarchie

Sial richtete das ABB-Designsystem so ein, dass die Datei für jede Komponente und jedes Muster die gleichen Seiten hat. Die folgenden Bilder zeigen, was auf jeder Seite steht.

Abdeckung

Sial empfiehlt, für jede Komponente ein einfaches Deckblatt einzurichten. In Figma ermöglicht dies eine Thumbnail-Vorschau aller Komponenten und hilft bei der Durchsuchbarkeit von Dateien. Im ABB-Setup enthält das Deckblatt den Namen der Komponente und die Phase, in der sie sich befindet: Design, Entwicklung oder Freigabe. Der Status kann einfach aktualisiert werden, wenn die Komponente fortschreitet.

Inventar, Anwendungsfälle und Anfragen

Diese Seite enthält Beispiele für die zahlreichen Möglichkeiten, wie eine Komponente im digitalen Produkt eines Unternehmens erscheint. Im Fall einer Textfeldkomponente würde die Bestandsseite beispielsweise zeigen, wie das Textfeld auf abb.com im Vergleich zu einem iPhone im Vergleich zu einem Android-Gerät aussieht. „Das Inventar ermöglicht es uns, klar zu verstehen, was bereits vorhanden ist“, sagt Sial.

Diese Seite sollte auch zeigen, wie die Komponente falsch verwendet wird. „Auf diese Weise können Sie sich Ihre Produkte ansehen und sehen, wo es Ausrichtungen und Fehlausrichtungen gibt“, sagt Sial. Er rät Teams, die ein Designsystemprojekt starten, mit der Katalogisierung des bereits Vorhandenen zu beginnen. „Beginnen Sie mit dem Inventar und es wird Sie bei der Erstellung des Designs leiten“, sagt er.

Referenzen, Best Practices und Wettbewerbsanalyse

Sial empfiehlt, einen Abschnitt jeder Komponentendatei ähnlich einem Vision Board zu erstellen, der zeigt, wie andere Unternehmen vergleichbare Teile entwerfen. „Wie bei allem anderen ist es am besten, eine Wettbewerbsanalyse durchzuführen und zu sehen, wie andere Leute es machen“, sagt er. „Beobachten Sie andere Produkte und sehen Sie ihre Erkenntnisse.“

Tests und Daten

Die Datenseite für Testergebnisse fasst alle Daten zusammen, die sich auf das Testen einer Komponente beziehen, einschließlich der Ergebnisse von A/B-Tests und Feedback von Benutzern und Interessenvertretern. Kurz gesagt, sagt Sial: „Es ist die ganze Geschichte einer Komponente.“ Vielleicht hat das Designteam vor zwei Jahren eine neue Variante ausprobiert und festgestellt, dass sie nicht funktioniert? „Vielleicht haben wir an dieser Variante gearbeitet und sie aus irgendeinem Grund verworfen“, sagt er. Wenn dies der Fall ist, kann diese Art von Verlauf viel Zeit sparen, indem sichergestellt wird, dass Designer es nicht noch einmal versuchen.

Zielfernrohr

Auf der nächsten Seite wird der Anwendungsbereich einer Komponente dargelegt, damit Designer ein Design verwirklichen können. Als sie auf der Scope-Seite ankommen, sagt Sial: „Sie haben eine Geschichte. Sie verstehen das Inventar aller Produkte. Sie wissen, was Sie bauen müssen und kennen die Anforderungen. Jetzt ist es an der Zeit, es aufzuschreiben und ein kurzes Protokoll daraus zu machen.“ Er fügt hinzu, dass die Erstellung des Umfangs ein kollaborativer Prozess mit den Produktbesitzern, Entwicklern und Designern sein sollte.

Versionen

Bilder der endgültigen Versionen der Komponente finden Sie hier, wobei die neueste Iteration oben angeheftet ist. Andere Designer sollten in der Lage sein, es zu überprüfen und zu kommentieren.

Sandkasten

Die Sandbox ermöglicht es Designern, mit verschiedenen Iterationen einer Komponente oder eines Musters direkt in Figma zu experimentieren. „Es kann chaotisch werden, und es gibt keine Standardisierung“, sagt Sial. „Es ist nur ein Spielplatz, auf dem ein Designer die Freiheit hat, alles zu tun.“

Figma-Komponente

Die Datei enthält auch eine Seite für die Figma-Komponente selbst, ein UI-Element, das im gesamten Designsystem leicht wiederholbar ist. Der Designer kann Änderungen an der Komponente vornehmen, und diese Änderung wird in alle Instanzen dieser Komponente im gesamten Unternehmen übernommen, sodass alles konsistent bleibt. Diese Seite wird in die Bibliothek des Figma-Designsystems exportiert, und jeder einzelne Designer kann die Figma-Komponente per Drag-and-Drop in sein Design einfügen. Wenn das Designsystemteam eine Änderung an der Komponente vornehmen muss, kann es diese einmal vornehmen und im gesamten Unternehmen bereitstellen.

Stilregeln

Als nächstes erstellen die Designsystem-Designer und -Entwickler die Stilregelseite, eine Art Auffangbehälter für Elemente, die laut Sial „im Design nicht sichtbar sind“. Wie wird die Komponente beispielsweise gerendert, wenn Sie auf der Seite nach unten scrollen? Hier verfolgt das Designsystemteam auch ungelöste Fragen oder Probleme. Er sei überrascht gewesen, wie wichtig diese Seite geworden sei: „Zuerst dachten wir, diese Seite sei nicht so wichtig, aber jetzt stellen wir fest, dass wir die meiste Zeit hier verbringen.“

Aushändigen

Die Übergabenotizen sind die Anweisungen für Entwickler zum Schreiben des Codes für die Komponente. Das Übergabedokument beginnt mit der Anatomie des Bauteils und umfasst dann dessen Variationen.

Die ABB-Systemübergabedokumente enthalten auch Design-Tokens. Designtoken werden in großen Designsystemen wie dem von ABB immer beliebter und sind Teile von plattformunabhängigen Stilinformationen über UI-Elemente wie Farbe, Schriftart oder Schriftgröße. Mit Design-Token kann ein Designer einen Wert ändern – zum Beispiel angeben, dass eine Call-to-Action-Schaltfläche orange statt blau sein soll – und diese Änderung wird überall dort angezeigt, wo das Token verwendet wird, sei es auf einer Website, iOS, oder Android-Plattform.

Sial hat auch ein Figma-Token-Plug-in erstellt, um den Umfang der Token zu erweitern, die Designer in Figma erstellen können. „Figma unterstützt Farben, Typografie, Schatten und Rasterstile“, sagt er. Das Plug-in generiert Tokens für weitere Variablen, wie z. B. Deckkraft und Rahmenbreite. Außerdem wird eine standardisierte Namenskonvention erstellt, sodass Designer die Token-Namen nicht manuell verfolgen müssen. „Das Plug-in schließt die Lücke zwischen Entwicklern und Designern. Es ermöglicht beiden, an einer Single Source of Truth für das Design zu arbeiten; Wenn man an einer Stelle eine Änderung vornimmt, wirkt sich diese Änderung überall im Design und Code aus“, sagt er.

Sial betont, dass Entwickler in seinem System während der Erstellung einer Komponente eine aktive Rolle einnehmen. „Wir haben unsere Entwickler früh involviert, wenn wir etwas bereit hatten, um es ihnen zu zeigen“, sagt er. „Dann haben wir gemerkt, dass das nicht funktioniert, und jetzt starten wir buchstäblich Kickoff-Sitzungen mit ihnen.“

Dokumentations-Webseite

Die letzte Seite jeder Datei enthält eine Webseite mit dem endgültigen Design, die zeigt, wie die Komponente als fertiges Produkt aussieht. „Wir erstellen eine Seite, die zeigt, wie das Live-Beispiel aussehen wird, damit die Benutzer, in diesem Fall unsere Designer, sehen können, wie es am Ende des Tages auf einer echten Website aussehen wird“, sagt Sial.

Zusammenarbeit ist der Schlüssel

Die Rolle eines Design System Designers ist vielfältig. Wie Alejandro Velasco sagt: „Das Entwerfen eines Designsystems umfasst so viele Rollen, und wenn ich das leite, bin ich der Klebstoff für das Projekt.“

Es ist ein enormes Unterfangen und nicht unbedingt der richtige Schritt für alle Unternehmen. Startups sollten beispielsweise besser mit einem sofort einsatzbereiten System wie Google Material Design oder dem IBM Carbon Design System beginnen, anstatt umfangreiche Ressourcen für die Erstellung eines solchen zu verwenden. Aber irgendwann reicht das vielleicht nicht mehr aus, sagt Alexandre Brito: „Sobald mehrere Designer zusammenarbeiten, merkt man, dass es jemanden braucht, der Regeln erstellt, die besser zum Produkt passen oder Marke, die Sie aufbauen.“

Der Aufbau eines Designsystems erfordert Arbeit und Hingabe; es braucht auch Zusammenarbeit. Sial betont, dass die Einbeziehung aller Beteiligten in die Entwicklung des ABB-Systems während des gesamten Prozesses eine Priorität war. „Es war wirklich iterative Arbeit mit meinem gesamten Team. Es ging nur darum, ihnen zuzuhören, und wir haben uns die Zeit genommen, es gründlich zu lernen und zu testen und diese Struktur zu entwickeln“, sagt er.

Eine Struktur mit umfassender Dokumentation, einschließlich Historie und Best Practices, ist der Kern des Figma-Designsystems. „Es ist ein Erfolg, weil die Leute die gesamte Dokumentation an einem Ort lesen können“, sagt Sial. „Sie können alles sehen, angefangen vom Anwendungsfall über das Design bis hin zur Übergabe und der letzten Komponentenseite. Man sieht den gesamten Lebenszyklus einer Komponente.“

Sie können die gesamte Figma-Datei von Abdul Sial hier durchsuchen: Komponentenvorlage .

Weiterführende Literatur im Toptal Design Blog:

• Konsistenz ist der Schlüssel – So bauen Sie ein Figma-Designsystem auf
• Die Macht der Struktur – Ein Leitfaden zum Entwerfen von Systemmodellen
• Verständnis von Designsystemen und -mustern
• Die Kraft von Figma als Designtool
• Mini-Tutorial – Nutzung der Funktionen von Figma für den gesamten Designprozess