Organiser les composants de son Design System avec Figma
Lorsque l’on conçoit un Design System, il y a de nombreuses façon d’organiser son fichier figma, et ça peux vite devenir compliqué à maintenir afin d’avoir quelque chose de propre.
De plus, les personnes utilisant votre Design System auront besoin de se repérer facilement afin de trouver les éléments qu’ils cherchent.
Il est donc important que votre Design System ne devienne pas une usine à gaz.
Les composants du Design System
Dans un Design System, on va entre autre lister l’ensemble des composants qui y figurent.
Pour ça, il y a 3 façons de faire :
- Avoir tous les composants sur une seule page,
- Avoir une page par composant
- Regrouper les composants par catégorie
1. Regrouper tous les composants ensemble
La première, serait d’avoir l’ensemble de ses composants sur une même page, que l’on pourrait regrouper par thématique (navigation, CTA, formulaires…) dans des frames.
Avantages :
Cette façon de faire a un avantage certain : elle permet d’avoir une vue globale tous les composants existants d’un coup d’oeil.
Inconvénients :
Seulement, quand on commence à avoir beaucoup de composants ou de nombreux variants pour chacun d’entre eux, ça peux commencer à être compliquer à maintenir.
Le risque est que lorsque l’on ajoute ou retire des composants ou variants, cela peux obliger à tout décaler dans sa page et ça peux très vite ressembler à une chambre d’enfant mal rangée car on a pas forcément le temps de rendre ça nickel.
Autre inconvénient : où ranger les atoms et molécules qui servent à la conception des composants ? Il y a de fortes chances pour cette page unique devienne un four tout.
2. Une page par composant
Autre solution, d’avoir une page par composant.
Dans ce cas, la bonne pratique est de la lister les composants par ordre alphabétique afin de réussir à trouver facilement le composant que l’on cherche.
Avantages :
Comparé à la solution précédente, celle-ci permet de gérer chaque composant indépendamment ainsi que tout ce qui va permettre de le construire (atoms, molécules…).
Il est également plus simple d’ajouter un nouveau composant.
Il suffit d’ajouter une nouvelle page et de la placer au bon endroit.
L’utilisation des composants est aussi plus simple. A partir du moment où on connait son nom, il est très simple de le retrouver grâce au tri alphabétique.
Inconvénients :
Si la personne qui va utiliser le Design System ne connait pas le nom exact du composant, ça peux être laborieux de le retrouver.
En effet, certains composants peuvent être appelé avec un nom différent et selon le nom utilisé on le retrouvera pas au même endroit.
Carousel ou Slider ?
Par exemple, si vous appelez un composant Carousel ou Slider, dans un cas il se retrouvera en haut de la liste, dans l’autre tout en bas. Ce qui peux ruiner l’expérience du Design System.
3. Regrouper les composants par catégorie
La troisième solution est un mélange des deux précédentes.
Cela consiste à avoir une page par composants, mais triée par catégorie.
Avec cette méthode, on retrouvera par exemple tous les éléments de formulaires au même niveau
Avantages :
Cette méthode permet de simplifier la clarté de la liste des composants : les catégories sont listées par ordre alphabétique, ainsi que les composants au sein d’une catégorie.
Inconvénients :
Selon les cas, il peux être parfait plus compliqué de définir le bon terme de catégorie. Cela nécessite aussi d’être très rigoureux quant à l’organisation, mais c’est aussi cela qui fait un bon Design System.
