Automatisiertes Design System mit Figma Tokens

Ein Gebäude der Helvetia Versicherung, fotografiert von aussen mit einer grossen Skulptur im Vordergrund in der Form des Logos der Helvetia Versicherung.

Kunde

In vielen Brands dieselben Komponenten verwenden und bei Design-Änderungen automatisch aktualisieren. Ja das geht. Mit Figma Design Tokens haben wir für die Helvetia einen Proof of Concept für ein automatisiertes Design System gebaut. Die Änderung wird in Figma von einem Designer vorgenommen, danach automatisiert getestet und nach einem Verifizierungsprozess in den Code übernommen.

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.

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.