Chez Bam, un design system clair et compréhensible est notre priorité au sein d’un projet. Outil devenu indispensable pour la création des maquettes de nos apps, il est primordial qu’il soit pensé et créé en accord avec toutes les parties prenantes du projet, et surtout de manière durable. Aujourd’hui la pratique s’est démocratisée, il est aisé de trouver des ressources en ligne pour débuter un design system de 0 au début d’un projet, mais qu’en est-il d’un design system déjà existant ? Comment parvenir à réadapter ou corriger un design system de petite ou moyenne taille déjà implémenté ou déjà bien avancé ? Comment, tout simplement, challenger un design system déjà existant ?

‍

Faire un état des lieux de l’existant

Commençons déjà par le commencement ! Un design system, c’est personnel à chaque projet, mais aussi parfois au designer qui l’a créé. Et c’est là la première erreur. Chez Bam, nous veillons à ce que chaque design system suive plusieurs critères qui en feront une réussite. Pour cela, nous avons créé une grille d’audit spécialisée, pour revoir un design system en 5 points clés :

• la structure : le document est-il bien structuré ? la hiérarchie d’information assez claire ? les éléments sont-ils classés ? si oui, le sont-ils correctement ?
• la documentation : puis-je savoir rapidement quelle est la logique derrière chaque élément ? sont-ils communiqués explicitement ? les pages, les guidelines et les composants sont-ils décrits ?
• le branding : les informations sur la direction artistique du produit sont-elles visibles ?
• les composants : sont-ils bien renseignés ? sont-ils optimisés avec les outils adaptés ?
• la gouvernance: les parties prenantes ont-elles accès au document ? sont-elles à l’aise avec ? comment est géré l’entretien et la mise à jour du design system ?

Une fois le design system audité grâce à cette grille, il nous est possible de déterminer quels seront les chantiers prioritaires, en fonction de leur importance et de leur taille. Il y a cependant des pré-requis importants qui dicteront l’ordre de base des corrections à prévoir …

‍

1. Structurer son design system

Nous le disions juste avant, les différentes modifications sont à prioriser afin d’optimiser la modification d’un design system. Pas d’obligation, mais cela est vivement conseillé afin de ne pas perdre de temps par la suite et faire un double travail.La structure du document est donc à privilégier si l’on veut commencer ce travail. Et pour cela il est parfois nécessaire de revoir l’ensemble des pages.

‍

1 - Le design system présent est avancé

Si le design system est déjà bien avancé et comporte de nombreux composants, il sera alors nécessaire de les regrouper en différentes pages, qu’il faudra différencier du branding (que je verrai ci-après). Vous pourrez ainsi les trier selon vos préférences (atomic design, ordre alphabétique, tri par usage, importance, etc).

‍

2 - Le design system est peu fourni

Au contraire, si le design system est encore peu fourni, il est possible de garder tous les composants sur la même page à condition qu’elle soit bien documentée et rangée. Cela peut permettre de centraliser l’information et gagner du temps.‍

‍

3 - Le design system comporte également les maquettes

Enfin, dans le cas où vos maquettes sont également sur ce même document, alors il est important d’avoir une séparation claire entre les composants, le branding, les maquettes et les archives.

Cependant, avoir une structure de document ne suffit pas. Si les éléments sont séparés, mais pas explicités, alors, toutes les personnes amenées à utiliser le design system seront perdues. Je conseille également d’avoir en premier lieu une page d’explication du design system (voir la gouvernance ci-après).

‍

2. Documenter le design system

Ensuite, après avoir correctement structuré votre fichier, et c’est là l’étape la plus importante, il vous faut documenter tout ce qui s’y trouve. C’est probablement la partie la plus longue à faire mais c’est aussi la plus utile et celle qui vous fera gagner de temps avant de poursuivre le travail des composants. Mais que veut dire documenter les différents éléments ?

C’est, pour commencer, nommer efficacement et durablement vos éléments : nom des pages, des frames, des composants, des couleurs, des typographies etc. Et pourquoi durablement ? Parce qu’un design system évolue en permanence.

💡 Prenons l’exemple d’un client BAM qui nous a missionné pour challenger son design system. Dans son branding, les couleurs étaient nommées par leur nom “bleu cannard” ou  “bleu nuit”. Les couleurs sont donc nommées certes, mais pas de manière durable, et elles n’induisent pas de hiérarchisation non plus. Un nommage tel que “Primary 100”, “Primary 200” pour les couleurs principales, puis “Secondary 100”, “Secondary 200” indiquent quant à elles leur niveau d’importance ainsi que leur teinte (100 pour la plus claire, 500 pour une plus foncée).Il en va de même pour les typographies, où vous pouvez d’ores et déjà aider les développeurs avec des noms comme H1, H2, H3, P1, P2, P3, etc.

