Tout savoir sur Dev Mode

Figma n’a jamais été pensé uniquement pour le design. Le design est plus qu’un intitulé de poste, cela désigne aussi la création de produits exceptionnels. Raison pour laquelle Figma est natif du web : avec un lien unique, les équipes peuvent travailler ensemble sur leurs projets et expérimenter sur les fichiers dès le début. Cette approche multi-joueurs encourage les collaborateurs à unir leurs forces et à résoudre des problèmes au sein du même espace, ce qui contribue à notre vision d’un design accessible à tous.

Nous souhaitons continuer à développer cette vision. Nous l’avons entamée en écoutant nos utilisateurs avec attention et en livrant des fonctionnalités qui répondent à leurs besoins au moment où ceux-ci apparaissent. Lorsque nous voyons une occasion de créer de nouveaux outils et expériences pour faire avancer les choses, nous passons à l’action – c’est exactement comme ça qu’est né Dev Mode.

Pourquoi créer Dev Mode ?

À ce jour, les développeurs représentent un tiers de nos utilisateurs hebdomadaires actifs. Même si Figma n’était pas particulièrement optimisé pour leurs workflows, les développeurs ont commencé à travailler avec les designers, les product managers et d’autres parties prenantes du processus de développement de produit. Les développeurs nous ont beaucoup appris sur les subtilités des workflows de développement, des chaînes de compilation, et aussi sur leurs préférences. Leurs retours ont orienté notre objectif final : créer un espace dans Figma qui soit spécialement conçu pour eux, qu’il s’agisse de développeurs front-end travaillant avec des design systems matures ou de développeurs de design systems codant des composants, en passant par ceux qui créent des mises en page pour le contenu et exportent des assets dans le cadre de leur collaboration avec des brand designers. Notre but était de pouvoir aider un grand nombre d'équipes, de l'idéation jusqu’au code.

Nous avions besoin d’une équipe aussi passionnée de développement que nous le sommes de design, c’est pourquoi nous avons racheté Visly en 2021. L’équipe de huit designers et développeurs a construit un outil pour développer des composants UI en React. « Nous avons discuté avec énormément de développeurs, ce qui n’a rien à voir avec le fait de suivre son intuition », explique Sho Kuwamoto, le vice-président du produit de Figma. « Il faut se plonger dans cet univers. » Les membres de Visly ont apporté leurs années d’expérience sur le terrain, mais aussi des mois de recherche sur les outils de développement. Autrement dit, ils ont « l’intuition » de développeurs que Figma recherchait.

L’équipe Visly a tout de suite proposé une nouvelle vision de ce que font les développeurs au sein de divers environnements, ainsi que des exemples concrets de sa façon d’utiliser Figma. Mais surtout, elle a partagé un élément fondamental sur ce que les développeurs attendent vraiment d'un outil de design. « Les développeurs ne devraient pas avoir à apprendre toutes les interactions du [mode design] », explique Joel Miller, product designer chez Visly. «Il faut plutôt adapter l'expérience Figma à leurs besoins. »

Découvrez comment nous avons orienté les décisions sur le design et le produit.

Après avoir compris les besoins et les défis propres aux développeurs, l'équipe s'est penchée sur un autre point clé de l'expérience produit : à quoi devrait ressembler Dev Mode ? « On a probablement passé un an et demi sur cette question », explique Emil Sjölander, cofondateur de Visly. « Entre les fichiers indépendants et les fichiers intégrés, il y a eu énormément d'itérations. »

L'équipe a finalement opté pour un mode qui permettrait aux développeurs de passer de l'espace de design à celui de développement sans avoir à changer complètement d'outil ou de fichier. Cette solution était idéale : suffisamment cloisonnée pour optimiser les besoins des développeurs, mais intégrée en tant qu'espace dans Figma pour que ceux-ci disposent des éléments de contexte importants de la part des designers.

Visionnez la conférence donnée par le CTO de Figma Kris Rasmussen à Config 2023 pour en savoir plus sur la conception de Dev Mode.

