‍

‍

Pour la suite de cette série sur le design system, on va parler : atomic design ! Parce qu’il est toujours bon de se remémorer les bases, voici quelques éléments clés pour comprendre les fondations du design system.

L’atomic design est une méthodologie initiée par Brad Frost pour créer des interfaces de manière hiérarchique. Les 5 couches de l’atomic design sont :

‍

• Les atomes : ils représentent les formes les plus basiques comme les zones d’images, les typo ou les icônes.

• Les molécules sont quant à elles des groupes composés d’atomes. Comme par exemple l’association d’une zone d’image, d’une zone de texte et d’un background.

• Les organismes sont composés de molécules, ce sont des composants plus complexes.

• ‍Le template : on y regroupe les différents organismes dont on a besoin pour créer notre interface.

• La page : c’est le dernier niveau de hiérarchie et reprend la structure du template, tout en ajoutant le rendu réel de la page, avec les images et le texte définitif par exemple.

‍

Grâce à ces notions, l’atomic design découpe les éléments d’une page en petits composants. Le fait de découper sa librairie et de la réorganiser avec cette méthode permet tout simplement de faire un inventaire de ses composants dans un premier temps. De les trier et éviter les doublons ensuite, et enfin de donner du sens à cette librairie.

En effet, regrouper les atomes en molécules, puis les molécules en organismes et en templates permet de se rendre compte de l’utilité et de l’usage spécifique de chaque composant et ainsi, pouvoir les utiliser au mieux par la suite.

La semaine prochaine, on verra comment construire son design system 🛠️ stay tuned !

‍

‍

Ressources :

https://atomicdesign.bradfrost.com/chapter-2/

https://www.usabilis.com/atomic-design/

‍

‍

‍

‍

Pour en savoir plus, j'ai créé un ebook avec tout ce qu'il y a à savoir sur le sujet ! N'hésite pas à aller voir si tu cherches un document contenant les fondations sur ce sujet. Il est disponible ici !