Maîtrise de l'atomic Design : Construire un Design System Efficace

Le développement web ne se limite pas à l'écriture de code ; il s'agit également de créer des interfaces utilisateur faciles à gérer et à faire évoluer. L'atomic Design est une méthodologie de conception qui permet aux développeurs et aux designers de créer des interfaces utilisateur évolutives, cohérentes et modulaires. Elle décompose des interfaces utilisateur complexes en composants plus petits et réutilisables, de manière similaire à la façon dont les atomes se combinent pour former des molécules, qui à leur tour se combinent pour former des organismes.

Démystification de l'atomic Design

L'atomic Design fonctionne avec des niveaux :

• Atomes : Ils servent de blocs de construction élémentaires, englobant des éléments tels que les boutons, les champs de saisie et les icônes.

• Molécules : Les molécules combinent des atomes pour donner naissance à des composants plus complexes, tels que des champs de saisie associés à des étiquettes ou des menus de navigation.

• Organismes : Les organismes sont des composants composites formés de molécules et d'atomes, englobant des entités telles que les cartes de produits ou les barres de navigation.

• Modèles : Les modèles définissent la structure de mise en page globale d'une page, orchestrant les organismes dans une configuration spécifique, comme BlogPostTemplate.

• Pages : Les pages sont les pages web tangibles créées en combinant des modèles comme BlogPostPage.

L'atomic Design fonctionne avec une règle selon laquelle chaque élément de conception ne peut utiliser que ceux situés en dessous de lui. Par exemple, les modèles peuvent inclure des organismes et des atomes, mais ils ne devraient pas inclure de pages, car cela irait à l'encontre de la façon dont l'atomic Design est censé fonctionner.

Qu'est-ce qui fait un bon Design System ?

Maintenant que nous avons exploré la théorie de l'atomic Design, il est temps de la mettre en pratique. Permettez-nous de vous fournir l'approche pratique nécessaire pour créer un Design System efficace étape par étape :

1. Inventaire des composants : Commencez par répertorier méticuleusement et documenter tous les atomes, molécules et organismes utilisés dans votre projet. Cet inventaire constitue la base de votre Design System.

2. Conventions de nommage normalisées : Élaborez des conventions de nommage claires et cohérentes pour vos composants. Ces conventions sont les gardiennes de l'ordre, assurant une collaboration harmonieuse entre les designers et les développeurs.

3. Directives de conception : Élaborez des directives de conception complètes englobant la typographie, les palettes de couleurs, l'espacement et d'autres éléments de conception essentiels. Le respect de ces directives garantit une identité visuelle cohérente.

4. Bibliothèques de composants : Construisez des bibliothèques de composants dédiées qui abritent les composants de votre Design System. Ces bibliothèques doivent comprendre des ressources de conception et des extraits de code pour faciliter l'utilisation par les développeurs.

5. Collaboration avec les développeurs : Impliquez les développeurs dès le début du processus de conception. Leurs idées peuvent façonner des décisions de conception qui sont non seulement esthétiquement plaisantes, mais aussi techniquement faisables.

6. Focus sur l'accessibilité : Mettez l'accent sur l'accessibilité dans votre Design System. Collaborez étroitement avec les développeurs pour vous assurer que les composants sont conçus et codés en tenant compte de l'accessibilité, au bénéfice de tous les utilisateurs.

Collaboration efficace avec les designers

La collaboration efficace avec les designers est essentielle à la réussite de votre Design System basé sur l'atomic Design. Veillez à respecter les points suivants pour assurer une collaboration fluide :

• Processus : Maintenez des canaux de communication transparents et ouverts avec les designers. Des réunions régulières et des discussions sont essentielles pour assurer l'alignement et la compréhension partagée.

• Transfert de conception simplifié : Exploitez des outils de transfert de conception tels que Zeplin ou les fonctionnalités de transfert de concepteur de Figma. Ces outils simplifient le transfert des actifs de conception et des spécifications aux développeurs.

• Documentation approfondie : Documentez de manière exhaustive votre Design System, y compris les raisonnements de conception, les directives d'utilisation et les exemples de code. Cette documentation sert de ressource précieuse tant pour les designers que pour les développeurs.

