Atomic design : les 5 niveaux, la méthode et ses limites

L'atomic design est une méthode de conception d'interfaces qui organise l'UI en cinq niveaux emboîtés : atoms, molecules, organisms, templates et pages. Chaque niveau se compose du précédent. Un champ de saisie et un bouton sont des atoms ; ensemble avec leur libellé ils forment un molecule, une barre de recherche ; placée dans un en-tête avec le logo et la navigation, elle devient un organism. La méthode a été formulée par Brad Frost dans un article de 2013, puis dans un livre dont le texte reste consultable librement sur atomicdesign.bradfrost.com.

L'idée centrale tient en une phrase : on conçoit un système, pas des pages. Les pages en sont la conséquence.

Les cinq niveaux, avec un exemple qui tient

Atoms. Les éléments indivisibles : une couleur, une graisse typographique, un bouton, un champ, une étiquette, une icône. Pris isolément, un atom ne sert à rien. C'est pourtant à ce niveau que se décident l'accessibilité et la cohérence : un contraste insuffisant sur le bouton primaire se propage dans toute l'interface.

Molecules. Deux ou trois atoms groupés pour remplir une fonction précise. Libellé, champ et bouton forment un bloc de recherche. C'est le premier niveau où l'ensemble fait quelque chose.

Organisms. Des sections autonomes, composées de molecules et d'atoms : un en-tête complet, une grille de produits, un formulaire de contact, un pied de page. Un organism se déplace d'une page à l'autre sans se casser.

Templates. La structure d'une page, avec ses zones et sa hiérarchie, remplie de contenu factice. On y vérifie les proportions et les enchaînements, pas la rédaction.

Pages. Le template avec le contenu réel. C'est le seul niveau où l'on découvre ce qui ne marche pas : un titre de six mots qui en fait dix-neuf, une carte produit sans image, un tableau à douze colonnes. Ne sautez jamais cette étape, elle est faite pour casser le système avant que les utilisateurs ne le fassent.

Atomic design et design system : la confusion à dissiper

Les deux termes sont souvent employés l'un pour l'autre. Ils ne désignent pas la même chose.

L'atomic design est une taxonomie, une façon de ranger et de nommer les briques d'interface. Le design system est un produit : une bibliothèque de composants réels, des jetons de design, une documentation d'usage, une gouvernance qui dit qui décide et comment une évolution est validée.

On peut construire un design system sans jamais prononcer le mot atom. L'inverse est vrai aussi : ranger des écrans Figma en cinq dossiers ne crée pas un design system, cela crée cinq dossiers. La méthode donne un vocabulaire commun, elle ne remplace ni la documentation ni les décisions.

Là où la méthode coince

Il faut le dire, parce que la plupart des articles sur le sujet ne le disent pas.

La frontière molecule et organism se discute sans fin. Une carte produit avec image, titre, prix et bouton : molecule complexe ou petit organism ? La question n'a pas de réponse, et les équipes y perdent des heures. La convention la plus praticable consiste à trancher sur l'autonomie : si l'élément a du sens posé seul sur une page, c'est un organism.

La métaphore chimique ne parle pas aux clients. En réunion avec une direction marketing, expliquer qu'on va valider les molecules avant les organisms fait perdre la salle. Beaucoup d'équipes gardent la structure et changent les noms pour éléments, blocs, sections, gabarits, pages. Le résultat est identique et la conversation est plus simple.

Cinq niveaux, c'est parfois trop. Sur un site vitrine de huit pages, la hiérarchie complète coûte plus de temps qu'elle n'en fait gagner. Trois niveaux suffisent : éléments, sections, pages.

Le découpage ne dit rien de la cohérence. On peut produire quarante atoms incohérents entre eux. Ce sont les jetons de design, couleurs, espacements, échelles typographiques, qui tiennent la cohérence, pas la taxonomie.

La critique classique sur la perte de créativité, en revanche, ne tient pas. Un système bien fait libère du temps sur les écrans répétitifs et permet d'en passer davantage sur les pages qui portent la marque. C'est le contraire de l'uniformisation, à condition que le système prévoie des échappatoires documentées.

Traduire l'atomic design en composants Webflow

La méthode n'a d'intérêt que si elle survit au passage en production. Voici la correspondance qui fonctionne en pratique.

