Une année avec Dev Mode : 10 enseignements tirés par un engineering manager

Quand Figma a annoncé le lancement de Dev Mode à Config 2023, cela a éveillé ma curiosité, mais j'étais assez sceptique. D'un côté, en tant qu'engineering manager chez Décathlon, j'aime l'idée de tester de nouveaux outils. D'un autre, j'ai vu de nombreux outils prometteurs échouer à aboutir à un réel alignement des workflows de design et de développement. Cependant, après une année d'expérience sur le terrain, je dois dire que Dev Mode a opéré une réelle transformation au sein de notre équipe.

Code Connect est LA fonctionnalité qui sort du lot, en ce qu'elle a considérablement amélioré le workflow de notre design system. En reliant les composants de Figma directement au code de ceux-ci, Code Connect aplanit les difficultés que nous rencontrons continuellement sur l'alignement des propriétés, les conventions de nommage et la gestion des états entre design et développement. Cela s'avère particulièrement précieux lorsque nous avons à gérer des composants complexes qui doivent être structurés différemment en design et en code. Voici mes principaux apprentissages :

Les design tokens sont les références uniques et réutilisables qui définissent un vocabulaire visuel. La mise en valeur de ces tokens au sein de l'outil de design a constitué une réelle avancée en termes de livraison pour notre équipe de développeurs.

1. Commencer modestement, mais viser haut

Les workflows des développeurs sont testés et approuvés, et l'ajout d'un nouvel outil peut mener à des frustrations. Naturellement, certains hésitaient à adopter Dev Mode pour de bon. Plutôt que de révolutionner nos workflows, nous avons commencé en douceur et nous nous sommes appliqués à mettre en place des quick wins avec les design tokens grâce aux variables de Figma.

La possibilité d'afficher les variables permet un contrôle précis et évite une mauvaise application (utilisation de couleurs de fond pour du texte ou de valeurs d'espacement pour un rayon de bordure). Nous avons personnalisé la syntaxe du code pour que les noms des variables soient alignés avec les conventions appliqués par les développeurs sur toutes les plateformes. Lorsque nous mettons à jour un token de couleur, nos développeurs voient immédiatement le changement correspondant dans le code.

2. Tirer profit des fonctionnalités d'inspection avancées

Les fonctionnalités d'inspection de Dev Mode ont considérablement amélioré notre workflow car elles prennent efficacement en charge des mises en page complexes, dont Flexbox. Cela génère un code à la fois élégant et facile à mettre en œuvre.

Ces fonctionnalités permettent à l'équipe en charge des design system d'examiner les composants UI en profondeur en inspectant les propriétés de style CSS, iOS (SwiftUI, UIKit) ou Android (XML, Compose) directement dans l'environnement de développement. Ainsi, les designers peuvent s'assurer que les composants sont construits exactement selon leurs spécifications. Avec l'extension VSCode de Figma, nous pouvons utiliser le remplissage automatique pour naviguer facilement dans les implémentations CSS, Compose ou SwiftUI.

3. Définir à quel stade une tâche est terminée

Conserver une documentation de design system à jour a toujours été compliqué. On a souvent l'impression que cela requiert d'y travailler à temps plein. D'après ce que j'ai pu voir, les intentions de design et les besoins spécifiques se perdent souvent dans la communication entre designers et développeurs. Les fonctionnalités de documentation et d'annotation de Dev Mode ont métamorphosé notre façon de garder l'information à jour et de la partager.

Nous avons mis en place un système où chaque composant a une documentation complète : des liens vers le code source de GitHub, des fichiers README, et les playgrounds (bacs à sable) associés. Grâce à cette approche, chaque membre de l'équipe a un accès permanent à une information à jour, et le temps passé à rechercher des ressources est considérablement réduit. Désormais, nous avons une règle : si ce n'est pas lié à Figma, ça n'existe pas.

Code Connect a eu un impact particulièrement important. Lorsque nous avons établi une correspondance entre le code de nos composants et les composants Figma, l'adoption du design system par les équipes produit a nettement augmenté. Je recommande d'intégrer cet aspect à la définition du stade auquel un composant est considéré comme achevé, ceci afin que la bonne documentation de code soit directement liée aux designs.

4. Améliorer la fonctionnalité avec des plugins

Même si Dev Mode est déjà très puissant, les plugins nous permettent de le personnaliser et de l'adapter à nos besoins spécifiques. En voici quelques-uns qui ont notablement amélioré notre workflow :

• Intégrations GitHub et Jira : elles nous permettent de lier directement les problèmes et les demandes de tirage aux composants, ce qui améliore le suivi et la précision de la mise en œuvre.
• Figma pour VS Code : Cette extension permet à nos développeurs d'accéder aux designs et de les inspecter au sein de Figma, directement dans le Visual Studio Code.

N'hésitez pas à développer des solutions sur-mesure. J'ai créé le plugin Variables Converter pour traduire les variables Figma dans différents formats de code, et plus de 5 000 utilisateurs de Figma s'en servent à présent.

Le plugin Variables Converter simplifie la conversion des variables Figma en propriétés CSS personnalisées, en variables JavaScript, Compose et SwiftUI.

Pour une personnalisation plus avancée, allez voir du côté de l'API REST de Figma. Elle propose des fonctionnalités avancées d'automatisation et d'intégration, surtout avec les nouvelles API associées aux variables. Le dépôt Figma variables GitHub Action Examplemontre comment configurer une synchronisation bidirectionnelle entre les variables Figma et les design tokens, ce qui illustre la puissance et la flexibilité de l'API.

