Building a design system
A project to standardize the design of the Yomoni web app and simplify the implementation of new features.
A huge Figma library with design tockens, declinable components and strict guidelines.
Create an atomic component library of the Yomoni webapp in Figma, to be able to create new features, interfaces and prototypes easily.
Yomoni is a fintech that makes online savings management simple and transparent. It offers various investment products (life insurance...) and a full digital experience to help clients keep track of their investments (performance, composition ...).
This online space is evolving quickly with new pages and features. It was necessary to create a design system in order to maintain it, design homogeneous interfaces and give a great experience to users.
Composition of the design system
Yomoni's design system is divided in three parts: a style guide, an atomic component library (atoms, molecules, organisms and templates) and documentation to simplify its use.
Zoom on the components
Figma allows you to create components and group them in a library that can be used in multiple files. To simplify and organise this library, we divided it according to the Atomic Design Methodology into 4 groups : Atoms, molecules, organisms and templates. Each group is broken down into 2 sub-categories for screen sizes, 📱 mobile and 🖥️ computer.
Each component uses Figma's auto-layout functionality to best fit into the prototypes. All components are available in several variants to cover every situations.
Yomoni's design system consists of more than 250 unique components and 1,500 variants to create an infinite number of interfaces and features.
Using the system
By using the library and the guidelines, we can create interfaces quickly and transform them into functional prototypes before sharing them with teams of developers for implementation.
All you have to do is pick a component from the list and insert it into a template. When a component is updated in the design system, the changes are immediately deployed everywhere.
What's next ?