Atomic Design : construire des composants UI réutilisables
Appliquez Atomic Design pour créer des composants UI réutilisables : atoms, molecules, organisms avec Figma et React.
L'Atomic Design, conceptualise par Brad Frost en 2013, propose une methodologie de conception d'interfaces basee sur la chimie : les elements d'interface se composent par niveaux croissants de complexite, des atomes aux pages. Cette approche systematique garantit la coherence visuelle, accelere la production et facilite la maintenance des design systems a grande echelle.
L'interet majeur de l'Atomic Design reside dans le langage commun qu'il etablit entre designers et developpeurs. Chaque composant possede un nom, un perimetre et des regles de composition clairs. Cette nomenclature partagee reduit les malentendus, accelere les revues de design et permet aux equipes de travailler en parallele sur differents niveaux de composants.
Ce guide explore les cinq niveaux de l'Atomic Design avec des exemples concrets d'implementation dans Figma et React. Vous decouvrirez comment structurer votre bibliotheque de composants, gerer les variantes et les etats, et maintenir la synchronisation entre le design et le code.
1. Atomes et molecules : les briques elementaires
Les atomes constituent les elements d'interface les plus fondamentaux et indivisibles : boutons, champs de saisie, labels, icones, avatars et tags. Chaque atome encapsule ses propres tokens de design (couleur, typographie, espacement, border-radius) et expose des variantes predefinies. Un bouton atome possede par exemple des variantes primary, secondary, ghost et danger avec les etats default, hover, active, focus et disabled.
Les molecules combinent plusieurs atomes en composants fonctionnels simples. Un champ de formulaire molecule reunit un label, un input et un message d'erreur. Une barre de recherche molecule associe un champ texte, une icone loupe et un bouton de soumission. La regle cle est qu'une molecule accomplit une seule fonction et reste reutilisable dans differents contextes.
Dans Figma, les atomes et molecules sont structures comme des composants avec auto-layout, des proprietes de composant pour les variantes, et des variables pour les tokens de design. Dans React, ils correspondent a des composants presentationnels purs qui recoivent leurs donnees par props et ne gerent aucun etat global.
2. Organismes : les sections d'interface fonctionnelles
Les organismes assemblent des molecules et des atomes en sections d'interface distinctes et fonctionnelles. Un header organisme combine un logo atome, une navigation molecule et un formulaire de recherche molecule. Une card produit organisme reunit une image, un titre, un prix, un badge de promotion et un bouton d'ajout au panier. Chaque organisme represente une zone identifiable de l'interface.
La distinction entre molecule et organisme n'est pas toujours evidente. Le critere principal est l'autonomie fonctionnelle : une molecule necessite un contexte pour avoir du sens tandis qu'un organisme fonctionne comme une unite independante. Un organisme peut egalement contenir d'autres organismes, creant des compositions de complexite croissante.
En React, les organismes commencent a integrer de la logique metier : gestion de l'etat local avec useState, appels API, validation de formulaire. Ils servent de frontiere entre les composants purement presentationnels (atomes et molecules) et les composants connectes aux donnees. Cette separation facilite les tests unitaires et la reutilisation.
3. Templates et pages : la mise en contexte
Les templates definissent la structure de mise en page sans contenu reel. Ils positionnent les organismes dans une grille et etablissent les relations spatiales entre les zones de la page. Un template de page produit specifie l'emplacement du breadcrumb, de la galerie d'images, des informations produit, des avis clients et des recommandations, sans remplir ces zones avec des donnees reelles.
Les pages instancient les templates avec du contenu reel et representent le niveau de fidelite le plus eleve. C'est a ce niveau que l'on valide le rendu avec des donnees authentiques : textes longs, images de qualite variable, cas limites comme des noms de produit tres courts ou tres longs. Les pages revelent les problemes que les templates avec du contenu factice ne peuvent pas montrer.
Dans un projet React avec Next.js, les templates correspondent aux composants layout qui definissent la structure commune a un groupe de pages. Les pages sont les fichiers page.tsx qui injectent les donnees reelles via les props serveur. Cette architecture reproduit naturellement la hierarchie de l'Atomic Design.
Besoin d’aide en UI/UX ?
Nos experts vous accompagnent. Recevez 3 devis gratuits sous 24h.
Gratuit · Sans engagement · Reponse sous 24h
4. Implementation dans Figma : structure et variantes
Dans Figma, la bibliotheque Atomic Design s'organise en pages separees pour chaque niveau : Tokens, Atoms, Molecules, Organisms et Templates. Les tokens (couleurs, typographies, espacements, ombres) sont definis comme variables et styles partages. Chaque composant reference ces tokens plutot que des valeurs en dur pour garantir la coherence et faciliter les changements globaux.
Les component properties de Figma permettent de gerer les variantes sans multiplier les composants. Un bouton expose des proprietes pour la taille (sm, md, lg), le style (primary, secondary), l'etat (default, hover, disabled) et la presence optionnelle d'une icone. Cette approche reduit la taille de la bibliotheque tout en offrant une flexibilite maximale aux designers.
La documentation de chaque composant Figma inclut les regles d'usage, les espacements requis, les combinaisons autorisees et les cas d'utilisation recommandes. L'utilisation de la fonctionnalite de description de composant et des annotations permet aux designers qui consomment la bibliotheque de comprendre quand et comment utiliser chaque element.
5. Implementation dans React : architecture et props
En React, chaque niveau de l'Atomic Design correspond a un dossier dans l'arborescence du projet : components/atoms, components/molecules, components/organisms. Les atomes exportent des composants TypeScript fortement types avec des interfaces de props explicites. L'utilisation de Storybook permet de documenter et tester visuellement chaque composant de maniere isolee.
La composition des composants respecte le principe d'inversion de dependances : les organismes dependent d'abstractions (interfaces de props) plutot que d'implementations concretes. Un organisme ProductCard recoit un composant Button par prop ou par children pattern plutot que d'importer directement un bouton specifique. Cette approche maximise la reutilisabilite et la testabilite.
Les design tokens sont centralises dans un fichier de theme (ou dans les variables CSS custom properties) et consommes par les composants via un ThemeProvider ou des classes utilitaires Tailwind. La synchronisation entre les tokens Figma et le code peut etre automatisee avec des outils comme Style Dictionary ou Tokens Studio qui exportent les variables Figma en fichiers CSS ou TypeScript.
Questions frequentes
Faut-il appliquer l'Atomic Design de maniere stricte ?
L'Atomic Design est un modele mental plus qu'une regle rigide. L'important est d'adopter une logique de composition par niveaux croissants de complexite. Si la distinction entre molecule et organisme cree des debats steriles dans votre equipe, simplifiez la nomenclature. L'objectif est la coherence et la reutilisabilite, pas la conformite dogmatique au modele.
Comment gerer les composants qui ne rentrent dans aucune categorie ?
Certains composants comme les modales, les tooltips ou les toasts ne s'inscrivent pas naturellement dans la hierarchie Atomic Design. Creez une categorie utilitaires ou overlays pour ces elements transversaux. La classification doit servir l'organisation du travail, pas devenir une contrainte artificielle.
Atomic Design est-il compatible avec Tailwind CSS ?
Tailwind CSS et l'Atomic Design sont parfaitement complementaires. Tailwind fournit les utilitaires de style (les tokens) tandis que l'Atomic Design structure les composants. Les atomes encapsulent les classes Tailwind dans des composants reutilisables, evitant la repetition de longues chaines de classes et centralisant les variantes visuelles.
Combien de temps faut-il pour mettre en place un systeme Atomic Design ?
Un systeme Atomic Design minimal viable avec les atomes et molecules essentiels peut etre operationnel en 2 a 4 semaines. Un design system complet avec documentation, tests visuels et synchronisation Figma-code necessite 2 a 3 mois. L'investissement est rentabilise des le deuxieme projet qui reutilise la bibliotheque.
Comment maintenir la coherence entre Figma et le code React ?
Utilisez des outils de synchronisation de tokens comme Tokens Studio for Figma qui exporte les variables directement en fichiers exploitables par le code. Integrez des tests de regression visuelle avec Chromatic ou Percy pour detecter les ecarts entre le design et l'implementation. Des revues croisees regulieres entre designers et developpeurs completent le dispositif.
Guides complementaires
Guide complet de l'audit UX : méthodologie et checklist
Méthodologie complète pour réaliser un audit UX professionnel : heuristiques, checklist, outils et modèle de rapport.
UI/UXLes 10 heuristiques de Nielsen appliquées au web moderne
Les 10 heuristiques de Nielsen expliquées et illustrées avec des exemples web modernes : erreurs courantes et bonnes pratiques.
UI/UXDesign d'interface accessible : guide RGAA et WCAG 2025
Guide pratique pour concevoir des interfaces accessibles conformes RGAA et WCAG : contrastes, navigation et bonnes pratiques.
Outils gratuits recommandes
Lancez votre projet ui/ux
500+ experts verifies prets a vous accompagner. Devis gratuit sous 24h.