# Atomic design *L‘Atomic Design, une méthode de conception d‘interfaces utilisateur qui décompose les éléments* Source : L’Atomic Design est une approche de conception formalisée par Brad Frost en 2013. Elle vise à créer des interfaces utilisateur cohérentes et réutilisables en décomposant les éléments en cinq niveaux : les « atomes », les « molécules », les « organismes », les « templates » et les « pages ». L’analogie vient de la chimie : la matière se construit à partir de quelques éléments simples, combinés selon des règles stables. ## Cinq niveaux, du plus simple au plus complet ### Atomes Les atomes sont les éléments de base : boutons, champs, icônes, titres, mais aussi les jetons de couleur, de typographie et d’espacement. Seuls, ils ont peu de sens ; ils fixent pourtant le vocabulaire visuel de tout le système. ### Molécules Les atomes s’assemblent en molécules, de petits groupes qui remplissent une fonction : un champ de recherche avec son libellé et son bouton, une entrée de menu avec son icône, un formulaire simple. ### Organismes Les organismes combinent des molécules pour former un composant autonome et réutilisable : un en-tête de site, une liste de cartes, un formulaire complet. ### Templates et pages Les templates organisent les organismes en une mise en page, sans contenu réel ; les pages sont ces mêmes templates remplis de vrais contenus. C’est à ce niveau que l’on vérifie que le système tient face aux textes longs, aux images manquantes ou aux traductions. ## Pourquoi l’adopter Cette approche favorise la modularité et la réutilisabilité, et encourage une conception systématique à grande échelle. Elle donne aux designers et aux développeurs un langage commun, se prête naturellement aux bibliothèques de composants et aux design systems, et rend les évolutions plus sûres : modifier un atome se répercute partout où il est utilisé. ### Les limites de la métaphore La métaphore ne doit pas devenir un carcan. La frontière entre molécule et organisme est parfois floue ; l’essentiel est que l’équipe partage les mêmes conventions de découpage et de nommage.