Les nouveautés de Dev Mode : annotations, comparaison des versions, plugins, et bien plus

Quand nous avons demandé comment faire en sorte qu’un outil de design devienne aussi un atout pour les développeurs, la communauté Dev Mode, en pleine croissance, nous a expliqué ce dont les développeurs front end et ingénieurs design system avaient vraiment besoin dans Figma. Depuis le lancement de la version bêta en juin 2023, plus de deux millions de fichiers ont été marqués comme « Ready for dev » (prêts pour le développement), et nous avons livré plus de 200 nouvelles fonctionnalités et corrections pour répondre aux retours de nos utilisateurs. À l’heure où la fin de la version bêta approche, nous avons apporté des améliorations et ajouté des fonctionnalités pour vous aider à travailler plus vite, améliorer la livraison aux développeurs, et personnaliser vos workflows.

Gagnez du temps avec les annotations natives de Dev Mode

Le développement de produit ne s’arrête (presque) jamais ! Une communication limpide et constante est donc indispensable pour le suivi des projets. Les développeurs ont besoin d’un moyen simple pour suivre les changements apportés aux designs afin de pouvoir coder en toute confiance, indépendamment du marquage « Ready for dev » apposé par leurs collègues designers. Et comme ces derniers ont recours à des annotations créées manuellement, nous mettons à leur disposition un outil d’annotation natif pour simplifier le processus. Avec les annotations, les designers peuvent partager des informations sur le contexte, des spécifications et des mesures en les connectant directement à leurs mockups. Les développeurs, eux, peuvent facilement consulter ces notes en codant, s’assurant ainsi de ne pas passer à côté d’informations cruciales lors de la livraison.

Indiquez rapidement des mesures

Avec l’outil de mesure, les designers peuvent facilement prendre et déplacer des mesures, faciles à épingler sous la forme d'annotations, afin d'accélérer l’ajout des spécifications.

Ne faites les changements qu’une seule fois

Les annotations sont reliées à une couche du plan de travail, donc si un designer a épinglé une propriété ou une mesure et modifie cette couche en Design Mode, l’annotation se mettra à jour en temps réel.

Concentrez-vous sur les bons détails

Les annotations ajoutées par les designers sont affichées ou masquées en fonction du niveau de zoom, afin d’être faciles à repérer pour les développeurs, sans pour autant cacher d’autres éléments.

Automatisez et personnalisez vos annotations avec des plugins

Nous avons intégré les annotations à l’API de plugin, afin de vous offrir la possibilité de créer vos propres plugins Dev Mode pour créer et gérer les annotations à grande échelle.

Conjointement aux annotations, nous ajoutons une nouvelle modale à la comparaison des modifications, afin d’afficher les différences à la fois visuellement et dans le code, même avec des composants détachés. Et pour améliorer davantage la livraison, nous rassemblons les nombreux outils déjà inclus aux workflows des équipes produit. Avec l’application Jira pour Figma, vous pouvez ajouter des fichiers de design à des tickets Jira et recevoir une notification lors des changements apportés aux mockups.

Personnalisez le code pour l’adapter à votre façon d’utiliser les plugins dans Dev Mode

En matière de code, aucune organisation ne se ressemble. Que vous vous basiez majoritairement sur codegen, que vous travailliez avec des frameworks comme Tailwind ou Bootstrap, que vous adhériez à un design system avec du code déjà écrit au niveau des composants, ou une combinaison de tout cela, Figma s’adapte. Pour satisfaire ces besoins à la fois spécifiques et variés, il existe un éventail de plugins codegen qui génèrent du code dans le framework de votre choix, comme par exemple React, Tailwind, HTML et autres. Il est même possible d’épingler un plugin en haut du volet d’inspection afin d’y avoir accès dès que nécessaire.

Chez Razorpay, les développeurs travaillent sur RazorSharp, un plugin Dev Mode personnalisé pour générer automatiquement le code équivalent aux designs. Lire le cas Razorplay en entier.

Nous savons qu'il est nécessaire pour les développeurs de rester en phase avec le design system de leur organisation, raison pour laquelle nous leur avons donné la possibilité de créer des plugins personnalisés. Nous avons vu de nombreux plugins être créés pour relier les informations des design systems aux mockups dans Figma, et nous encourageons leur adoption en permettant aux organisations d'exécuter les plugins par défaut pour tous les fichiers de leur équipe.

Optimisez votre workflow avec l’extension Figma pour VS Code

Nous savons que le passage d'un outil à l'autre peut ralentir le travail et provoquer des difficultés. Notre extension VS Code a été conçue pour résoudre ce problème en facilitant l'accès et l'inspection des designs par les développeurs, directement à partir de VS Code. La souplesse des fichiers à pages multiples, chacune avec son plan de travail infini, est idéale pour les designers. Cependant, cette liberté complexifie le repérage des éléments nécessaires par les développeurs. Nous avons repensé l'expérience Figma pour VS Code avec une vue structurée pour améliorer la navigation et la découvrabilité des fichiers de design. Au lieu de naviguer sur un grand plan de travail, il est possible de sélectionner facilement une grille de frames et de les visualiser un par un grâce à la vue focalisée. De plus, les plugins sont désormais exécutables dans VS Code, ce qui permet de recourir à des outils tiers et à Codegen sans quitter l’éditeur de code.

Et pour la suite ?

Le 31 janvier, les utilisateurs de Dev Mode auront besoin d'un compte payant pour accéder à Dev Mode, ce qui inclut les annotations, les mises à jour pour la comparaison des modifications, les extraits de code personnalisables, les plugins Dev Mode et les ressources pour les développeurs. Comme nous l'avons annoncé lors de Config 2023, vous aurez la possibilité de vous abonner à Dev Mode pour seulement 25€/place/mois avec Figma Organisation, et 35€/place/mois avec Entreprise. Les utilisateurs disposant d'une place Figma design payante peuvent continuer à utiliser toutes les fonctionnalités de Dev Mode de manière inchangée, que ce soit dans le cadre des forfaits Professionnel, Organisation ou Entreprise.

Les administrateurs pourront approuver les demandes de mise à niveau vers Dev Mode depuis le panneau d'administration. En attendant la validation, les développeurs peuvent continuer à utiliser Dev Mode pendant 14 jours. Si la mise à niveau ne se fait pas, les développeurs pourront toujours visualiser les propriétés et les mesures, copier le code et exporter les assets depuis Design Mode. Ces fonctionnalités resteront gratuites et accessibles à partir de Dev Mode ou en tant que lecteur dans Design Mode. Cette période de 14 jours permet aux développeurs de continuer à utiliser Dev Mode sans interruption, tout en donnant aux administrateurs le temps d'en gérer les accès et l'utilisation.

Il reste encore beaucoup à faire pour améliorer les workflows et la collaboration entre designers et développeurs dans Figma. Il nous tient à cœur de continuer à itérer en nous appuyant sur les commentaires de nos utilisateurs, à commencer par les nouveautés qui seront mises en ligne le 31 janvier. Rejoignez notre prochain livestream pour découvrir ces évolutions et écouter les explications de l'équipe en charge de leur conception.