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.
(Bild: Blackboard/Shutterstock.com)
- Christian Liebel
- Andreas Wissel
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.
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.
Was sind eigentlich Design Systems?
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.
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.
