Il n’est pas toujours facile de savoir comment structurer son design system sur Figma, d’autant plus lorsque l’on travaille dans une agence de consulting digital comme BAM.

En effet, chez BAM nous accompagnons souvent des clients qui en sont aux toutes premières phases de conception de leur produit ou qui n’ont jamais eu de design system ou de designer. Nos missions s'étendent souvent sur moins d'un an, pour ensuite laisser le client se développer en interne. Cela implique une structure de design system différente d’une entreprise qui dispose de designers en interne et de 5 produits en parallèle. Voyons comment mettre en place un design system lorsqu’on est une agence. Bonus : retrouvez en bas de cet article le lien vers notre design system sur la communauté Figma !
‍

Diviser par 4 notre temps de travail

Si vous m’aviez demandé il y a 2 ans comment nous faisions les design systems de nos clients, je vous aurais répondu que nous reconstruisions tout à partir de rien, pour chaque client. Chaque couleur, bouton ou input était reconstruit from scratch et cela nous coûtait 7 heures par designer par projet. Cela représente beaucoup de temps et donc d’argent de nos clients, alloués à ce sujet.

Aujourd’hui, nos designers allouent 1 à 2 heures maximum à la mise en place du design system de leur client grâce à notre Project Starter Kit : un design system simple, duplicable, conçu avec nos développeurs et facile à récupérer pour nos clients.
‍

Un design system sans perte de créativité

L’enjeu derrière la création d’un design system pour une agence de consulting est de ne pas briser la créativité des designers. Trop standardiser mène à la fainéantise : c’est pourquoi notre design system contient uniquement les composants de base pour commencer les maquettes sereinement : boutons, inputs, text areas, radio, checkboxes, etc.

Au début nous avions inclus dans le fichier Figma des templates de fonctionnalités que nous concevons souvent, comme le login par exemple. Grave erreur : certes, nous gagnions encore plus de temps, mais ces fonctionnalités n’étaient jamais repensées par les designers alors que notre objectif est de créer des outils ingénieux et innovants pour nos clients !
‍

Un starter kit personnalisable en quelques secondes

L’objectif principal de ce design system est qu’il puisse vivre seul et être réutilisé pour chaque client, par tous les designers.

Il est donc partagé à tous les designers dans notre team Figma et à chaque début de projet, les designers le dupliquent, mettent à jour le styleguide et le design system se met automatiquement à jour. Il est déjà prêt à être utilisé !

Dans les faits, comment ça marche ?

Chaque composant du design est relié aux Color styles et Text styles définis dans le styleguide. À l’arrivée sur le design system, la personnalisation passe par la mise à jour des couleurs, des polices et l’ajout de votre set d’icônes dans la frame New Icons. Nous avons choisi d’utiliser cette frame afin de faciliter les changements d’instances d’icônes dans les composants. L’autre solution, bien plus chronophage, impliquait de remplacer les vecteurs dans les frames des icônes pour ne pas casser les liens depuis les composants - no way.

💡 Le reste du styleguide (espacements, border radius, iconographie) est à mettre à jour pour que les parties prenantes du projet les connaissent et que les développeurs puissent les utiliser. Ils n’ont pas d’impact sur la mise à jour des composants.

Une fois ces changements effectués, les composants sont mis à jour à 90% ! Il reste alors 2 étapes : ajuster les border radius et mettre à jour les instances d’icônes sur tous les Building helpers. Cela ne prend pas plus de 10/15 minutes.

Des buildings helpers dans le design system BAM ?

La dernière particularité est que nous travaillons avec des building helpers, sorte de “master de master composant”. Ce master nous permet d’avoir une version exhaustive de tous les cas possibles sur ce composant, qui peut être mis à jour rapidement au besoin. Admettons que notre client ne veuille jamais d’icônes dans les boutons, il nous suffit de supprimer les 2 icônes du building helper plutôt que de supprimer les 30 icônes des instances. En tant qu’agence, les changements sur les designs sont fréquents. Le design system se doit donc d’être aussi agile que nous.
‍

Un design system facile à utiliser pour les développeurs

La raison même pour laquelle BAM existe et dispose d’une équipe de 20 designers, c’est de faciliter l’intégration des designs avec les développeurs. Il était donc impossible de les créer sans eux. En fonction de leur façon de coder, nous avons choisi une codification des noms de couleurs, basée sur le fonctionnement de MaterialUI et sur une hiérarchie des polices en “tailles de t-shirt” (exemple pour un titre : title-xxlarge-46px).

Je vous conseille de vérifier auprès des développeurs de votre agence si ce naming leur convient, pour assurer l’efficacité de vos équipes !

À titre d'exemple, nous sommes encore en discussion avec les développeurs pour améliorer la structure du styleguide, en réponse à la mise à jour des styleguides de Flutter.

En parallèle, pour collaborer avec nos développeurs, nous avons prévu dans le design system des annotations que nous utilisons pour avoir de la mémoire sur le projet.

En général, nos designers interviennent 3 semaines avant les devs. Ils est donc important qu'ils puissent comprendre ce que nous avions en tête, lors de la construction de tel ou tel écran ! Ces annotations sont aussi utiles pour les POs lors de la rédaction des user stories.

Envie de nous rejoindre ? Click here.

Un design system facile à récupérer pour les clients

Enfin, il faut que les clients puissent utiliser ce design system facilement. Nous avons donc choisi de combiner styleguide, composants et maquettes. Tout est réunit dans le même fichier, ce qui limite les sources d’information pour les clients, déjà bombardés de liens en permanence.

Les clients peuvent aussi reprendre la main sur leur fichier rapidement. À la fin du projet, nous les nommons owners sur le fichier et ce dernier leur appartient. Si le fichier de maquettes devient trop grand, nos clients peuvent aussi publier le Design starter kit comme une librairie et déplacer les maquettes dans de nouveaux fichiers Figma sur lesquels cette librairie est activée. Tout cela, sans problème de perte de liens entre les masters et les composants !

J’espère que ces astuces vous servirons pour créer votre propre design system d’agence. Et si vous avez besoin d’un coup de pouce, rendez-vous sur Figma pour télécharger le design system BAM !
‍

Follow us : Dribbble / Figma

‍