HSI

Entwicklung eines modernen UI-Designsystems für aWall

Das entwickelte Designsystem verbindet Gestaltung, Implementierung und Qualitätssicherung und schafft eine gemeinsame Grundlage für die Weiterentwicklung von aWall.

Übersicht des aWall-Designsystems mit Figma, Design Tokens, Angular-Komponenten, Storybook, CI und der aWall-Anwendung
Die Architektur führt Design Tokens, Figma, Angular-Komponenten, Storybook und automatisierte Prüfungen in einem nachvollziehbaren Entwicklungsprozess zusammen.

Ausgangslage

aWall ist eine kollaborative Softwareplattform für agile Teams auf grossformatigen Multi-Touch-Displays. Durch die fortlaufende Weiterentwicklung wurden die visuellen Entwürfe in Figma und die technische Umsetzung im Angular-Frontend zunehmend unabhängig voneinander gepflegt.

Da eine verbindliche Referenz fehlte, entstanden unterschiedliche Komponentenstände und dezentrale Gestaltungswerte. Dies erschwerte konsistente Änderungen, die Wiederverwendung von UI-Komponenten und eine systematische Qualitätssicherung.

Zielsetzung

Ziel der Arbeit war, aWall gestalterisch und systematisch auf eine konsistente, nachvollziehbare und zukunftsfähige Grundlage zu stellen. Dafür wurde ein durchgängiges, tokenbasiertes Designsystem aufgebaut, das Figma-Artefakte, eine Angular-Komponentenbibliothek und eine ausführbare Storybook-Dokumentation miteinander verbindet.

Storybook verbindet Figma, Code und Dokumentation, indem die tatsächlichen Angular-Komponenten gemeinsam mit ihren Zuständen, Schnittstellen und Designreferenzen dokumentiert werden. Automatisierte Interaktions-, Accessibility- und visuelle Regressionstests sichern die dokumentierten Komponentenzustände ab.

Verzahnung von Design und Code

Gerichteter Tokenfluss von tokens.json über Style Dictionary zu CSS und über einen Adapter nach Figma

Gemeinsame Benennungen, Design Tokens und direkte Komponentenreferenzen verbinden Figma mit der Angular-Implementierung. Dadurch werden Designentscheidungen nachvollziehbar übertragen und Abweichungen frühzeitig sichtbar.

Dokumentation und Qualität

Storybook als ausführbare Dokumentation mit Interaktions-, Accessibility- und visuellen Regressionstests

Storybook dokumentiert die tatsächlichen Angular-Komponenten. Play-Funktionen, Axe, Chromatic und GitLab CI prüfen Interaktionen, Barrierefreiheit und ausgewählte visuelle Referenzzustände.

Integration in die Bestandsanwendung

Vergleich der Legacy-Integration mit der neuen Trennung aus Anwendungsadapter, UI-Bibliothek und Design Tokens

Die neue Architektur wurde anhand von drei repräsentativen UI-Bereichen produktiv validiert. Das daraus entstandene Integrationsmuster bildet die Grundlage für die schrittweise Modernisierung weiterer Bereiche der aWall-Anwendung.

Ergebnisse

Das Projektergebnis ist eine separat baubare Angular-Komponentenbibliothek mit zentraler Token-Pipeline sowie einer gemeinsamen Dokumentations- und Prüfumgebung. Für alle 42 UI-Komponenten bestehen entsprechende Komponenten in Figma. Storybook verzahnt Design, Code und Dokumentation, indem es 208 ausführbare Komponentenbeispiele mit Varianten, Zuständen, Interaktionen und relevanten Grenzfällen zentral zusammenführt.

  • Mehrschichtige Design-Tokens aus primitiven, semantischen und komponentenspezifischen Ebenen.
  • Generierte CSS Custom Properties sowie ein Figma-kompatibles Token-Artefakt aus derselben Quelle.
  • 42 Komponenten in Atome (zb. Button, Icon und Avatar), Moleküle (zb. Form Field und Date-picker) und Organismen (zb. Issue Detail, Toolbar und Footer) gegliedert.
  • Produktive Integration von ausgewählten Organismen in die bestehende aWall-Anwendung.
  • 208 ausführbare Szenarien in Storybook mit Interaktions- und Accessibility-Prüfungen.
  • Einbindung von Token-Build, Komponenten-Build, Tests, Storybook und visueller Regression in GitLab CI/CD.

Die repräsentativen Migrationen zeigen, dass sich das entwickelte Designsystem produktiv in die bestehende aWall-Anwendung integrieren lässt. Die Token-Architektur, die nach Atomic Design strukturierte Komponentenbibliothek und die automatisierte Qualitätssicherung trennen wiederverwendbare Darstellung klarer von der Anwendungslogik und schaffen eine konsistente, wartbare Grundlage für die Modernisierung weiterer UI-Bereiche.

Technische Schlüsselbegriffe

  • FrontendAngular 16.2, TypeScript, HTML, CSS
  • DesignsystemDesign Tokens, DTCG, Atomic Design, Intrinsic Design
  • Design und DokumentationFigma, Tokens Studio, Storybook, Compodoc
  • ToolchainStyle Dictionary, GitLab CI/CD
  • QualitätssicherungPlaywright, Axe, Chromatic, visuelle Regression

Team

Miro De Nardo
Andrin Sibold

Betreuung
Prof. Martin Kropp
Fabian Affolter