Atomic design

Q: Atomic design et design system, c'est la même chose ?

Non. L'atomic design est la méthodologie de construction ; le design system en est souvent le résultat. L'atomic design propose une grammaire pour organiser les composants par niveaux de complexité. Le design system, lui, regroupe ces composants avec leurs règles d'usage, leur documentation et les principes qui guident les décisions de design. On peut avoir un design system sans suivre l'atomic design, et on peut appliquer l'atomic design sans avoir formalisé de design system complet.

Q: Faut-il impérativement appliquer les 5 niveaux de l’Atomic design ?

Non, et Brad Frost lui-même le reconnaît. Ce qui compte, c'est la logique de composition : partir des éléments les plus simples pour assembler vers des structures complexes. En pratique, beaucoup d'équipes travaillent avec 3 ou 4 niveaux selon la maturité de leur produit. L'important est que tout le monde parle le même langage, pas que la terminologie soit conforme au livre.

Q: Est-ce une méthode réservée aux grandes équipes ?

Pas nécessairement. Elle devient pertinente dès qu'un produit est partagé entre plusieurs designers ou plusieurs développeurs, ou dès qu'un projet a vocation à évoluer dans le temps. Poser une architecture claire dès le départ évite souvent des mois de dette de design à moyen terme. Une petite équipe qui anticipe sa croissance a tout à gagner à s'en inspirer, même partiellement.

Q: Comment l'atomic design s'articule-t-il avec le code ?

C'est l'apport principal de la méthode. Les atomes correspondent aux design tokens et aux composants les plus élémentaires côté développement, un bouton React, une variable CSS. Les molécules deviennent des composants composés. Quand designers et développeurs partagent la même nomenclature, les allers-retours entre Figma et la base de code se raréfient.

Méthode Design

L'atomic design, concevoir une interface par assemblage

Pendant longtemps, concevoir une interface revenait à dessiner des pages, sur le modèle de l'imprimé. Les écrans se sont multipliés, de la montre à la projection murale, et une page figée ne tient plus. Les interfaces se pensent désormais par assemblage de composants.

Brad Frost a formalisé cette logique en 2013 sous le nom d'atomic design, en empruntant son vocabulaire à la chimie. Une interface s'y décompose en 5 niveaux, des atomes aux pages, chacun assemblé à partir du précédent.

L'intérêt de la méthode tient moins au découpage qu'au vocabulaire commun qu'elle installe. Un designer et un développeur qui disent « molécule » désignent la même chose, et cette chose existe des deux côtés, un composant dans Figma, un composant dans la base de code.

À quoi sert l’atomic design ?

Nommer les composants d'une interface de la même façon dans Figma et dans le code
Réutiliser un composant existant plutôt que d'en redessiner une variante à chaque écran
Repérer les doublons dans une interface qui a grossi, deux boutons pour la même action, trois cartes presque identiques
Faire évoluer un élément à un seul endroit, une couleur ou un rayon de bordure qui se propage partout où l'atome est utilisé
Documenter un composant une fois, avec ses variantes et ses règles d'usage, plutôt que de répondre à la même question à chaque projet

Pourquoi adopter l’atomic design ?

Initier ou restructurer un design system dans une organisation qui a de nombreux produits
Réduire la dette de design dans un produit où les composants se sont multipliés sans logique commune
Faciliter l'intégration de nouveaux designers dans une équipe avec une structure claire

Pendant longtemps, concevoir une interface revenait à dessiner des pages, sur le modèle de l’imprimé. Les écrans se sont multipliés, de la montre à la projection murale, et une page figée ne tient plus : les interfaces se pensent désormais par assemblage de composants.

Brad Frost a formalisé cette logique en 2013 sous le nom d’atomic design, en empruntant son vocabulaire à la chimie. Une interface s’y décompose en cinq niveaux, des atomes aux pages, chacun assemblé à partir du précédent. L’intérêt de la méthode tient moins au découpage qu’au vocabulaire commun qu’elle installe : un designer et un développeur qui disent « molécule » désignent la même chose, et cette chose existe des deux côtés, un composant dans Figma, un composant dans la base de code.

Les atomes

qui correspondent à des éléments individuels. Par exemple : le gabarit d'une image, un bouton, une icône.

Les molécules

qui sont composées à partir des atomes qui forment un tout. Par exemple : un menu de navigation est une molécule, composée d'atomes comme le logo, un bouton, les différents liens, etc.

Les organismes

qui se forment à partir de molécules. Ils correspondent à des ensembles de blocs

Les templates

ou gabarits, qui représentent la structure globale de la page (mais sans le contenu final). Puis, les pages, contenant tous les éléments finaux (ainsi que les textes et images)

Toujours dans le but d’améliorer la communication et le travail entre développeurs et designers, il est important de nommer correctement vos composants. Chaque élément doit être nommé avec des minuscules et les mots doivent être séparés par des tirets. Cette norme permet aux développeurs d’avoir des éléments faciles à implémenter. On commence par la lettre représentant votre atome (a pour atome, m pour molécule, o pour organisme, etc.); puis le type d’élément et ses variations.

Exemple pour votre bouton principal : a-btn-principal Attention à nommer les composants selon leurs fonctions et non pas sur leur forme (couleurs, formes, aspect). N’oubliez pas que votre charte va évoluer. Exemple à ne pas faire : a-btn-rouge

Atomic design et design system, c'est la même chose ?

Faut-il impérativement appliquer les 5 niveaux de l’Atomic design ?

Est-ce une méthode réservée aux grandes équipes ?

Comment l'atomic design s'articule-t-il avec le code ?

Bordeaux.fr : un portail qui informe les Bordelais autant qu'il les sert, sans concession sur l'accessibilité et l'écoconception

Voir l'étude de cas

Donner un toit numérique au design en Nouvelle-Aquitaine

Voir l'étude de cas

Toutvabiens : faire dialoguer les deux faces d'un marché immo

Voir l'étude de cas

Les méthodes liées

Design System

Le design system, c'est une bibliothèque de composants et la gouvernance qui va avec. Ce qui le distingue d'un design kit, et quand il devient nécessaire.

Design Pattern

Un design pattern est une solution éprouvée à un problème récurrent : breadcrumb, modal, accordéon. Ces conventions existent parce qu’elles fonctionnent pour les utilisateurs.

Design Kit

Le design kit, ou UI kit, rassemble les composants d'un produit dans un fichier de conception : boutons, formulaires, cartes, navigation, icônes.

Architecture de l'information

L'architecture de l'information organise contenu et navigation pour que les utilisateurs trouvent ce qu'ils cherchent. Elle guide le design d'interface

Design Ops

Le design ops optimise la pratique du design : outils, processus, handoff, documentation. Il permet aux designers de se concentrer sur la conception plutôt que sur la gestion.

Design d'interface

L'UI design conçoit la couche visuelle d'un produit : mise en page, couleurs, typographie, composants. Il traduit l'expérience en éléments tangibles.

Vous souhaitez en savoir plus sur nous ?

Tout le monde parle experience utilisateur, design de service, ergonomie...
C'est pas très clair, mais vous aimeriez bien découvrir tout ca ou progresser.

Parlons-en