Zeitgemäße Design Systems mit Figma, Storybook und Angular, Teil 2

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

In Pocket speichern vorlesen Druckansicht 3 Kommentare lesen
Zeitgemäße Design Systems mit Figma, Storybook und Angular, Teil 2

(Bild: Blackboard/Shutterstock.com)

Lesezeit: 16 Min.
Von
  • Christian Liebel
  • Andreas Wissel
Inhaltsverzeichnis

Entwickler können exemplarische UI-Komponenten mit Figma entwerfen, in Angular implementieren und in Storybook bereitstellen. Das Ergebnis ist ein Design System, das auch für Nichttechniker verständlich ist.

Der erste Teil der Artikelserie widmete sich dem Grundgedanken von Design Systems, dem Designwerkzeug Figma, der Installation des Angular-Frameworks und der Konfiguration von Storybook. Dieser Teil erläutert den Workflow zur Bereitstellung von Komponenten im Design System mit Figma. Dort können sämtliche Projektbeteiligte die Komponenten isoliert voneinander ausprobieren, ohne die echte Anwendung auszuführen oder Quellcode verstehen zu müssen. Das bringt Designer und Entwickler näher zusammen.

Zeitgemäße Design Systems mit Figma, Storybook und Angular

Mit dem Interface-Designwerkzeug Figma können Anwender diverse Komponenten erstellen. Das Ziel ist eine Log-in-Komponente, die sich aus mehreren Unterkomponenten zusammensetzt: Aus einer Schaltfläche, Textboxen und Feldgruppen für das Log-in-Formular. Das demonstriert die Komposition von Komponenten.

Zunächst müssen Nutzer ein neues Projekt in Figma anlegen. Anschließend können sie im frischen Projekt direkt mit einem Frame (aus anderen Tools als Artboard bekannt) starten. Hierbei besteht die Wahl zwischen Displaygrößen und -formaten, um unterschiedliche Anwendungsfälle abzudecken. Abhängig davon, welches Format man wählt, erhält man anschließend zunächst ein weißes Rechteck mit den entsprechenden Abmaßen. In der Toolbar findet man direkt die aus Grafikdesign-Tools gewohnten Werkzeuge.

Neues Artboard in Figma (Abb. 1)

Da Figma immer in flexiblen und dynamischen Komponenten denkt, verhält sich der Frame ähnlich wie eine Komponente. Er dient als Rahmen (daher der Name) für die innenliegenden Komponenten, die direkt auch Constraints zum Rahmen umfassen.

Als Startpunkt dient eine einfache Card-Komponente, die anschließend den Container der Log-in-Komponente darstellt. Sie ist beispielsweise ein einfaches Rechteck, mit Schlagschatten und gerundeten Ecken. Anschließend kann man mit einem Klick eine erste Komponente erstellen.

Neue Komponente erstellen: ein einzelner Klick genügt (Abb. 2)

In der neu erstellten Komponente können Anwender nun die zuvor genannten Constraints in der rechten Sidebar definieren. Wählt man beispielsweise "Left & Right", fällt bei Veränderung der Frame-Größe auf, dass sich die Größe der Komponente entsprechend verändert.