Figma s’ouvre aux développeurs avec Dev Mode

Figma est natif du web – un début surprenant pour un outil de design. Et pourtant, cette caractéristique est essentielle à nos yeux, car le product design en avait terriblement besoin. Via un lien unique, les designers peuvent travailler ensemble sur un fichier de design et partager leurs premières pistes de réflexion, plutôt que garder jalousement leurs maquettes jusqu’à ce qu’elles soient parfaites. Alors que de plus en plus de designers adoptent Figma et la nouvelle façon de travailler que l’outil permet, nous avons commencé à voir émerger un élargissement naturel des usages au sein des équipes et des métiers, surtout chez les développeurs.

Actuellement, plus de développeurs se rendent sur Figma que de designers, du moins via des forfaits payants. Comprendre les besoins des développeurs et les défis auxquels ils font face est essentiel pour faire de Figma un lieu où le développement de produit devient plus efficace et collaboratif, où les échanges sont fluides et le partage d’opinion facile.

En effet, ces professionnels ont des workflows et des préférences qui leurs sont propres. Les développeurs front end travaillent avec des design systems établis, leurs collègues en créent les composants, d’autres construisent des mises en page pour accueillir le contenu et exportent des ressources en collaborant avec des brand designers… et tous ces intervenants veulent travailler en bonne intelligence les uns avec les autres.

Nous considérons Dev Mode comme une superbe occasion de fournir aux développeurs ce dont ils ont besoin de manière rapide et efficace – exactement comme nous cherchions à le faire pour les designers aux débuts de Figma. Plus il est facile pour les équipes de concevoir, documenter, retrouver et mettre en œuvre des designs « pixel perfect » sans perdre de vue leur travail (ou leurs collègues) en cours de route, plus le produit sera réussi. Nous sommes enthousiastes à l’idée d’entreprendre un rapprochement entre design et développement au sein de Figma, et nous avons hâte de voir comment les équipes vont se l’approprier.

Passez plus rapidement au code

Bien que le plan de travail de Figma soit idéal pour expérimenter librement avec le design, se retrouver dans un fichier dépourvu des informations nécessaires à l’implémentation peut être déroutant. Dev Mode est l’équivalent de la fonction Inspect du navigateur, mais pour les fichiers de design. Il traduit des formes, des calques et des groupes dans la langue des développeurs, en utilisant leurs mots : code, icônes et tokens. Il suffit de survoler et de cliquer sur le plan de travail dans Figma pour trouver et exporter toute l’information nécessaire, comme les dimensions, les spécifications ou les ressources, et pour obtenir une contextualisation supplémentaire issue du design system.Tout comme Chrome Dev Tools, Dev Mode s’inspire d’autres outils de développement pour créer une interface qui vous semble familière au premier coup d’oeil.

La partie dédiée au code dans Dev Mode a été entièrement repensée ; vous pouvez désormais la personnaliser pour travailler avec le langage de programmation de votre choix. Nous savons tous que le code n’est pas utile sous une forme prête à l’emploi. Il s’agit plutôt d’un point de départ qui évite d’avoir à réinventer la roue à chaque nouvelle tâche. Vous aurez un modèle de boîte CSS, une syntaxe moderne avec une vue hiérarchique, et vous pourrez passer d’une unité à l’autre pour trouver celle qui convient aux dimensions de votre base de code.

Tout ce dont vous avez besoin, au même endroit

Avec le plugin GitHub, vous pouvez lier des fichiers et des tickets, mais aussi faire des requêtes sur des composants et des designs Figma, de façon à disposer en permanence des informations contextuelles dont vous avez besoin au même endroit.

Développer des produits requiert une chaîne de compilation robuste, mais passer d’une librairie à une autre, puis à la base de code, puis à des outils de gestion de projet peut être source d’inefficacité, surtout quand les noms des composants et des styles ne correspondent pas à ce qu’il y a dans le code, ou quand les membres de l’équipe ne suivent pas les tâches ou ne les documentent pas. Dev Mode vise à vous rendre plus productifs en connectant les outils que vous utilisez et vos composants de code au fichier de design.

Les plugins vous permettent de multiplier les fonctionnalités de Figma afin de l’adapter à la façon de travailler de votre équipe. Vous pouvez traiter la gestion de projet avec Jira, Linear, et GitHub, afin de rester aligné avec votre designer et pour que chacun reste informé de la progression de l’autre. Avec Storybook, référencez les actions menées dans votre base de code, mises en contexte avec le design en particulier. Avec les plugins de génération de code d’AWS Amplify Studio, de Google Relay et d’Anima, vous pouvez personnaliser le code en sortie, et même créer le vôtre à partir de votre workflow.

Les design systems deviennent de plus en plus puissants avec l’arrivée des tokens via les variables. Les tokens sont des petits paquets de données UI que l’on peut utiliser dans le design et le code. Ils sont désormais disponibles dans Dev Mode, afin de savoir immédiatement ce que l’on peut commencer à développer. Des liens peuvent également être ajoutés aux objets sur le plan de travail pour renvoyer à la documentation, ou à ce qui se trouve dans les plugins.

Suivez ce qui doit partir en production

Même si les frontières entre les phases de design et de développement ont tendance à s’atténuer, leurs objets respectifs (fichiers de design et code) restent distincts. Jusqu’à présent, il n’était pas évident de parcourir les fichiers de design, de sélectionner des composants spécifiques et leurs propriétés, ou même de voir les dernières modifications effectuées. Désormais, les designers peuvent tout simplement apposer un label « Prêt pour le développement » et vous envoyer le fichier, sans avoir besoin de créer une page en plus ou un autre fichier. La gestion des différences vous permet de comparer les changements entre les versions d'une frame et de rester au courant des dernières évolutions.

Consolidez votre workflow

Avec l’extension VS Code, vous pouvez booster votre éditeur de code en important les fonctionnalités de Dev Mode pour passer les designs en revue, voir les notifications et les commentaires, et rester au courant des changements sans avoir besoin de quitter votre environnement de développement. L’extension VS Code complète automatiquement le code en se basant sur le design que vous inspectez. De quoi vous aider à travailler beaucoup plus vite !

Dev Mode et Figma for VS Code sont disponibles en version bêta et restent gratuits pour tous les utilisateurs jusqu’à fin 2023. À partir de 2024, un forfait payant sera nécessaire pour accéder à Dev Mode. Si vous avez un compte éditeur via un forfait payant, Dev Mode y sera inclus. Comme certains développeurs n’auront pas besoin de toutes les fonctionnalités de Figma, nous allons lancer deux nouveaux forfaits payants spécialement pour eux. À partir de 2024, vous pourrez accéder à Dev Mode pour seulement 25 € par compte et par mois avec un forfait Figma Organisation, et 35 € par mois et par compte avec un forfait Entreprise.

Ce n’est qu’un premier pas vers une ouverture plus importante de Figma aux développeurs. Grâce aux données récoltées via la version bêta de Dev Mode et VS Code, nous avons hâte de rendre ce mode encore plus fonctionnel et d’aider à améliorer la collaboration entre développeurs et designers de plusieurs façons. À venir également, l’extraction des spécifications et un alignement facilité entre le design et le code.

Testez Dev Mode et dites-nous ce que vous en pensez.