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.

Lesezeit: 4 Min.
In Pocket speichern
vorlesen Druckansicht Kommentare lesen 1 Beitrag

(Bild: Blackboard/Shutterstock.com)

Von
Inhaltsverzeichnis

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.

Zeitgem??e Design Systems mit Figma, Storybook und Angular

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.

汤姆叔叔影院