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'à !

Merci pour votre attention