Design system / 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 cinq 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 trois ou quatre 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.

Livrable

Une bibliothèque de composants, dynamique et qui sert de référence aux designers et développeurs

Le design system décrit de manière exhaustive les composants graphiques du produit conçu (police, couleurs, taille des éléments, états des éléments : hover, focus, cliqued, etc…). Il peut être perçu comme une bibliothèque de composants. Ce kit est amené à évoluer au fur et à mesure des besoins et des nouvelles fonctionnalités. Le design system permet de faciliter le travail entre les équipes de designers et de développeurs, les deux partis ayant un référentiel commun et partageable. Du côté utilisateur, ce kit assure une cohésion globale de votre plateforme/service et permet ainsi une meilleure expérience. Attention cependant, le design system demande à répertorier chaque composant existant et à hiérarchiser/classer correctement tous vos éléments. S'il est mal fait, il peut entraîner des doublons et vous faire rapidement perdre en cohérence.

Découvrir notre offre design system

À quoi sert un design system / 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 faire un design system / atomic design ?

Quand créer un design system ?
Si vous remarquez un problème de cohérence global sur votre site / produit
Lorsque vous décidez de créer un service avec beaucoup d'éléments et de pages
Créer une base de discussion et de travail entre vos développeurs et designers
Faire évoluer plus rapidement votre site pour le faire tester

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)

Votre design system doit également comporter un styleguide. Il s’agit d’une reprise de la charte graphique (couleurs, typos, logos etc) avec les règles d’utilisation de chaque élément. Par exemple, savoir quand doit être utilisé le rouge, quand doit être utilisé votre typographie n°1, etc. Avant d’entamer ce travail, priorisez les éléments qui sont les plus récurrents sur votre produit comme par exemple les boutons, les éléments de navigation (menu, footer). Une fois que votre base sera solide et correctement construite, vous pourrez passer aux déclinaisons et autres éléments. Penser à tester vos “composants parents” (le principal, qui sert de modèle) avant de réaliser des “composants enfants” (déclinaisons du principal)

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 cinq 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 ?

Exemple de design system / atomic design 1 sur 7

Addland devient Tytl : un site pour découvrir, un outil pour travailler

Voir l'étude de cas

Un portail unique pour s'orienter dans la rénovation énergétique en Nouvelle-Aquitaine

Voir l'étude de cas

Les méthodes liées

Charte graphique

La charte graphique rassemble les règles visuelles d'une marque : couleurs, typographies, logo, et les usages autorisés ou proscrits pour chacun.

Design Kit

Le Design Kit UI est la bibliothèque de composants visuels (boutons, formulaires, cartes, navigation). Il matérialise le design system dans Figma pour concevoir en cohérence.

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 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 et interactifs.

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