PoC für ein automatisiertes Design System

Helvetia ist eine der führenden Versicherungen der Schweiz. Hinter den Kulissen arbeitet ein komplexes Software-Ökosystem mit diversen Technologien. Doch wie bringen wir komplex innen mit einheitlich nach aussen zusammen? Design Tokens! So haben wir mit Helvetia ein Proof of Concept durchgeführt um das Design System über die gesamte Anwendungslandschaft zu vereinheitlichen.

Ein Computerbildschirm, auf dem eine Design- und Codeoberfläche mit Farbauswahlen auf der linken Seite und farbigen Inhaltsblöcken auf der rechten Seite angezeigt wird, daneben ein Smartphone, auf dem eine Webseite mit detaillierten Inhalten angezeigt wird.

Lego für Lego zum Frontend

Figma:
Der Bauplan

Für die optimale User Experience werden bei Helvetia vor der Entwicklung von Anwendungen Designvorlagen in Figma erstellt. Diese bilden den Ausgangspunkt für die Entwicklung der wiederverwendbaren Bausteine.

Pattern Library:
Die Bausteine

Die Pattern Library von Helvetia beinhaltet eine breite Palette wiederverwendbarer Angular-Komponenten, die als Bausteine für grössere Anwendungen verwendet werden können. Entwickelt nach den Vorgaben aus Figma, bieten diese eine solide Grundlage.

Prämienrechner:
Der Legoroboter

Für neue Anwendungen wie z.B. einen Prämienrechner werden die Angular-Komponenten nach dem Figma-Bauplan zusammengesetzt und verdrahtet. Das ermöglicht eine flexible und effiziente Entwicklung.

Eine Spielfigur steht auf einem weissen Spielzeug-Raumschiff mit der Aufschrift 'smartive', umgeben von bunten LEGO-Elementen.

Person mit Brille, die an einem Laptop arbeitet. Auf dem Laptop-Bildschirm und einem grösseren Monitor werden Codezeilen angezeigt. Auf dem Schreibtisch sind eine Wasserflasche, Kopfhörer und eine Pflanze zu sehen.

Veränderungen im Design?

Designänderungen sind üblich, sei es ein Rebranding oder kleinere Anpassungen. Doch das ständige Hin und Her zwischen Figma-Design und den Pattern Libraries kann zeitaufwendig sein. Aber was wäre, wenn man diesen Prozess automatisieren könnte?

Schon übernommen.

Der Aufwand, um alle Pattern Libraries mit den Figma Designs synchron zu halten, ist hoch. Daher haben wir gemeinsam mit Helvetia in einem PoC den Prozess von Design-Anpassungen mithilfe von Design Tokens automatisiert. Somit wird Figma zur Single Source of Truth.

Wie geht so was?

Magie, natürlich. Die Art von Magie, bei der aus Figma direkt CSS generiert wird. Alle Designänderungen fliessen aus Figma direkt in die fertigen Applikationen.

Du willst es genauer wissen? Gerne! Raphi hat nämlich in seinem Blogpost genau beschrieben, wie das mit den Design Tokens funktioniert.