Comprendre l’atomic design pour mieux maîtriser Figma

Travailler sur une application ou un site web avec de nombreux composants d’interface présente de nombreux défis lorsqu’on est designer. Plus il y a de composants, plus il peut être difficile de maintenir une cohérence globale à chaque instant ‍

Il y a quelques années, on redoutait d’apporter des modifications sur les maquettes en mettant par exemple à jour la couleur d’un bouton. La gestion et la maintenance d’une interface était laborieuse…

Heureusement, Figma est venu révolutionner le design d’interface Pourquoi Figma fonctionne aussi bien d’ailleurs ? La réponse tient en deux mots : atomic design. En quoi consiste cette approche ? Pourquoi est-elle aussi efficace ? C’est ce que nous allons détailler dans cet article !

Qu’est-ce que l’atomic design ?

Cette approche a été développée en 2016 par Brad Frost, un développeur Front pour aider les équipes à créer des systèmes de design modulaires et évolutifs. C’est une méthodologie commune aux designers et aux développeurs.

L’atomic design repose sur une analogie avec la structure de la matière à l’échelle atomique. Les atomes forment des molécules, qui à leur tour forment des organismes plus complexes. On voit tout de suite le potentiel d’application en design d’interface

Les 6 niveaux de la logique atomique

L’atomic design se compose de cinq niveaux. Son principe : décomposer l’interface utilisateur en unité de plus en plus petites. C’est une méthodologie structurée qui permet de créer rapidement des interfaces utilisateur cohérentes et évolutives Voyons comment la logique atomique se décompose

1️⃣ Les ions → les design tokens

Ce niveau est venu compléter en 2019 la théorie initiale de Brad Frost publiée trois ans plus tôt. Les ions viennent définit tous les particules subatomiques de l’interface :

• les couleurs : couleurs principales, couleurs secondaires, couleurs neutres, etc.
• les niveaux de texte
• les icônes
• les styles : box-shadow, border, border-radius, etc.
• les espacements : margin, padding, etc.

Tous ces ions constituent la base de tous les niveaux suivants. C’est leur réutilisation qui fait gagner du temps et qui permet de maintenir la cohérence à travers l’ensemble de l’application ou du site web.

✍️ Côté Figma, prenez le temps de créer ces différents éléments et de bien les nommer, vous vous remercierez par la suite

⚙️ Coté code, les développeurs vont définir tous ces styles en utilisant les spécifications produits dans Figma et les noms que vous aurez défini pour nommer les variables.

2️⃣ Les atomes → les composants de base

Les atomes sont des groupes d’atomes.
Ce niveau définit tous les composants de base de l’interface :

• les boutons : primaires, secondaires, tertiaires, etc.
• les selects
• les inputs, etc.

3️⃣ Les molécules → les composants plus complexes

Les molécules sont des groupes d’atomes.
Ce niveau définit tous les composants plus élaborés de l’interface :

• la pagination
• les messages
• le champ recherche

Exemple : un champ recherche est composé de deux atomes :

• d’un input (atome) :
  • un placeholder (ion)
  • une bordure (ion)
• d’un bouton (atome) :
  • intitulé (ion)
  • icône (ion)
  • fond (ion)

4️⃣ Les organismes → les modules de l’interface

Les organismes sont des groupes de molécules. On peut considérer les organismes comme des modules ou des fonctionnalités. Ce niveau définit des sections plus importantes de l’interface :

• un header
• un footer
• un menu latéral
• des filtres
• des cards
• un date picker

5️⃣ Les templates → les structures de page

Les templates sont des arrangements de plusieurs organismes.
Ce niveau définit le squelette global de chaque page.

✍️ Côté Figma, pour créer un template, réalisez un zoning avec un placeholder vide pour définir l’emplacement des différents organismes.

⚙️ Coté code, les templates sont des modèles pré-définis qui servent de base pour générer des pages dynamiquement. Les développeurs peuvent utiliser des moteurs de template comme Twig, Boilerplate, etc.

6️⃣ Les pages → l’écran final

Les pages sont la plus grande unité de conception.
Ce niveau agrège les molécules et les organismes pour former la maquette finale.

✍️ Côté Figma, réaliser une maquette en appelant vos organismes via les assets. Remplissez les placeholders avec du vrai contenu pour créer des maquettes haute fidélité.

⚙️ Coté code, la page est générée grâce au moteur de template, son contenu est dynamique.

Comment mettre en place l’atomic design dans Figma ?

Pour bénéficier de cette logique dans Figma, créez des composants fantômes. Avant de commencer, point sur deux notions centrales dans Figma !

• un composant est un élément réutilisable
• une instance est une copie d’un composant, elle est également réutilisable.

Une instance est liée à son composant principal et reçoit toutes les mises à jour apportées au composant.

Étape 1 : commencez par créer vos ions

• créez vos styles de paragraphes
• créez votre nuancier
• créez votre librairie d’icônes
  • importer vos icônes
  • convertissez chaque icône en composant

Étape 2 : continuez en créant vos atomes

• créez vos boutons : primaires / secondaires / tertiaires
• créez vos inputs
• créez vos selects
• combinez tous les éléments nécessaires pour créer les atomes
• appliquez les styles créés précédemment

Étape 3 : combinez les atomes pour former les molécules

• importez des instances de vos atomes via les assets
• combinez les entre-elles
• puis créez un nouveau composant

Continuez cette logique d’import d’instances, de combinaison et de création de nouveaux composants jusqu’aux organismes. En respectant ces étapes, les styles de vos ions s’appliqueront en cascade (comme en CSS) jusqu’aux organismes !

Si vous souhaitez modifier la couleur principale de votre interface, rendez-vous directement dans le nuancier, modifiez la couleur. Résultat : elle s’applique en cascade à tous les niveaux en 1 clic… Magique

via GIPHY

À retenir

Travailler sur une application ou un site web avec de nombreux composants d’interface nécessite une planification minutieuse pour bien gérer la complexité.

1️⃣ Cohérence visuelle et fonctionnelle

L’approche atomique permet de concevoir des applications et des sites web de manière modulaire. Cette modularité assure la cohérence globale dans l’ensemble du produit tant au niveau des styles que des principes ergonomiques.

2️⃣ Maintenance facilitée

L’atomic design est la méthodologie à la base de tout design system ⚛️. Elle offre une conception flexible et surtout très évolutive. Cette approche facilite la maintenance des composants et la scalabilité du design

⚙️ Coté code, l’approche atomique réduit les redondances. En implémentant des composants réutilisables, les développeurs front évitent de réinventer la roue à chaque fois qu’ils ont besoin d’un composant similaire. La maintenance est aussi assurée côté technique !

3️⃣ Collaboration renforcée

Cette approche favorise une collaboration étroite entre les UI designers et les développeurs front à chaque instant. Elle crée un langage commun. Une même terminologie facilite la communication. La mise en place d’un Storybook est le point de rencontre de cette collaboration

La mise à jour des styles se fait aisément grâce aux design tokens. Les tests sont aussi plus efficaces ! Les composants peuvent être testés de manière isolée, ce qui permet de faire plus rapidement les ajustements nécessaires. Bref, vous l’aurez compris, cette logique est puissante !