Libérez tout le potentiel de Code Connect : les meilleures pratiques pour les équipes de design system
Les responsables et les développeurs de design systems chez Bumble, GitHub, et HP expliquent comment ils exploitent la nouvelle fonctionnalité Dev Mode pour réduire l'écart entre le design et le code.
Les design systems jouent un rôle crucial dans la création d'expériences utilisateur cohérentes, efficaces et de haute qualité au sein des produits et des plateformes. Cependant, gérer les design systems tout en garantissant la cohérence du code peut s'avérer être un vrai défi, surtout au niveau de la collaboration entre les designers et les développeurs. Alors que ces deux disciplines ont souvent fonctionné de façon cloisonnée, les designers se concentrant sur la création d'expériences utilisateur attrayantes et les développeurs sur l'élaboration d'un code robuste et maintenable, l'adoption d'un langage commun et d'un flux de travail unifié peut déboucher sur de nouvelles opportunités.
Contactez notre équipe commerciale pour obtenir des conseils personnalisés sur la manière d'exploiter nos dernières fonctionnalités pour votre design system.
Le mois dernier, nous avons organisé Framework 2024, un événement au cours duquel nous avons invité des intervenants de Bumble, GitHub et HP à se joindre à Ana Boyer, designer advocate, pour discuter des défis liés à la relation entre le design et le code. Ils ont également partagé leurs expériences et leurs impressions sur Code Connect, notre dernière fonctionnalité du Dev Mode, désormais disponible en version bêta. Nous présentons ici certains des principaux points à retenir de cette conversation.
Parler le même langage
L'un des principaux obstacles mis en évidence au cours de la discussion a été le fossé inhérent entre le domaine du design et celui du développement. « Les designers et les développeurs parlent un langage un peu différent », explique Lukas Oppermann, Staff System Designer chez GitHub. Cette barrière linguistique se manifeste souvent sous la forme de conventions de dénomination incohérentes, de propriétés de composants mal alignées et d'attentes différentes. Gilson Hoffmeister, Design System Strategist chez HP, ajoute : « Il faut créer cette troisième forme de langage grâce à laquelle ils pourront communiquer et tout le monde pourra se comprendre. »
Les design systems apparaissent comme l'un de ces langages communs. En définissant des termes, des modèles et des composants communs, tous les membres d'une équipe peuvent s'assurer qu'ils sont sur la même longueur d'onde. Pour établir ce langage commun, il faut non seulement codifier ces décisions, mais aussi veiller à ce qu'elles soient faciles à trouver et à mettre en œuvre.
Aller à la rencontre des designers et des développeurs, où qu'ils se trouvent
« L'un des plus grands défis en matière de cohérence est de déterminer où se trouve la source de vérité », explique Raul Menezes, Design System and Platform Engineer chez Bumble. Ce décalage fréquent peut entraîner des incohérences, des implémentations personnalisées et une base de codes croissante qui devient difficile à maintenir. « Si vous continuez à répéter ce schéma encore et encore, votre base de codes commence à augmenter et vous ne pouvez plus en garder la trace. », poursuit Raul.
Il ajoute : « Les designers vont toujours mettre au point la documentation, et lorsqu'il s'agit de l'ingénierie, ils peuvent s'appuyer sur une source différente ». C'est pourquoi nous avons conçu Code Connect. Il s'intègre de manière transparente dans les flux de travail existants des développeurs, ce qui permet aux équipes de faire apparaître et de diffuser les meilleures pratiques et la documentation de leur design system directement dans leurs éditeurs de code.
Simplifier l'adoption et commencer à petits pas
Comme vous diront de nombreux responsables de design systems, le dicton « construisez-le et ils viendront » ne s'applique pas toujours. C'est pourquoi il est important de faire tomber les barrières qui entravent l'adoption et de réduire les points de friction dès que cela est possible, en particulier chez les développeurs. Gilson souligne l'utilité de Code Connect à cet égard, en expliquant : « Le développeur n'a pas à changer de contexte. Auparavant, il devait se rendre sur notre site Web pour voir [comment un design avait été mis en œuvre]. » Avec Code Connect, les développeurs peuvent voir si un design a été implémenté et comment, directement depuis le Dev Mode.
Les intervenants ont aussi partagé leurs meilleures pratiques, telles que celles consistant à commencer à petits pas et à se concentrer sur les éléments à fort impact. Cette approche peut servir de stratégie efficace pour présenter Code Connect à votre équipe. « Le but est de se lancer tout en douceur », ajoute Gilson. « Pour moi, Code Connect, c'est une première étape vers quelque chose de plus vaste ».
Comme le conseille Raul : « Commencez par des composants beaucoup plus petits, comme une bascule, afin de comprendre comment mapper ces derniers ».
Pour moi, Code Connect, c'est une première étape vers quelque chose de plus vaste.
Exploiter l'expertise de chacun
En savoir plus sur Code Connect, qui fournit du code de votre design system au Dev Mode, aidant ainsi les développeurs à créer avec cohérence et rapidité pour un transfert rationalisé.
Si nous parlons souvent de réduire l'écart entre le design et le développement, il est également important de reconnaître et d'accepter l'expertise unique que chaque discipline peut apporter. Comme le souligne Lukas : « Avec Code Connect, nous pouvons dissocier un peu plus le design et le code. Nous pouvons nous concentrer sur la création de la meilleure expérience utilisateur pour les designers travaillant dans Figma avec des bibliothèques de design, et, du côté du code, nous pouvons offrir la meilleure expérience développeur ». En reconnaissant et en exploitant les points forts de chaque discipline, les design systems peuvent favoriser un flux de travail plus collaboratif et plus efficace. « C'est un aspect sur lequel nous pouvons commencer à nous pencher dès aujourd'hui : faire en sorte que travailler avec les deux disciplines d'un design system soit vraiment génial pour les utilisateurs. Cela peut également contribuer à l'adoption. »
Avec Code Connect, nous pouvons dissocier un peu plus le design et le code.
Favoriser une collaboration continue
Dans cette session de Framework, Jake Albaugh, Figma Developer Advocate, donne une vue d'ensemble de Code Connect et quelques conseils sur la façon de se lancer.
Un transfert efficace du design au code n'est pas un événement ponctuel, mais un processus continu qui nécessite une collaboration continue entre les designers et les développeurs. Comme le souligne Raul, « Code Connect permet d'être plus efficace, non seulement en tant qu'ingénieur, mais aussi en tant que designer. Il permet de réduire l'écart de communication entre les deux équipes ». Les design systems peuvent faciliter cette collaboration permanente en établissant un langage commun, une documentation précise et des lignes de communication ouvertes. Des critiques de design fréquentes, des évaluations de code et des boucles de feedback peuvent aider à garantir que les designers et les développeurs sont sur la même longueur d'onde et travaillent pour atteindre un objectif commun.
Libérer tout le potentiel des design systems
En allant directement à la rencontre des designers et des développeurs, en simplifiant les processus d'adoption, en s'appuyant sur l'expertise de chacun et en favorisant une collaboration continue, les entreprises peuvent exploiter tout le potentiel de leurs design systems pour rationaliser le développement des produits et améliorer l'expérience de l'utilisateur final.
Chez Figma, nous nous engageons à donner aux équipes les moyens de mieux travailler ensemble, et Code Connect n'est que le début de cette aventure. « Quand [Code Connect] a été lancé, il a augmenté le champ des possibilités offertes par Figma », explique Gilson. Nous ne saurions être plus d'accord.
Articles connexes
