Atomic Design

L’atomic design est une méthode de conception d’interfaces créée par Brad Frost : on construit une interface comme on assemble de la matière, des plus petits éléments (atomes) jusqu’à la page complète, en passant par les molécules, les organismes et les templates. Le but : des interfaces cohérentes, des composants réutilisables et un produit facile à faire évoluer.

D’où vient l’atomic design

Brad Frost, webdesigner américain, présente l’idée en 2013 dans un article intitulé « Atomic Web Design », puis la développe dans un livre, Atomic Design, paru en 2016. Il y insiste sur un point que les résumés oublient : selon son site (consulté en octobre 2026), l’atomic design n’est pas un processus linéaire. C’est un modèle mental qui permet de voir une interface à la fois comme un tout et comme un ensemble de pièces, pas une suite d’étapes à cocher dans l’ordre.

Les cinq niveaux, avec un exemple filé

Prenons un bloc d’inscription à une newsletter, présent en bas de chaque article d’un site.

1. Atomes : l’étiquette « Votre e-mail », le champ de saisie, le bouton, la couleur de marque, la taille de police. Pris seuls, ils ne servent à rien, mais tout le reste en dépend.
2. Molécules : le champ associé à son étiquette et à son message d’erreur, ou le bouton accompagné d’une icône de chargement. Chacune remplit une fonction précise.
3. Organismes : le bloc d’inscription complet, avec son titre, une phrase d’accroche, la molécule champ et bouton, et la mention sur les données personnelles.
4. Templates : la page « article » qui prévoit l’emplacement du bloc, sans texte réel. On y juge la structure, pas le contenu.
5. Pages : l’article publié, avec son vrai titre, ses vraies images, sa vraie longueur.

Pourquoi les templates et les pages comptent autant que les atomes

Les deux derniers niveaux servent à mettre les composants à l’épreuve. Un titre de trois lignes, un nom de famille très long, une traduction plus longue que l’original, une image absente, une liste vide : voilà les cas qui cassent les interfaces. Un composant qui tient dans une vraie page, avec du vrai contenu, a de bonnes chances de tenir en production.

Sous les atomes : les design tokens

Couleurs, espacements, rayons d’angle, tailles de texte : ces valeurs ne sont pas des atomes, ce sont les réglages dont ils héritent. On les stocke sous forme de design tokens, nommés une fois pour toutes. Changer la valeur d’un token change l’aspect de tous les composants qui l’utilisent, ce qui donne à l’atomic design sa force dans la durée.

Atomic design dans Figma et dans Webflow

Dans Figma, la méthode s’appuie sur les variables, les composants, les variants et les composants imbriqués. Dans Webflow, elle se traduit par des variables, des classes de base, des classes combo et des composants réutilisables. Les deux outils parlent la même langue : un atome dessiné dans Figma retrouve son équivalent dans Webflow. Nous détaillons cette mise en pratique dans notre article sur l’atomic design et les design systems qui passent à l’échelle.

Par où commencer : l’inventaire d’interface

Brad Frost conseille de ne pas partir d’une page blanche mais de ce qui existe déjà : l’inventaire d’interface. On capture tous les boutons, titres, formulaires et cartes du site ou de l’application, on les range côte à côte, et on compte. On trouve souvent une douzaine de boutons presque identiques, avec chacun son arrondi et son bleu légèrement différent. On les regroupe, on tranche, on nomme, puis on construit la bibliothèque à partir de ce tri. C’est aussi un argument concret à montrer à une équipe qui doute de l’intérêt de la démarche.

Ce que chaque métier y gagne

Les designers arrêtent de redessiner le même bouton à chaque écran et se concentrent sur les cas d’usage. Les développeurs codent chaque composant une fois, avec ses variantes, au lieu de maintenir des copies qui divergent. Les équipes marketing et contenu assemblent de nouvelles pages à partir de blocs validés, sans repasser par une demande de maquette à chaque fois : c’est exactement ce que cherche un site Webflow bien structuré, où l’équipe garde la main sans rien casser. Quant aux responsables produit, ils obtiennent des délais plus prévisibles, car ajouter un écran revient surtout à recomposer des éléments existants.

Les limites de la méthode

• Les frontières sont floues. Un champ avec son étiquette est-il un atome ou une molécule ? Peu importe, tant que l’équipe tranche de la même façon.
• Le vocabulaire peut rebuter. Certaines équipes gardent la logique des niveaux mais parlent de « éléments », « composants » et « sections ».
• Elle est trop lourde pour un petit site. Une page d’atterrissage unique n’a pas besoin de cinq niveaux de documentation.
• Elle n’est pas un simple rangement. Mettre des composants dans des dossiers « atomes » et « molécules » ne suffit pas : chaque niveau doit réellement s’appuyer sur le niveau inférieur au lieu de redéfinir ses propres styles.

Atomic design, design system, UI kit : qui fait quoi

Le design system est l’ensemble que l’on livre : composants, règles, documentation. L’atomic design est une façon d’organiser ce système. Le UI kit, enfin, est la collection de composants visuels prête à l’emploi dans l’outil de design, souvent le point de départ d’un système plus complet.

Si vous voulez structurer vos composants avant qu’une refonte ou un nouveau produit ne les multiplie, c’est une partie de notre expertise UX/UI et Product design, qui couvre aussi les design systems.