Deux conditions pour que cela tienne. D'abord une convention de nommage stricte des classes, sans quoi la bibliothèque devient un cimetière de variantes ; la méthode Client First reste la référence sur ce point. Ensuite une utilisation réelle des composants, avec leurs props et leurs variantes, plutôt que des copies de blocs : le sujet est traité dans notre article sur les composants personnalisés Webflow.

Par où commencer, concrètement

Ne partez pas des atoms. C'est contre-intuitif et c'est pourtant la seule approche qui aboutit.

Commencez par un inventaire d'interface : relevez tous les boutons existants, tous les styles de titre, toutes les cartes. Vous trouverez treize gris et cinq boutons primaires. Cet inventaire, c'est l'argument qui débloque le budget.

Prenez ensuite deux ou trois gabarits réellement utilisés et remontez la chaîne : quels organisms les composent, quelles molecules dedans, quels atoms au fond. Vous obtenez une bibliothèque utile plutôt qu'exhaustive.

Faites vivre la bibliothèque au même endroit que la conception. Le passage de la maquette Figma à l'intégration est l'endroit où les systèmes se délient, et notre guide Figma to Webflow détaille comment limiter la casse. Enfin, faites porter les règles d'accessibilité par les atoms eux-mêmes, contraste, taille de cible, état de focus, plutôt que de les traiter en fin de projet, comme nous l'expliquons dans notre article sur l'accessibilité web.

Ce que ça change pour une équipe

Le bénéfice réel n'est pas la beauté du rangement, c'est l'autonomie. Une équipe qui dispose d'une bibliothèque nommée et documentée crée ses pages sans repasser par l'agence à chaque fois.

C'est exactement ce que nous avons mis en place pour Elevo : développement Webflow et formation, avec pour objectif une équipe autonome sur son site. Sans système de composants clair, une formation ne tient pas trois mois, parce que chaque nouvelle page repart d'une copie de l'ancienne et que la cohérence se dissout. La logique d'ensemble est resituée dans notre article sur le webdesign.

Synqro est une agence Webflow Premium Partner à Paris. Nous construisons ces bibliothèques et nous formons les équipes qui s'en servent. Parlons de votre système.

Questions fréquentes

Qu'est-ce que l'atomic design en une phrase ?

C'est une méthode qui découpe une interface en cinq niveaux emboîtés, atoms, molecules, organisms, templates et pages, pour concevoir un système de composants réutilisables plutôt que des écrans indépendants.

Qui a inventé l'atomic design ?

Le designer américain Brad Frost, qui a formulé la méthode dans un article de 2013 puis dans un livre dont le texte reste consultable en ligne sur atomicdesign.bradfrost.com.

Quelle différence entre atomic design et design system ?

L'atomic design est une façon de ranger et de nommer les briques d'interface. Le design system est le produit complet : bibliothèque de composants, jetons de design, documentation et gouvernance. On peut construire l'un sans l'autre.

Comment savoir si un élément est un molecule ou un organism ?

Le critère praticable est l'autonomie. Si l'élément garde du sens posé seul sur une page, c'est un organism. S'il n'existe que dans un ensemble plus grand, c'est un molecule. Ne passez pas plus de cinq minutes sur ce genre d'arbitrage.

L'atomic design convient-il aux petits projets ?

Pas dans sa forme complète. En dessous d'une dizaine de pages, trois niveaux suffisent : éléments, sections, pages. Les cinq niveaux prennent leur sens sur des produits à fort volume d'écrans ou sur plusieurs sites partageant une même marque.

L'atomic design bride-t-il la créativité ?

C'est la critique la plus courante et elle ne résiste pas à l'usage. Le système absorbe les écrans répétitifs et libère du temps pour les pages qui portent la marque. La condition est de prévoir des exceptions documentées plutôt que de les interdire.

Faut-il garder le vocabulaire chimique ?

Non, et beaucoup d'équipes le remplacent. La structure compte, les noms sont une convention. Éléments, blocs, sections, gabarits et pages fonctionnent aussi bien et passent mieux auprès des interlocuteurs non techniques.

Par quoi commencer pour créer sa bibliothèque ?

Par un inventaire de l'existant, pas par les atoms. Relevez tous les boutons, titres et cartes déjà en place, constatez les doublons, puis remontez la chaîne à partir de deux ou trois gabarits réellement utilisés.