Woodi : Design System, born to grow!
(EN)
What has been done
Semantic reflection
Wireframes
Identification of tokens
Mockups
What tools were used?
Figma
Figjam
ChakraUI
Token Studio
Objective
Create a library that adapts to the needs of the product (see Web app).
Why a design system?
We wanted to create a single "source of truth" for all our mockups. We wanted a place where all the rules of our product were completely indicated, where we could find system information (tokens) or complex components.
Specifications v2
As the work is relatively time-consuming, we started from an existing base (ChakraUI) to form a first base of elements, which we then remodeled to our image and according to our constraints :
10,000 components
180 system information (tokens)
(NEW) Figma Variables are here!
(NEW) All documentation
The UI Kit is on Figma here : https://bit.ly/3PHsUDS
Coming for v3
Improvement of widgets
Multilangual
More features coming!
(FR)
Ce qui a été fait
Réflexion Sémantique
Wireframes
Identification des tokens
Maquettes
Quels outils utilisés ?
Figma
Figjam
ChakraUI
Token Studio
Objectif
Créer une librairie qui s’adapte selon les besoins du produit (voir Web app).
Pourquoi un design system ?
Nous voulions créer une seule “source of truth” pour toutes nos maquettes. Nous voulions un endroit où toutes les règles de notre produit soient complétement indiquées, où nous pourrions trouver des informations systemes (tokens) ou composants complexes.
Specifications v2
Le travail étant relativement chronophage, nous sommes partis d’une base existante (ChakraUI) afin de nous former une première base d’éléments, que nous avons ensuite remodeler à notre image et selon nos contraintes.
10 000 composants
180 informations systèmes (tokens)
(NOUVEAU) Les Variables et thèmes sont disponibles !
(NOUVEAU) les
Le lien vers le Kit UI est ici : https://bit.ly/3PHsUDS
A venir pour v3
Amélioration des widgets
Multilangues
D’autres fonctionnalités arrivent !