Design system / Atomic design

Q: Quelle est la différence entre un design system et un design kit ?

Le design kit est une bibliothèque statique de composants, un instantané qui accompagne des écrans livrés. Le design system est une bibliothèque vivante qui sert de base à tout ce qui sera conçu ensuite. C'est un produit de l'entreprise, avec sa gouvernance, sa maintenance et l'exigence d'une correspondance stricte entre ce qui est dessiné et ce qui est développé.

Q: Quels sont les exemples de design system ?

Les design systems se sont généralisés, et beaucoup sont aujourd'hui consultables en ligne. Certains font référence par leur ampleur ou leur influence, comme le Material Design de Google ou les Human Interface Guidelines d'Apple, qui cadrent la conception sur leurs plateformes respectives. Dans le secteur public français, le Système de design de l'État (DSFR) impose un socle commun à l'ensemble des sites de l'État, jusqu'aux composants et aux règles d'accessibilité. Pour explorer la variété des approches, l'association Design Systems France maintient un répertoire des design systems conçus en France, du grand groupe à la startup, avec pour chacun ses outils, sa technologie et son type d'équipe. Il est publié sur designsystems.fr.

Q: Ai-je besoin d’un design system ?

Tout dépend du contexte. Pour un site vitrine, un design kit suffit. Si ce site s'inscrit dans un écosystème plus large, plusieurs produits d'une même organisation, plusieurs équipes qui contribuent en parallèle, un design system devient pertinent pour centraliser composants et règles, site vitrine compris. Le critère n'est pas la taille de la structure mais le nombre de produits à tenir cohérents et le nombre de personnes qui y touchent. Il suppose en revanche un investissement réel, à la conception comme dans la durée.

Q: Puis-je faire évoluer mon design kit en design system ?

C'est possible si le fichier de départ est bien structuré. Le passage ne tient pas au fichier mais à ce qu'on met autour, une équipe dédiée, un processus de contribution et un rythme de revue. Sans cette organisation, le kit reste un kit avec une nouvelle étiquette.

Q: Ai-je besoin d’un design system alors que je génère tout mon code avec de l’IA ?

C'est plutôt l'inverse. Un système bien structuré et bien documenté est ce qui permet à un agent de générer du code conforme au produit plutôt qu'une interface générique. Quand le code se produit à la chaîne, les résultats se ressemblent, et la différenciation vient de ce qu'on donne à lire à la machine.

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

Quelle est la différence entre un design system et un design kit ?

Quels sont les exemples de design system ?

Ai-je besoin d’un design system ?

Puis-je faire évoluer mon design kit en design system ?

Ai-je besoin d’un design system alors que je génère tout mon code avec de l’IA ?

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, ou UI kit, rassemble les composants d'un produit dans un fichier de conception : boutons, formulaires, cartes, navigation, icônes.

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.

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