Zeitgemäße Design Systems mit Figma, Storybook und Angular (Teil 1)

Zeitgemäße Anwendungen erfordern eine enge Zusammenarbeit von Entwicklern und Designern. Die Tools Figma, Storybook und Angular helfen bei der Kollaboration.

Lesezeit: 7 Min.
In Pocket speichern
vorlesen Druckansicht Kommentare lesen 13 Beiträge

(Bild: Blackboard/Shutterstock.com)

Von

Inhaltsverzeichnis

App-Entwickler kennen das Problem: Softwareentwickler und Designer sprechen oftmals eine andere Sprache. Steigende Anforderungen an zeitgemäße Software erfordern jedoch, dass beide zusammenarbeiten. Die Artikelserie erklärt, wie Softwareanbieter mit dem JavaScript-Framework Angular und den Tools Figma und Storybook robuste Design Systems aufziehen können, die Entwickler und Designer näher zusammenbringen. Ergänzend zu den Werkzeugen hilft ein Prozess, der zur interdisziplinären Zusammenarbeit anregt.

Storybook hilft, Entwurf und Code näher zusammenzubringen. In einer Bibliothek erhalten Entwickler und Designer einen einfachen Zugang zu Komponenten, ohne die komplette Anwendung starten zu müssen. Eigenschaften lassen sich über eine Formularmaske anpassen, die die Änderungen direkt umsetzt. (Abb. 1)

Heutige Clientanwendungen laufen nicht mehr nur auf Windows, sondern müssen sich auf einer ganzen Reihe an Plattformen behaupten: Das schließt die Desktopbetriebssysteme Windows, macOS und Linux, aber auch mobile Betriebssysteme wie iOS und Android und das Web ein, wo mit Progressive Web Apps ebenfalls ein Anwendungsmodell zur Verfügung steht. Entwickler plattformübergreifender Software stehen oftmals vor dem Problem, eine konsistente Benutzererfahrung über die Plattformen hinweg anzubieten. Google implementiert in Chrome beispielsweise Material Design, das sich nur an den Stil der nativen Plattform anlehnt.

Spotify ignoriert die Plattformkonventionen sogar komplett und etabliert stattdessen eigene Konventionen, die unabhängig von der Zielplattform funktionieren und den Nutzer durch iterative Änderungen langsam aufgleisen. Oberflächen müssen nicht mehr nur schick aussehen – vielmehr müssen sie Anwender an die Software binden.

Mehr Infos

Die Artikelserie im Überblick:

Der nächste Teil der Serie stellt den Entwicklungsworkflow vor: Es wird eine UI-Komponente in Figma erstellt, in Angular implementiert und in Storybook zugänglich gemacht – mithilfe des Storybook-Add-ons Knobs auch für Nichtentwickler.

mehr anzeigen

Mit den wachsenden Anforderungen an Applikationen steigt der Bedarf für robustere Prozesse. Im Kontext agiler Softwareentwicklung gilt vor allem eine Maxime: Scheitere früh, scheitere oft. Releasezyklen sind immer kürzer, um möglichst wenig Reibungsverluste gegenüber den Mitbewerbern zu erzeugen und Hypothesen früh zu validieren. Dafür braucht es einen verlässlichen Prozess, der iterativer Entwicklung Stand hält.

Eine solche Komponentenbibliothek ist Teil eines Design Systems (Abb. 2)

Design Systems bieten hierfür einen Weg: Sie sind zugleich Dokumentation, Komponentenbibliothek (s. Abb. 2) und Werkbank für das komplette Team. Aus Techniken wie Living Styleguides, Kompontenbibliotheken und Pattern Libraries gewachsen bieten sie eine einfache Möglichkeit, einen Konsens im Team zu erzeugen. Darüber hinaus bieten Design Systems die Chance, die Entwicklung von komplexen Applikationen durch Dokumentation und klare Schnittpunkte zu entwirren. Vor allem steht bei Design Systems ein Kerngedanke im Vordergrund, der in der Softwareentwicklung seit Jahrzehnten großen Anklang findet: Alles basiert auf Komponenten.