Coder sur le plan de travail Figma
Grâce aux calques de code de Figma Design, vous pouvez explorer avec votre équipe plusieurs approches avec du code côte à côte.
Partager Coder sur le plan de travail Figma
Les agents ont démocratisé la création et repoussé les limites de ce qui peut être créé. Mais trop souvent, le processus pour y parvenir se fait individuellement, dans des discussions séparées, des workflows déconnectés et une exploration isolée.
Le démarrage est flexible :
Dans Figma Design, ajoutez un calque de code depuis la barre d'outils, créez-en un à partir d'une frame existante ou demandez à l'agent Figma d'en générer un. Sur cette base, commencez par un modèle ou décrivez ce que vous souhaitez créer. Vous pouvez également intégrer une base de code existante – importer un référentiel GitHub ou télécharger directement un dossier local.
Dans Make, générez et modifiez du code, puis intégrez-le au plan de travail en tant que calque de code pour explorer, comparer et affiner avec votre équipe.
Avec les calques de code de Figma Design, le code interactif devient partie intégrante du plan de travail lui-même, ce qui permet aux équipes d'explorer, d'itérer et d'élaborer des idées ensemble au même endroit.
Donnez vie à toutes vos alternatives
Les designers ont toujours dupliqué les frames pour essayer des alternatives – il en va de même pour les calques de code. Les expériences de travail peuvent avoir lieu sur le plan de travail afin que vous puissiez comparer les effets des options, et pas seulement leur apparence. Déplacez, ajustez et redimensionnez les éléments et obtenez une réponse de code immédiate. Continuez à itérer avec des prompts et l'agent génère une nouvelle version tout en préservant l'original. Parce que les calques de code existent dans votre fichier partagé, vos coéquipiers peuvent intervenir, laisser des commentaires et générer des prompts par rapport au même calque.
Déplacez-vous parmi vos matériaux
Les calques de code permettent d'explorer les logiciels. En sélectionnant extraire les designs, vous pouvez rendre le code compréhensible visuellement en reconvertissant l'état actuel en calques Figma modifiables. Vous choisissez les données qui apparaissent sur le plan de travail : un seul écran, un état spécifique ou un flux complet. Sur cette base, un clic met à jour le calque de code avec vos modifications. Vous pouvez ainsi travailler de manière fluide entre le plan de travail et le code.
Affinez avec votre jugement
Lorsque vous souhaitez plus de précisions, vous pouvez annoter dans l'éditeur de code et demander à l'agent d'effectuer le changement souhaité ou cliquer pour effectuer la modification vous-même. Une fois que vous êtes satisfait, reconvertissez le résultat vers le calque de code et transférez-le vers votre référentiel afin que votre source reflète les changements apportés. Toute votre équipe peut alors voir la mise à jour.
Avec les calques de code de Figma Design, le plan de travail est un espace partagé où le design et le code évoluent ensemble – un endroit où tester des choses, les comparer et arriver à la bonne idée à concrétiser.
Les calques de code seront déployés en version bêta fermée au cours des prochaines semaines. Inscrivez-vous ici pour demander un accès anticipé. Visitez notre centre d'aide pour voir un récapitulatif de ce que nous avons lancé à Config, et comment commencer. Trouvez des réponses et une inspiration sur tout ce qui concerne Figma sur Figma Learn.
Lisez le résumé de Config par Dylan Field, PDG et co-fondateur de Figma.
