Le design system est devenu une pierre angulaire des processus de conception et de développement modernes. Il offre un ensemble cohérent d'éléments visuels, de patterns et de règles pour garantir une expérience utilisateur fluide et homogène. Dans ce contexte, nous avons le Design System Roadtrip de Norauto, une initiative visant à créer une bibliothèque riche et cohérente d'éléments de design pour faciliter la vie des designers et des développeurs. Mais, comme tout grand projet, il y a toujours des défis à relever. L'un de ces défis majeurs était la conception, la désignation et l'intégration d'icônes.
La conception d'icônes, bien qu'elle puisse sembler simple de prime abord, est en réalité une tâche complexe qui exige précision, créativité et cohérence. Et comme les icônes sont souvent au cœur de l'interaction utilisateur, leur conception, leur nomination et leur intégration ne doivent pas être prises à la légère. Pour relever ce défi, nous avons décidé de puiser dans la puissance des outils modernes pour rationaliser ce processus. C'est ici que l'intégration de Figma et GitLab entre en jeu.
La création d'un plugin Figma pour GitLab
Dans le cadre de notre travail sur le Design System Roadtrip, nous avons mis en place une intégration entre Figma et GitLab pour rationaliser notre processus de création et de mise à jour des icônes.
La magie du plugin Figma
La base de notre optimisation repose sur un plugin Figma. Voici comment il fonctionne :
Sélectionnez l'icône : Tout commence lorsque le designer sélectionne une frame dans Figma contenant l'icône qu'il souhaite exporter.
Nommez l'icône : Une fois la frame sélectionnée, il suffit de lui donner un nom approprié.
Exportez vers GitLab : Avec un simple clic, l'icône est envoyée vers notre dépôt GitLab. Cette action ne se limite pas à un simple envoi d'un fichier; elle crée également un commit spécifique pour cet icône.
GitLab prend le relais
Une fois l'icône dans GitLab, la magie de l'automatisation continue :
Pipeline CI/CD : L'ajout de l'icône déclenche un pipeline GitLab CI/CD spécialement conçu pour ce processus.
Nettoyage automatique : Ce pipeline comporte des étapes qui traitent le fichier SVG de l'icône. Il supprime les attributs inutiles, ajoute les préfixes nécessaires et convertit les valeurs de couleur en design token pour garantir la cohérence et la propreté du code.
Finalisation : Après le nettoyage, toutes les modifications sont automatiquement commitées dans le dépôt, gardant ainsi l'historique propre et traçable.
Bénéfices du workflow
Cette intégration apporte de nombreux avantages. Non seulement elle réduit considérablement le temps nécessaire pour ajouter ou mettre à jour une icône, mais elle élimine également les erreurs humaines potentielles. Chaque icône est traitée de manière uniforme, garantissant la cohérence à travers notre design system.
En combinant la puissance de Figma et la robustesse de GitLab, nous avons réussi à mettre en place un workflow qui accélère la productivité tout en maintenant la qualité au cœur du processus.
Un autre plugin Figma : L'optimisation grâce à ChatGPT
L'un des principaux défis que j'ai rencontrés en tant que Lead UI sur le design system Roadtrip était la recherche d'icônes. Avec plus de 1400 icônes disponibles, se fier uniquement au nom de l'icône était insuffisant et souvent source de frustration pour notre équipe de designers. Trop souvent, ils se retrouvaient à parcourir laborieusement la bibliothèque, essayant de deviner sous quel nom une icône spécifique avait été cataloguée. C'était non seulement inefficace mais aussi un énorme gaspillage de temps.
La solution résidait dans la profondeur des métadonnées. Si chaque icône pouvait être taguée avec plusieurs mots-clés ou descriptions synonymes, la recherche deviendrait intuitivement simple. Cependant, la mise à jour manuelle de ces métadonnées pour une collection aussi étendue était un travail titanesque. C'est pourquoi j'ai décidé d'exploiter la puissance de ChatGPT pour optimiser ce processus.
Mon workflow avec le plugin :
Exportation des descriptions : J'exporte d'abord toutes les descriptions d'icônes depuis la page Figma active.
Analyse avec ChatGPT : J'envoie le fichier JSON à ChatGPT, qui, avec sa capacité d'analyse, suggère des mots-clés pertinents ou synonymes pour chaque icône.
Intégration des suggestions : Je récupère ensuite le fichier enrichi par ChatGPT et l'intègre dans Figma grâce au plugin.
Exemple concret : Si je veux optimiser la recherche pour une icône représentant une voiture, et que cette icône est initialement nommée "Véhicule", ChatGPT peut suggérer des termes comme "voiture", "automobile", ou "transport". Ainsi, lorsque nos designers recherchent "voiture" dans Figma, ils trouvent également l'icône "Véhicule", rendant leur travail de conception plus fluide.
Grâce à cette méthodologie, j'ai pu améliorer considérablement la qualité et la précision des métadonnées associées à chaque icône. Pour nos designers chez Norauto, cela s'est traduit par une recherche d'icônes grandement simplifiée, leur permettant de se concentrer sur ce qu'ils font de mieux : concevoir.
Conclusion
La mise à niveau récente du design system Roadtrip montre que l'innovation n'a pas de fin. En combinant Figma, GitLab et l'intelligence artificielle de ChatGPT, nous avons pu améliorer notre façon de travailler et mettre en lumière l'importance de l'évolution constante.
Le design évolue, et avec lui, les besoins des entreprises. Un design system n'est pas seulement un outil pour assurer la cohérence visuelle, mais un véritable catalyseur pour réduire les coûts, gagner du temps et créer de meilleures expériences pour l'utilisateur. L'introduction de l'IA, même à petite échelle, nous montre qu'il y a encore tant de possibilités à explorer. Que ce soit pour automatiser des tâches, simplifier des processus ou même offrir des insights basés sur l'analyse, l'IA s'annonce comme une ressource précieuse.
Bien sûr, le travail avec Roadtrip n'est pas fini. À Norauto, nous voyons cela comme une étape parmi d'autres. Notre objectif reste le même : simplifier et améliorer continuellement notre workflow. Si aujourd'hui, nous parlons d'intégration de l'IA, qui sait ce que demain nous réserve ?
En tant que designers et développeurs, nous avons la chance d'être à la croisée des chemins entre technologie et créativité. Et à mesure que ces deux mondes se rencontrent et fusionnent, il est certain que les design systems, et notre manière de travailler, n'auront de cesse de s'améliorer.