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.](https://www.datocms-assets.com/107148/1718622998-helvetia_design_tokens.jpg?auto=format&w=1504)
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.](https://www.datocms-assets.com/107148/1715689143-smartive-eroeffnung-office-sg-2023-high-res-057.jpg?auto=format&w=1504)
![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.](https://www.datocms-assets.com/107148/1700576263-smartive-buero-2023-high-res-70-min_khvlkh.jpg?auto=format&w=1504)
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.
![](https://www.datocms-assets.com/107148/1720518325-toni-from-smartive.png?auto=format&fit=crop&h=128&w=128)
«Die Zusammenarbeit war sehr positiv und unkompliziert. Wir konnten den Nutzen und die Machbarkeit von Design Tokens bei Helvetia aufzeigen.»
Toni Gutweniger, Head CMS & UX bei Helvetia Versicherung
![Raphael Wirth](https://www.datocms-assets.com/107148/1703251197-raphael-wirth-mugshot-2023-low-res-01-quadratisch.jpg?auto=format&fit=crop&h=208&w=208)
Raphi weiss mehr über Design Tokens als über Kaffee. Aber er macht dir auch gern einen Kaffee.
Passend zu dieser Geschichte
Teaser zu relevanten Inhalten
![Mitarbeiter von smartive beim Pingpong Rundlauf während des Sommerfests](https://www.datocms-assets.com/107148/1708347323-sommerfest-2023-smarties.jpg?auto=format&fit=crop&h=240&w=460)
![](https://www.datocms-assets.com/107148/1703251197-raphael-wirth-mugshot-2023-low-res-01-quadratisch.jpg?auto=format&fit=crop&h=50&w=50)
Februar 2024
Design Tokens: Das Ende des Ping-Pongs zwischen Design und Entwicklung
![](https://www.datocms-assets.com/107148/1697099275-supermarkt-3.jpg?auto=format&fit=crop&h=240&w=460)
Migros Shared Components
Components Library für die Migros-Welt
User Experience & Design
Wir helfen Unternehmen, Geschäftsziele zu erreichen, indem wir benutzerzentrierte Erfahrungen kreieren.