Automated design system with Figma tokens

Lego for Lego to the front end

Figma: The blueprint

To ensure an optimal user experience, Helvetia creates design templates in Figma before developing applications. These form the starting point for the development of the reusable modules.

Pattern Library: The building blocks

Helvetia's Pattern Library contains a wide range of reusable Angular components that can be used as building blocks for larger applications. Developed according to the specifications from Figma, these provide a solid foundation.

Premium calculator: The Lego robot

For new applications such as a premium calculator, the Angular components are assembled and wired according to the Figma blueprint. This enables flexible and efficient development.

Changes to the design?

Design changes are common, be it a rebranding or minor adjustments. But the constant back and forth between Figma design and the pattern libraries can be time-consuming. But what if you could automate this process?

Already taken over.

The effort required to keep all pattern libraries synchronized with the Figma designs is high. That's why we have worked with Helvetia in a PoC to automate the process of design adjustments with the help of design tokens. This makes Figma a single source of truth.

How does that work?

Magic, of course. The kind of magic where CSS is generated directly from Figma. All design changes flow directly from Figma into the finished applications.

You want to know more? Gladly! Raphi has in his blog post describes exactly how this works with the design tokens.