Design atomique : atomes, molécules et organismes
Classez les composants en atomes, molécules, organismes, modèles et pages afin de créer un vocabulaire commun entre la conception et le développement.
Design atomique : atomes, molécules et organismes est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Qu’est-ce que la conception atomique
La conception atomique (Brad Frost, 2013) est un modèle mental qui organise les composants d’interface en cinq niveaux de complexité : Atomes, Molécules, Organismes, Modèles et Pages. Elle fournit aux concepteurs et aux ingénieurs un vocabulaire commun.
Atomes — les plus petites briques
Composants à usage unique qui ne peuvent pas être décomposés davantage. Boutons, champs de saisie, icônes, libellés et nuanciers de couleurs. Ils sont abstraits et réutilisables dans n’importe quel contexte.
// Atoms (examples)
<Button variant="primary">Save</Button>
<Input type="email" name="email" />
<Icon name="chevron-right" />
<Label htmlFor="email">Email</Label>Molécules — groupes simples de composants
Combinez des atomes pour accomplir une tâche utile. Un SearchBar est composé d’un champ de saisie, d’un bouton et d’une icône. Un FormField est composé d’un libellé, d’un champ de saisie et d’un ErrorMessage. Ils restent d’usage général.
function SearchBar({ onSearch }) {
return (
<div className="search-bar">
<Input placeholder="Search..." />
<Button onClick={onSearch}>
<Icon name="search" />
</Button>
</div>
);
}Organismes — sections complexes
Compositions plus importantes qui forment des sections distinctes d’une interface : un en-tête (logo + navigation + barre de recherche + menu utilisateur), un ProductCard (image + titre + prix + bouton) et un SignupForm. Ils sont davantage adaptés au contexte.
function Header({ user }) {
return (
<header>
<Logo />
<Navigation links={navLinks} />
<SearchBar onSearch={handleSearch} />
<UserMenu user={user} />
</header>
);
}Modèles — structures de pages
Mises en page au niveau d’une maquette qui organisent les organismes sans contenu réel. Un BlogTemplate contient un en-tête, une zone principale avec des emplacements d’articles et une barre latérale.
function BlogTemplate({ header, article, sidebar, footer }) {
return (
<div className="blog-layout">
{header}
<div className="main">
<main>{article}</main>
<aside>{sidebar}</aside>
</div>
{footer}
</div>
);
}Pages — contenu réel
Modèles contenant du contenu réel. La page /blog/[slug] affiche BlogTemplate avec l’article réel, les widgets de la barre latérale et les éléments d’interface.
Structure des dossiers
De nombreuses équipes organisent les composants par niveau.
src/components/
atoms/
Button.tsx
Input.tsx
Icon.tsx
molecules/
SearchBar.tsx
FormField.tsx
organisms/
Header.tsx
ProductCard.tsx
templates/
BlogTemplate.tsx
pages/
BlogPage.tsxAvantages
Vocabulaire commun entre concepteurs et développeurs. Favorise la composition plutôt que la duplication. Facilite la création de systèmes de conception. Encourage à réfléchir d’abord à la plus petite unité réutilisable.
Critique : une catégorisation stricte est difficile
En pratique, la frontière entre une molécule et un organisme est floue. De nombreuses équipes finissent par débattre de la catégorie à laquelle appartient un élément, ce qui va à l’encontre de l’objectif de clarté.
Alternative moderne : organisation par fonctionnalité
De nombreuses bases de code React/Vue importantes préfèrent organiser le code par fonctionnalité (auth/, checkout/, dashboard/) plutôt que par niveaux atomiques stricts. La conception atomique reste adaptée à la couche du système de conception partagé.
La conception atomique dans Storybook
Storybook s’adapte bien à la conception atomique : les catégories de premier niveau Atomes, Molécules et Organismes rendent la bibliothèque de composants facile à parcourir.
Quand utiliser la conception atomique
À privilégier pour : les bibliothèques de systèmes de conception partagées entre plusieurs applications, les grandes équipes qui ont besoin d’un modèle mental commun et les projets où les concepteurs participent activement. À éviter pour : les petites applications, les prototypes et les applications monopages centrées sur les fonctionnalités, où la colocation est plus importante.
Vérification rapide
Dans la conception atomique, quel type de composant est un SearchBar composé d’un champ de saisie, d’un bouton et d’une icône ?
Récapitulatif : conception atomique
Cinq niveaux : Atomes (bouton, champ de saisie, icône), Molécules (SearchBar, FormField), Organismes (en-tête, ProductCard), Modèles (mises en page) et Pages (contenu réel). Vocabulaire commun et réflexion fondée sur la composition. La structure des dossiers reflète les différentes couches. Idéale pour les systèmes de conception partagés ; pour le code applicatif, les dossiers par fonctionnalité sont souvent préférables.
Questions Fréquemment Posées
La leçon « Design atomique : atomes, molécules et organismes » est-elle gratuite ?
Oui — le texte complet de « Design atomique : atomes, molécules et organismes » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Design atomique : atomes, molécules et organismes » ?
Classez les composants en atomes, molécules, organismes, modèles et pages afin de créer un vocabulaire commun entre la conception et le développement. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Design atomique : atomes, molécules et organismes » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Design atomique : atomes, molécules et organismes
- Configuration d’un monorepo avec Turborepo
- Micro-frontends : fédération de modules
- Structure de dossiers par fonctionnalité