Lors de Config 2023, nous avons lancé une version bêta ouverte afin de résoudre les problèmes rencontrés par les développeurs, et les retours des utilisateurs ont permis de prendre de nombreuses décisions concernant le produit (Emil avait un Slackbot qui l'avertissait à chaque fois qu’un client envoyait une demande). Au cours des deux premiers mois de la bêta, nous avons livré plus de 200 des mises à jour les plus demandées pour Dev Mode.

Les possibilités offertes par Dev Mode

Au cours du processus de développement, nous nous sommes demandé comment améliorer le fonctionnement de Figma pour les développeurs. Le résultat ? Un espace de travail intégré à Figma, conçu pour fournir aux développeurs ce dont ils ont besoin au moment opportun, en tirant parti des outils qu'ils utilisent au quotidien. Plus il est facile pour eux de créer, de documenter, de retrouver et de mettre en œuvre des designs de haute fidélité tout en gardant le lien (et un œil sur la progression des uns et des autres), meilleur est le produit.

En savoir plus sur Dev Mode et comment le projet est né.

Une bonne compréhension des designs

Jusqu'à présent, les designers devaient indiquer manuellement les mesures et les annotations, en organisant minutieusement leurs designs afin de donner aux développeurs le contexte nécessaire pour travailler dans de bonnes conditions. Nous avons ajouté la fonction d'annotation à Dev Mode afin de fluidifier le processus. Désormais, les annotations sont mises à jour en direct, au fur et à mesure de l'évolution des designs. Les designers peuvent ainsi partager du contexte, des spécifications et des mesures supplémentaires directement liées aux mock-ups, et les développeurs peuvent facilement voir les notes des designers pendant qu'ils travaillent, s'assurant ainsi d'avoir toutes les informations importantes lors de la livraison.

Gagnez du temps avec les annotations (nouveau)

• Cliquez et glissez pour mesurer
• Restez à jour avec les modifications en direct
• Soulignez les détails importants sans encombrer le plan de travail
• Automatisez et personnalisez les annotations avec des plugins

Les designers peuvent simplement ajouter une note « ready for development » (prêt pour le développement) à une section et l’envoyer directement aux développeurs, sans créer de page ou de fichier séparé. Vous pouvez également comparer les changements entre les différentes versions d’une frame et rester à jour, grâce à une fonctionnalité dédiée.

Comparez les changements entre deux frames (nouveau)

Nous avons revu la modale de comparaison pour que vous puissiez comparer deux frames de votre choix et voir les différences entre deux itérations. Vous pouvez aussi comparer des composants détachés ou des variantes du composant principal. De plus, la modale de comparaison est plus interactive et permet aussi de comparer le code, pour que vous puissiez voir les différences à la fois dans le design et dans le code.

Travaillez plus rapidement avec vos outils préférés

Dev Mode vise à vous rendre plus productif en connectant vos outils et vos composants de code au fichier de design. Parce qu'il n'y a pas qu'une seule façon de travailler, nous avons conçu Dev Mode pour qu'il s'adapte à différents outils, processus et workflows. Que vous cherchiez à relier le design et le code avec Storybook, à assurer l'accessibilité avec Stark, ou à optimiser la gestion de projet avec Jira, Linear et GitHub, les plugins vous permettent de compléter les fonctionnalités de Figma afin de s'adapter à vos méthodes de travail.

Accédez à ce dont vous avez besoin dans votre éditeur de code

L'extension Figma pour VS Code vous permet de bénéficier de la puissance de Dev Mode dans votre éditeur de code pour passer en revue les designs, voir les notifications et les commentaires, et suivre les modifications sans jamais avoir à quitter votre environnement de codage. L'extension permet également de compléter automatiquement le code à partir du design que vous inspectez, afin de vous aider à travailler encore plus rapidement.

Naviguez plus facilement dans les fichiers de design et exécutez les plugins dans VS Code (Nouveau)

Nous avons remanié l'expérience Figma pour VS Code afin d'améliorer la navigation et la découvrabilité des fichiers de design. Au lieu d'avoir à parcourir un grand plan de travail, vous pouvez facilement sélectionner une grille de frames et les voir individuellement grâce à la vue focalisée. Désormais, vous pouvez également exécuter des plugins dans VS Code, ce qui vous permet d'utiliser des outils tiers et du code personnalisé sans quitter votre éditeur de code. Consultez notre documentation pour savoir comment faire fonctionner votre plugin maison dans VS Code.

Personnalisez codegen et favorisez l'adoption des design systems

Nous savons que le code généré n'est pas toujours utile dans sa version initiale. Il s'agit plutôt d'un tremplin pour ne pas avoir à partir de zéro à chaque fois. Dans Dev Mode, vous retrouverez une visualisation familière du modèle de boîte, une syntaxe moderne avec une vue arborescente, et vous pourrez basculer entre les unités de dimension (rems et pixels) pour les adapter à votre base de code. Si vous avez besoin de produire du code fonctionnel dans un langage spécifique comme HTML & CSS, React ou Tailwind, des plugins comme Anima ou Figma to Code peuvent vous aider à démarrer rapidement.

Pour rester en phase avec votre design system, vous devez construire des designs en utilisant le code qui correspond à la bibliothèque de composants de votre système. Vous pourriez compléter Figma en développant vos propres plugins codegen, en exploitant le Code Snippet Editor pour ajouter des extraits de code dynamiques qui reflètent le code de vos composants, ou en créant des outils pour synchroniser les design tokens en bidirectionnel avec notre API Variables REST.

Épingler et configurer les plugins pour une exécution automatique (nouveau)

De nombreuses équipes ont créé des plugins personnalisés pour favoriser l'adoption d'un design system dans Figma et dans le code. Désormais, les administrateurs gérant un compte Entreprise peuvent épingler et configurer des plugins pour qu'ils s'exécutent par défaut dans Dev Mode, et ce pour tous les fichiers de leur organisation.

Découvrez toutes les nouveautés de Dev Mode.

Décloisonner design et code

Aujourd'hui, alors que la version bêta gratuite de Dev Mode touche à sa fin, nous lançons de nouvelles fonctionnalités qui rapprochent le design du code, notamment les annotations dans Dev Mode, ainsi que certaines améliorations liées à la comparaison des modifications, aux plugins et à l'extension Figma pour VS Code.

Grâce à ces changements, il sera plus facile de passer du design au développement, et nous continuerons à itérer sur la façon dont nous pouvons lier encore plus étroitement les composants de code aux composants de design. Nous espérons également que ces évolutions aideront à considérer la livraison non plus comme un moment ponctuel, mais comme faisant partie intégrante d'une collaboration continue entre designers et développeurs.

Nous sommes enthousiastes à l'idée de publier ces mises à jour, qui s'appuient toutes sur les commentaires formulés par les utilisateurs au cours de la phase bêta. Merci à eux pour leur contribution. Nous allons continuer à apprendre et à itérer tout en faisant évoluer Dev Mode. Et au cours de ce processus, nous nous engageons à améliorer l’expérience des développeurs et à vous aider à travailler plus rapidement avec Figma.

Inscrivez-vous à notre prochain livestream pour découvrir tout ce que nous avons lancé et écouter l'équipe à l'origine de ces nouvelles fonctionnalités et améliorations.