Atomic Design
par Adeline & Godefroy
22' du 7 janvier 2022
Aider les Lonestoniens à utiliser et mieux comprendre l’Atomic Design
Qu’est-ce que l’Atomic Design ?
Approche du design modulaire
conçue par Brad Frost
https://bradfrost.com/blog/post/atomic-web-design/
C’est une méthode de design par composants qui permet d’anticiper la manière de les découper et de les organiser, en définissant une granularité.
Objectif : créer des Design Systems à partir de composants plus simples :
On l’utilise déjà sur une partie de nos projets.
C’est facile à apprendre
⬇️
✅ Quick win en perspective !
À quoi ça sert ?
- Conserver une cohérence de style et de représentation
- Gain de temps pour les équipes grâce à la standardisation
- La passation des maquettes est facilitée
- On sait où ranger les composants
- On sait où trouver un composant
Atomes
Un atome est un composant simple qui ne peut pas être divisé sans devenir non fonctionnel
Atomes
Exemples :
- Couleur
- Icon
- Typo
- Label
- Bouton
- Avatar
- Switch
- Input Control
- Images
- Shadow
- Gradient
Atomes
Atomes
Atomes
Molécules
Une molécule est un composant qui utilise plusieurs atomes
Molécules
Exemples :
-
Un input + button
-
Dropdown
-
Toggles
-
Pagination
Molécules
Organismes
Un organisme est un composant complexe
qui utilise plusieurs molécules et/ou atomes
Organismes
Exemples :
- Header
- Footer
- Navigation
- Card
- Tableau
- Modale
Organismes
Templates
Un template est un squelette de page sans contenu.
Il est composé d’organismes et/ou molécules et/ou atomes.
Templates
Exemples :
- Article de blog
- Fiche produit
Pages
Une page est issue d’un template et contient son contenu propre.
C’est le résultat final !
Pages
Exemples :
- Page produits
- Page de blog
- Page utilisateur
- Sur facebook : un mur
Point de vue Designer
Prévoir dans les maquettes de rendre la distinction bien claire pour les devs.
Le niveau de granularité peut évoluer selon le projet et le designer, c’est pourquoi il est important d’avoir une représentation en début et pendant le projet.
⚠️ Il arrive que la granularité change pendant le design du produit. (Ajout d’éléments, de composants...)
Point de vue Dev
En opposition à :
- L’approche par modules
- La séparation HTML / CSS / JS
Point de vue Dev
Arborescence :
Point de vue Dev
Arborescence :
On se pose moins de questions sur la manière de ranger les composants dans les dossiers.
Tous les atomes sont par exemple en vrac dans le dossier atoms.
Si on commence à avoir trop d’atomes, on peut les regrouper dans des dossiers thématiques au sein du dossier atoms, mais on ne casse pas cette arborescence.
On voit tout de suite dans les imports si les dépendances semblent cohérentes. Par exemple un atome ne devrait pas importer une molécule.
Point de vue Dev
Data / API :
En général on va avoir un usage de la data différent
selon la granularité.
-
Atomes et molécules :
Composants controlés, pas d’appels API
-
Organismes et pages :
Appels API possibles
Y'a plus qu'à !