Concevez ensemble avec des calques de code sur le canvas

Concevoir avec du code vous permet d'observer le rendu et le comportement d'une expérience, des micro-interactions aux flux complets. Mais lorsque chacun travaille séparément avec ses propres outils de développement, on peut avoir l'impression de concevoir en vase clos, ce qui rend plus difficile le partage du travail ou la comparaison des différentes options.

C'est pourquoi nous avons lancé des calques de code en début d'année, permettant ainsi d'intégrer du code dans le canvas partagé de Figma. Auparavant, travailler avec du code impliquait d’utiliser un IDE, ce qui ne correspondait pas à la manière dont de nombreux utilisateurs de Figma souhaitent travailler. Les calques de code permettent aux équipes de créer visuellement en code, avec tous les outils collaboratifs qu'offre le canvas de Figma. Les coéquipiers peuvent tester des prototypes côte à côte, y ajouter des commentaires, ou dupliquer un calque de code pour explorer leurs propres idées, le tout au même endroit. Qu'il s'agisse de convertir des designs existants en code fonctionnel, d'importer un prototype codé depuis un outil tiers, un dossier local ou GitHub, ou de capturer le contenu en ligne de votre site web avec l'extension Chrome, les calques de code vous permettent de continuer à créer sur le canvas.

Découvrez tous les lancements prévus cette semaine.

Créer à partir de votre travail existant

Lorsque vous explorez une nouvelle idée de produit, il est parfois utile de partir d'une page blanche. En d'autres occasions, par exemple lorsque vous envisagez une nouvelle fonctionnalité ou un nouveau flux, il est plus efficace d'utiliser votre base de code existante. Les calques de code vous offrent plusieurs façons de tirer parti du travail déjà réalisé. Importez une base de code de prototypage légère prise en charge depuis GitHub ou un dossier local pour créer à partir des écrans et des interactions dont vous disposez déjà. Lorsque vous importez depuis GitHub, le calque de code reste connecté à ce référentiel.

Par exemple, chez Cox Automotive, qui fournit des logiciels et des services aux concessionnaires automobiles, Lindsay Brechler, product manager senior, a intégré un prototype HTML existant dans des calques de code afin que les parties prenantes puissent s'accorder sur une nouvelle fonctionnalité. Parce que chaque version restait sur le canvas, Lindsay pouvait reprendre l'une d'elles et continuer à itérer sans avoir à repartir de zéro. « D'itération en itération, les calques de code permettent de très bien conserver la cohérence entre chaque écran et chaque interaction », explique Lindsay.

Vous pouvez également transformer un design Figma en un calque de code interactif. Derek Onay, responsable du design produit pour les design systems chez Rocket Money, utilise cette méthode pour partager ses premières idées avec son équipe. Lorsque celle-ci créait des composants d'écran de base, il était important de fixer les interactions et l'accessibilité dès le début, avant qu'elles n'affectent les utilisateurs du produit. Derek a créé un concept dans un calque de code afin de faciliter ces échanges. « Avec les calques de code, la véritable valeur réside dans la capacité à mieux communiquer des idées et à obtenir l’adhésion des parties prenantes », déclare-t-il. « Je peux partager un prototype fonctionnel et rejoindre mon équipe là où elle est déjà, sur Figma. »

Au-delà du code et des designs existants, vous pouvez apporter un prototype depuis votre outil de codage sur le canvas via le serveur MCP de Figma, ou capturer votre page web en direct comme un calque de code grâce à l'extension Chrome de Figma.

Explorer et construire ensemble

Lorsque vous travaillez avec des agents de codage dans un IDE, il est facile de s'accrocher à votre première idée avant d'avoir envisagé les alternatives. Grâce aux calques de code, plusieurs versions d'un prototype peuvent coexister sur le même canvas : vous et votre équipe pouvez dupliquer un prototype, tester une approche différente et comparer les deux versions sans avoir à alterner entre elles.

Miguel Wermuth, un designer produit chez Dell Technologies, travaille sur l'expérience du compte client tant pour les entreprises que pour les acheteurs de dell.com, sur mobile, tablette et bureau. Il utilise des calques de code pour intégrer des expériences d'IA conversationnelle, dans lesquelles une partie prenante peut saisir une question et le prototype répond en affichant l’écran approprié, sur le canvas. Une fois qu'un flux est approuvé par ses collègues designers, Miguel le développe en calques de code pour obtenir l'approbation des parties prenantes commerciales, qui trouvent un prototype fonctionnel plus facile à suivre qu'une série d'écrans statiques. Pour comparer les versions, il duplique les calques de code côte à côte sur le canvas. « Grâce aux calques de code, je peux travailler sur du code tout en concevant sur le canvas. Cette interaction plus fluide entre le design et le code est vraiment très puissante. »

Mais il ne s'agit pas seulement d'évaluer une orientation ; les calques de code vous permettent de prendre du recul et d'examiner une expérience produit dans sa globalité. Comme le dit Matt Davey, directeur de l'expérience chez 1Password : « La véritable superpuissance de Figma a toujours été le canvas. » C'est comme lorsque nous imprimions toutes les pages d'un site web et les collions sur un tableau blanc. La possibilité d'examiner ces éléments d'UI dans leur ensemble est extrêmement précieuse. »

Affiner sans négliger le code

À mesure que vous peaufinez une idée, les calques de code vous permettent d'apporter des modifications à la conception et de les appliquer au prototype fonctionnel. Pour les changements visuels que vous préférez effectuer directement, la fonction Extraire les designs transforme un écran ou un flux d'un calque de code en calques modifiables dans Figma.

Chez Checkout.com, Kris Murphy, designer produit senior, travaille sur des produits que les entreprises intègrent dans leurs propres expériences clients. Lorsqu'un client potentiel a voulu voir la technologie en action, Kris a créé une démo à l'aide de calques de code. « Les calques de code m'ont permis d'accélérer la création de la démo d'environ 50 %, et ce, avec un outil que je ne maîtrise pas encore totalement », dit Kris. Avant de partager la démo avec un client, Kris voulait s'assurer de la qualité de chaque écran. Au lieu de cliquer sur le prototype écran par écran, il a extrait chaque écran du calque de code sur le canvas de Figma. À partir de là, il était facile de les revoir côte à côte pour repérer et corriger tout ce qui devait être retravaillé. Kris a ensuite renvoyé ces modifications au calque de code, et l'équipe de Checkout.com a également pu revoir le flux complet des révisions effectuées sur le canvas. « Les calques de code représentent le parfait trait d'union entre le design et le développement, , déclare-t-il. « Ils m'ont aidé à concevoir et à mettre en œuvre mes idées rapidement. »

Parmi les autres options d'édition, il est possible de faire un commentaire directement sur un prototype, d'annoter les frames d'un prototype pour montrer à l'agent où un changement est nécessaire, ou d'inspecter et de modifier le code directement. Et la nouvelle expérience plein écran mise à jour vous permet de travailler avec l'agent dans plusieurs fils de discussion sur différentes parties du travail.

Une fois que vous avez terminé de mettre à jour votre code avec vos modifications, vous pouvez le pousser vers une branche afin que vos collègues puissent continuer à développer à partir du prototype. Créer une demande d'extraction permet à votre équipe de revoir ces modifications avant de les fusionner dans le projet partagé.

Les calques de code sont déployées en bêta ouverte à partir d'aujourd'hui et utiliseront des crédits d'IA. Dans les forfaits payants, la création et l'édition au sein des calques de code sont gratuites jusqu'au 4 novembre 2026.