• Cultiver l'empathie et le respect : Favorisez une culture de respect mutuel entre les designers et les développeurs, reconnaissant les rôles essentiels qu'ils jouent tous deux dans la réussite du projet.

Mon expérience chez Free (groupe iliad)

Mon expérience chez Free (une entreprise de télécommunications française qui appartient au groupe iliad) a été très intrigante. Lorsque j'ai rejoint l'entreprise, il y avait déjà un projet de Design system en cours, mais il n'y avait pas de structure organisée, d'équipe ou de processus définis en place. Une ou deux personnes travaillaient occasionnellement dessus entre d'autres développements de fonctionnalités.

Bien que la nécessité d'un Design system soit évidente, nous n'avions pas besoin d'une équipe dédiée. En observant l'engagement des designers dans le projet, ainsi que le constat que l'aspect développement était en retard et que les développeurs en avaient grandement besoin, un collègue et moi avons décidé de relancer le projet de Design system.

Pour y parvenir, nous avons reconnu la nécessité d'impliquer plus que quelques individus. Nous avions besoin de processus définis et d'une communication directe avec les designers. Ainsi, nous avons décidé de mettre en place les actions suivantes :

1. Engagement : Les développeurs intéressés à contribuer au Design system devaient exprimer leur intérêt pour être ajoutés à la liste de diffusion.

2. Réunion : Le premier mardi de chaque mois, nous organisions une réunion pour discuter des développements à la fois du point de vue du développement et de la conception, ainsi que pour partager des informations technologiques et de conception.

3. Processus d'approbation : Après avoir développé un nouveau composant, il devait être approuvé par deux développeurs et deux designers.

4. Garantir la qualité : Tous les composants créés passaient par un processus de révision via Storybook et Chromatic pour faciliter l'évaluation de la conception.

5. Tickets : Nous utilisions Jira, où un ticket équivalait à un composant, favorisant la communication directe entre les développeurs et les designers.

6. Centralisation de l'information et de l'engagement : Sur une base mensuelle (pendant la réunion mensuelle), nous nommions une personne de référence en développement et une personne de référence en conception pour centraliser l'information, la communication et l'engagement.

Pour revitaliser efficacement le Design system de Free sans avoir besoin d'une équipe dédiée, nous avons mis en place des processus et engagé tout le monde par divers moyens (références, listes de diffusion privées, etc.). Dans une grande organisation, cette approche conférait un sentiment de privilège à ceux qui contribuaient au projet.

Grâce à ces initiatives, nous avons efficacement relancé le développement du Design system, facilitant considérablement de nombreux projets.

Aujourd'hui, environ 80% des projets frontaux utilisent le Design system, par rapport au chiffre précédent d'environ 20%.

Outils et ressources

Pour vous aider à mettre en œuvre efficacement les principes de l'atomic Design et à créer un Design System robuste, voici quelques outils essentiels et des ressources précieuses à prendre en compte :

Outils de développement

• Storybook : https://storybook.js.org/

• Chromatic : https://www.chromatic.com/

Exemples de systèmes de conception

• Atlassian : https://atlassian.design/

• Uber : https://base.uber.com/

• Axa : https://designsystem.axa.com/design

Ressources sur l'atomic Design

• Principes de l'atomic Design de Brad Frost : https://atomicdesign.bradfrost.com/chapter-2/

• Mettre en œuvre l'atomic Design dans votre projet actuel : https://blog.prototypr.io/how-to-implement-atomic-design-in-your-current-project-368005f5c044?gi=1e2fda43a1d2

Outil d'accessibilité

Web Content Accessibility Guidelines (WCAG) : Les directives officielles pour la création de contenu web accessible, une ressource incontournable pour tout Design System.

Aller plus loin

• À propos des jetons de conception : https://m3.material.io/foundations/design-tokens/overview

• Qu'est-ce que sont les jetons de conception ? : https://youtu.be/wtTstdiBuUk

Si vous avez trouvé cet article utile, je vous serais très reconnaissant de me suivre pour plus de contenu informatif. Votre soutien signifie beaucoup ! Merci ! 👏

X _brdnicolas 🙌