Warum wir Storybook nutzen

Wie wir es schaffen, mit Storybook effizient und nachhaltig zu entwickeln und trotzdem individuelle UI-Komponenten erstellen können.

Radio Button, Toggle Button, Accordion - all dies sind UI-Komponenten, die eine Navigation in einer App ermöglichen. Um diese Komponenten für unsere Web Apps nachhaltig zu entwickeln, nutzen wir Storybook.
Storybook ist ein Open Source Tool, welches die isolierte Erstellung von UI Komponenten ermöglicht. Dazu gehört nicht nur die visuelle Erscheinung an sich, sondern beispielsweise auch die möglichen Zustände einer jeweiligen Komponente (z.B. aktiv/inaktiv).

Dynamische Interaktion mit den UI-Komponenten über die grafische Benutzeroberfläche von Storybook

Das als Website eingesetzte Design System kann mit Hilfe von Storybook auch als Komponentenbibliothek genutzt werden und dadurch in der Entwicklung Kosten einsparen. Die Komponenten werden, wie bisher auch, mit Angular entwickelt. Storybook stellt lediglich ein Hilfsmittel zur kontextfreien Visualisierung der Komponenten dar. Dies erleichtert die Entwicklung von wiederverwendbarem Code. Die angefertigten Komponenten sind von der Logik der jeweiligen App losgelöst. Sie sind modular angelegt und können innerhalb der Anwendung ausgetauscht werden. Dies ermöglicht zusätzlich ein einfaches Testen der jeweiligen Komponenten. Neben der Umsetzung des Designs ist aber auch die Ein- und Ausgabe von Daten zu berücksichtigen. Die Bausteine bekommen daher bereits im Code die Grundsteine gelegt, um diese Informationen einheitlich verarbeiten zu können.
Aufgrund dieser Vorgehensweise kann von einer erhöhten Konsistenz der Bausteine ausgegangen werden. Die Wiederverwendbarkeit wiederum sorgt dafür, dass die Komponenten mehrfach überprüft und stetig weiterentwickelt werden. Auch Änderungen, beispielsweise der Farbe, können auf diese Weise vergleichsweise schnell vorgenommen und Doppelentwicklungen vermieden werden.
Bevor unsere Entwickler:innen die Komponenten allerdings anlegen können, benötigen sie Informationen darüber, wie diese aussehen sollen. Die Design-Entwürfe werden von unseren UX/UI-Designer:innen in Figma hinterlegt. Um etwa Maße, Farbe und Icons korrekt umsetzen zu können, erhalten unsere Entwickler:innen einen (read-only) Zugriff auf Figma.

Readonly-Zugriff auf die Design-Entwürfe in Figma aus Entwicklersicht

Um auf Entwickler:innen-Seite überprüfen zu können, ob die Designanforderungen aus Figma exakt so in Storybook umgesetzt wurden, wie das Design es vorgibt, nutzen wir zusätzlich ein Figma-Plug-In in Storybook. Auf diese Weise kann schnell visuell überprüft werden, ob entwickelte Komponenten der Design-Vorlage entsprechen.

Überprüfung des Designs über ein Figma-Plugin in Storybook

Um den Design & Entwicklungs-Prozess der Komponenten nachhaltig zu gestalten, legen wir die Dokumentation in Zeroheight ab. Diese Plattform ermöglicht die automatische Synchronisation der Figma-Design-Library, sodass die Design-Vorlagen (Farben, Schriften, Abstände, etc.) einfach integriert werden können. Zusätzlich bietet Zeroheight die Möglichkeit, ein Live Preview sowie Code Snippets aus Storybook anzeigen zu lassen. Allen Beteiligten soll dadurch ermöglicht werden, die benötigten Informationen zentral und übersichtlich abrufen zu können.
Auf diese Weise ist es uns möglich effizienter und somit am Ende kostengünstiger zu entwickeln.

Entdecken
Zurück zur Stories-Übersicht
Interessiert?
Wir freuen uns auf Sie!
Ihr Ansprechpartner
Henrik Johannsen
Kontakt
Weshalb UX-Methoden für eine gute User Experience notwendig sind
UX-Konzeption

Ein Interview mit der Senior UX-/UI-Designerin Wibke über die Arbeit mit UX Methoden in Kunden-Workshops.

Entdecken
Sennheiser CapTune App für iOS und Android
Agile Softwareentwicklung

In Zusammenarbeit mit Sennheiser wurde die CapTune App, ein Musik-Player der speziell auf die Bedürfnisse der Sennheiser-Kunden angepasst ist, weiterentwickelt.

Entdecken
Kontakt

Wir freuen uns auf Sie!

Ihr Ansprechpartner
Henrik Johannsen
Vielen Dank für Ihre Nachricht! Wir werden uns so schnell wie möglich bei Ihnen melden.
Ihre Nachricht konnte nicht gesendet werden. Schreiben Sie uns bitte per Mail (info@projektionisten.de).