Une fois que les éléments sont nommés de cette manière, il suffira d’expliciter les noms et usages des composants : nom, statut, propriété, etc, selon leur configuration.

Pour finir, il est conseillé de nommer explicitement chaque frame comportant des éléments, et indiquer leur usage, et si possible, un exemple !

‍

‍

💡Petite astuce : le plugin figma EightShapes Specs vous permettra de documenter en 1 clic les détails de vos composants (marges, padding, etc)

‍

3. Clarifier le branding

Après avoir fait un état des lieux du design system et terminé l’étape de la structuration et de la documentation, la priorité est de s’occuper du branding puisqu’il va impacter tous les composants actuels et à venir.

Pour cela, il faut s’assurer que toutes les couleurs soient répertoriées dans le Color Style, toutes les typographies dans le Text Style et enfin tous les effets (ombres, lueurs, etc) dans le Effect Style et bien évidement, sous les mêmes noms qu’indiqués sur le fichier. Cela vous sera utile lors de la création de maquettes, mais aussi pour les développeurs du projet.

‍

4. Créer et ordonner ses composants

Puis, lorsque c’est au tour des composants, nous conseillons chez BAM de profiter de toutes les possibilités qu’offre le logiciel Figma si votre design system est créé via cet outil.

En effet, Figma donne la possibilité de créer toutes sortes de composants en utilisant des propriétés comme l’instance swap property, boolean property ou encore text property qu’il est possible de cumuler pour optimiser leur gestion. Si vous n’êtes pas familier avec ces fonctionnalités, Figma propose des Playgrounds, fichiers d’apprentissage qui permettent d’apprendre tout en pratiquant, et sur beaucoup d’autres fonctionnalités également.

Si ce n’est pas le cas, il est aussi très vivement conseillé d’utiliser les auto-layout, frames dynamiques qui s’ajustent en fonction de leur contenu, pour créer ses composants. Vos maquettes s’adapteront ainsi toutes seules à vos contenus si elles sont paramétrées correctement !

‍

5. Établir une gouvernance

Enfin, l’étape de la gouvernance peut intervenir à tout moment du challenge du design system et c’est une étape très importante car c’est elle qui va déterminer comment est entretenu le design system sur le court, moyen et long terme. Chez Bam, l’amélioration continue est au coeur de nos préoccupations, et un design system, s’il n’est pas entretenu, perdra toute son importance.

La gouvernance consiste à déterminer les principaux interlocuteurs et parties prenantes du design system. Il est par exemple indispensable que les développeurs du projet aient connaissance de ce fichier et qu’ils soient en accord avec les nomenclatures et la présentation de l’information en général. Le design system doit être vu comme un principe de vases communicants, ou bien de support de communication entre les designers et les développeurs.

Mais, selon la taille de l’équipe design attribuée, ce doit aussi être un outil de communication entre designers.

Là-dessus il n’y a pas de recette magique, il faut simplement déterminer une gouvernance et une maintenance du design system.

La gouvernance permettra ainsi de suivre l’orientation du design system et ces objectifs macro avec l’intégralité des parties prenantes du projet (Produit, Tech et Design). Tandis qu’un système de maintenance permettra de suivre et de partager les avancées des équipes de façon plus micro !

💡 Il nous est arrivé, sur un cas client BAM, d’instaurer plusieurs réunions par mois afin d’entretenir le fichier !Par exemple, une fois par mois, les équipes font un récap macro des avancées, puis un check des objectifs du mois prochain avec le PO, PM, équipes tech et design.Une seconde réunion était prévue deux fois par mois, pour faire le point entre designers et développeurs sur les avancées micro.Et enfin, une fois par semaine, un atelier dédié avec un designer et un développeur afin d’intégrer les modifications apportées !

‍

Conclusion

Pour terminer, j’espère que cet article vous sera utile. Il est important de bien garder en tête que les principes fondamentaux sont la communication autour de ce design system et le soin mis à documenter chaque élément afin que tous puissent profiter de ce formidable outil ! Un design system bien pensé et géré, c’est aussi et surtout du temps gagné pour valoriser d’autres sujets comme le design émotionnelPour des design system de plus grande ampleur, d’autres outils seront aussi applicables, je pense notamment aux tokkens, qui pourront faire l’objet d’un prochain article !

Si vous souhaitez en savoir plus sur le challenge d’un design system ou faire appel à BAM pour un projet, n’hésitez pas à nous contacter !

‍