Atomic design

L'atomic design est une méthode de conception d'interfaces qui consiste à assembler de petits éléments réutilisables, les atomes, en éléments de plus en plus grands, molécules, organismes, gabarits et pages, plutôt que de dessiner chaque écran à partir de zéro. Elle donne aux designers et aux développeurs un vocabulaire commun pour les parties d'une interface, ce qui garde un site ou un produit en croissance cohérent visuellement et structurellement à mesure que de nouvelles pages s'ajoutent.

‍

Qu'est-ce que l'atomic design ?

L'atomic design a été formalisé par le designer Brad Frost comme une façon de penser les interfaces en partant d'abord de leurs plus petits éléments constitutifs, puis des combinaisons construites à partir d'eux, en empruntant à la chimie le vocabulaire d'atome, de molécule et d'organisme comme métaphore. Au lieu d'un fichier de maquette par page, une équipe entretient une bibliothèque de composants à chaque niveau, et une page devient l'assemblage d'éléments déjà validés plutôt qu'un dessin isolé. C'est ce qui fait de l'atomic design la fondation naturelle d'un design system moderne. Cela compte parce que cela transforme la cohérence visuelle d'une discipline qu'une équipe doit imposer manuellement en une structure que la bibliothèque de composants impose par défaut.

‍

Les cinq niveaux de l'atomic design

Un exemple simple montre comment les niveaux s'emboîtent les uns dans les autres :

Atome : bouton -> Molécule : barre de recherche (champ + bouton) -> Organisme : en-tête du site (logo + barre de recherche + navigation) -> Gabarit : structure de la page d'accueil -> Page : page d'accueil avec le contenu réel

• Atomes : les plus petits éléments qui ne peuvent plus être décomposés, un bouton, un champ de saisie, un libellé, un token de couleur.
• Molécules : de petits groupes d'atomes qui fonctionnent ensemble, comme une barre de recherche combinant un champ et un bouton.
• Organismes : des sections plus complexes construites à partir de molécules et d'atomes, comme un en-tête ou une carte tarifaire.
• Gabarits : des mises en page au niveau de la page qui organisent les organismes dans une structure, avec un contenu provisoire.
• Pages : des gabarits remplis avec le contenu réel, les écrans effectivement vus par un visiteur.

Les niveaux ne forment pas une séquence de production stricte : en pratique, les équipes font souvent des allers-retours entre eux, affinant un atome après avoir découvert un besoin lors de la construction d'un organisme.

‍

Le lien entre atomic design et design system

En pratique, les atomes correspondent généralement aux design tokens et aux composants de base dans un outil comme Figma, les molécules et organismes deviennent la bibliothèque de composants réutilisables, et les gabarits définissent la façon dont ces composants peuvent se combiner sur une page. Nommer chaque niveau de façon cohérente, par exemple button/primary au niveau atome et header/default au niveau organisme, garde la bibliothèque navigable une fois qu'elle dépasse quelques dizaines de composants.

‍

Atomic design vs conception page par page traditionnelle

‍

Bonnes pratiques et pièges courants

Une bibliothèque doit rester légère : chaque variation visuelle n'a pas besoin d'un nouvel atome, et fragmenter à l'excès une interface en trop de composants minuscules rend le système plus difficile à parcourir que l'approche page par page qu'il remplaçait. Les organismes et gabarits doivent être relus comme de véritables mises en page, pas seulement comme un empilement de composants, car une interface peut être cohérente atome par atome tout en échouant en tant que page entière. Garder la même convention de nommage entre le fichier de design et les composants codés fait gagner plus de temps au passage en développement que la découpe atomique elle-même. Il est également utile de relire la bibliothèque périodiquement et de retirer les atomes ou molécules que personne n'utilise, car une bibliothèque non entretenue redevient peu à peu aussi incohérente que l'approche page par page qu'elle devait corriger.

‍

L'atomic design chez BeBranded

Nous structurons chaque mission Design autour d'une bibliothèque de composants allant de l'atome à l'organisme dans Figma, avant même de dessiner une seule page complète, afin que le design system qui en résulte reste cohérent à mesure que le produit grandit.