Zeitgemäße Design Systems mit Figma, Storybook und Angular, Teil 3
Der letzte Teil der Artikelserie beschäftigt sich mit dem Zusammenspiel der Tools und Unit-Tests und zeigt, wie man damit Komponenten einfach testen kann.
(Bild: Blackboard/Shutterstock.com)
- Christian Liebel
- Andreas Wissel
Der vergangene Teil der Artikelserie hat den Workflow zum Erstellen von Komponenten mit den Tools Figma, Storybook und Angular demonstriert. Nach einer kurzen Zusammenfassung folgt im letzten Teil der Serie nun ein Ausblick darauf, wie das gezeigte Vorgehen hilft, die erstellten Komponenten einfach zu testen.
Übersicht der bisherigen Schritte
Eine neue UI-Komponente beginnt im vorgestellten Workflow zunächst in Figma. Dort können Designer ohne Codekenntnisse die Oberfläche zusammensetzen. Weiterhin lassen sich die Entwürfe mit anderen Projektbeteiligten mit synchronisierten Viewpoints teilen, sodass man schnell Feedback einholen kann. Figma unterstützt Entwickler insoweit, als dass es CSS-Fragmente für das ausgewählte Element anzeigt. In vielen Fällen können Entwickler das zu großen Teilen einfach übernehmen.
Anschließend legt man die Komponente in Angular an. Es empfiehlt sich, pro Komponente ein Angular-Modul zu erzeugen. So verfährt beispielsweise die Komponentenbibliothek Angular Material. Da Module als Fassaden agieren, führt eine modulinterne Umstellung nicht zwangsläufig zu einem Breaking Change für die Verwender. Für jede Komponente legen Entwickler außerdem eine Story für Storybook an. Sie übernehmen daraufhin die CSS-Stile aus Figma und passen sie auf die Komponente an. Anschließend folgt die Implementierung des HTML-Aufbaus und der Logik, gegebenenfalls inklusive Unit-Tests.
Als nächstes können Anwender die passende Story hinzufügen, die die echte Komponente nun wieder Designern und anderen Projektbeteiligten verfügbar macht. Anschließend bietet sich ein Review mit den Designern an, bei Bedarf erfolgt eine Wiederholung der obigen Schritte. Bis jetzt funktioniert die Komponente komplett isoliert. Erst zum Schluss wird sie in die Anwendung integriert.
