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.
Date
October 2020
Role
Product designer
Project owner
Tools
Scope
Product analysis
Product thinking
Visual design
Prototyping
Design process
Documentation
Brief
Create an atomic component library of the Yomoni webapp in Figma, to be able to create new features, interfaces and prototypes easily.
About Yomoni
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.
Some numbers
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 ?
A design system must constantly evolve, so there are still many components to be added, but it can already allow to create functional design, new features and prototypes quickly.