5. Expérimenter dans le bac à sable des composants

Le bac à sable des composants de Dev Mode est un excellent outil pour expérimenter. Il est accessible via le panneau d'inspection lorsqu'un composant ou une instance est sélectionnée. Quand nous avons travaillé sur le nouveau composant Chip multi-variant, le bac à sable nous a permis de tester différentes configurations et d'identifier les cas limites que nous n'avions pas envisagés dans le design initial.

Code Connect s'intègre en toute fluidité au bac à sable des composants, et se met à jour en temps réel, au fil de l'ajustement des paramètres. Dans notre cas, un seul composant Chip dans le design se traduit par trois composants distincts dans le développement web. Cette intégration nous permet de voir les mises à jour du code en temps réel lorsque nous modifions les propriétés.

6. Utiliser le contrôle des versions et les comparaisons visuelles

La fonctionnalité de comparaison des changements a été un apport inestimable pour notre équipe en charge des design systems. Nous pouvons facilement faire le suivi des changements au fil du temps, comparer différentes versions en les mettant côte à côte, et revenir à des itérations passées. Cette fonctionnalité nous donne la confiance nécessaire pour itérer plus rapidement sur notre design system, et se combine harmonieusement à lacréation de branches en permettant aux équipes de travailler sur des mises à jour parallèles sans perturber le système principal.

Lorsque nous avons mis à jour notre composant de bouton pour améliorer l'accessibilité, nous avons utilisé la fonctionnalité de comparaison visuelle pour communiquer clairement les changements à toute notre organisation produit. Cette transparence a aidé à faciliter la transition et a renforcé l'adhésion à la mise à jour.

7. Garder sa concentration avec la vue Focus

La fonctionnalité vue Focus est une fonctionnalité très pratique pour notre workflow. Elle est conçue pour vous aider à vous concentrer sur des designs spécifiques, prêts pour le développement. Avec cette vue, nous pouvons accéder aux outils de Dev Mode, comme Inspect et les onglets de plugins, tout en ayant une vue claire et isolée du design. C'est particulièrement utile pour examiner les calques individuels, suivre l'historique des versions spécifiques au design, et s'assurer que tous les changements nécessaires ont été faits avant de marquer un design comme terminé.

Cette fonctionnalité s'est montrée particulièrement utile lorsque nous finalisions les mises à jour de notre composant bouton. La vue Focus nous a permis d'examiner minutieusement le design, de nous assurer qu'aucun détail n'avait été oublié et de fluidifier la communication avec les développeurs.

8. Favoriser une culture de la collaboration

Pour exploiter au maximum le potentiel de Dev Mode, nous avons mis en place des sessions collaboratives pendant lesquelles les designers et les développeurs se rassemblent à toutes les étapes du projet. Nous commençons chaque projet avec des sessions collaboratives sur FigJam, où les participants peuvent librement élaborer et affiner les propriétés, les variantes et les comportements des composants. À mesure que les idées se précisent, nous passons en douceur à Dev Mode, que nous utilisons pour visualiser les avancées, nous aligner sur les attentes et fêter nos victoires. La fluidité avec laquelle nous passons de l'idéation au développement permet d'éviter le cloisonnement, mais garantit également que l'expertise de chaque coéquipier soit mise à profit tout au long du processus.

9. Conserver un état d'esprit basé sur l'itération

Nous traitons Dev Mode comme un composant dynamique de notre processus de design, qui a besoin d'itérations et d'améliorations régulières. Notre design system évolue en même temps que notre façon d'utiliser Dev Mode.

Récoltez des retours régulièrement avec des questionnaires trimestriels, comme le System Usability Scale (SUS, échelle d'utilisabilité des systèmes). Ces évaluations fournissent des informations précieuses sur la manière dont les designers et les développeurs interagissent avec vos bibliothèques, ce qui permet d'identifier les domaines d'excellence et les possibilités d'amélioration. Utilisez ces résultats pour nourrir votre prochaine itération, pour générer des améliorations via un cercle vertueux.

10. Continuer à apprendre et rester curieux

Nous sommes constamment en train de tester les nouvelles fonctionnalités et les mises à jour de Dev Mode. Rester au courant de son évolution nous aide à améliorer nos processus en continu. Nous dédions du temps à la formation et au développement personnel, éléments que nous incorporons à notre quotidien.

Je vous encourage à explorer toutes les ressources de Figma, dont la documentation, les webinaires, et le forum de la communauté. S'engager à apprendre et suivre nos progrès en continu avec des indicateurs de performance clés nous permet de constamment améliorer nos compétences et de nous adapter à de nouveaux outils et techniques.

Retour sur une année avec Dev Mode

Après une année avec Dev Mode, je peux dire que cet outil a beaucoup amélioré le workflow de notre design system. Bien que des difficultés subsistent, surtout sur la gestion des composants complexes, la capacité de Dev Mode à faire le lien entre design et développement a rapproché nos équipes, ce qui a eu pour effet de rendre l'expérience utilisateur plus cohérente et qualitative.

Si vous avez des difficultés à faire adopter votre design system et à instaurer une collaboration efficace entre designer et développeurs, je vous recommande de tester Dev Mode. Commencez modestement, attendez-vous à rencontrer des difficultés au début, et n'hésitez pas à le personnaliser pour qu'il corresponde à vos besoins. Les bénéfices potentiels en termes de cohérence, d'efficacité et de collaboration sont significatifs. J'ai hâte de voir comment Dev Mode va façonner la façon dont nous travaillons sur notre design system à l'avenir.