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.

  • Design system

  • Desktop

  • Mobile

  • Pro

Yomoni - Design System - 1


October 2020


Product designer
Project owner


  • icon-figma
  • icon-maze
  • icon-jira
  • icon-confluence


Product analysis
Product thinking
Visual design
Design process


Create an atomic component library of the Yomoni webapp in Figma, to be able to create new features, interfaces and prototypes easily.

Yomoni - Design System - 2

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.

Yomoni - design system - 6

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.

Yomoni -design system - Playground

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.

Yomoni - isr - cover
Yomoni - design system - 9
Yomoni - design system - 4
Yomoni - mobile - cover