Connectez votre bibliothèque de design
Indiquez à l'agent votre design system, afin que le code généré référence vos vrais tokens, variables et structure de composants – et non des placeholders génériques.
Convertissez vos designs en code directement sur votre plan de travail
Transformez vos designs Figma en code prêt pour la production grâce à l'IA – directement dans votre fichier. Aucun export, aucune reconstruction dans un outil séparé, aucun transfert rompu entre le design et le développement.
Du design au développement, en un seul endroit
L'agent Figma traduit vos calques, composants et styles réels en code que les développeurs peuvent utiliser – pour que tout le monde travaille dans le même fichier.
Générez du code qui correspond à votre design
L'agent Figma lit vos calques, espacements et composants réels pour produire un code qui reflète ce que vous avez construit – pas une approximation grossière qu'il faudrait reconstruire de zéro.
Réduisez les frictions de transfert, livrez plus vite
Évitez les allers-retours liés à l'export des specs, à l'annotation des redlines et aux questions sur le padding. L'agent traduit vos décisions de design en code que les développeurs peuvent utiliser directement.
Gardez designers et développeurs alignés
La génération de code se fait dans le même fichier où votre équipe conçoit, pour que tout le monde voie la source de vérité. Plus d'exports obsolètes qui circulent, plus de confusion sur la version actuelle.
Les fonctionnalités derrière la conversion
Un aperçu de ce qui distingue l'agent Figma, conçu pour la manière dont les équipes de design travaillent réellement.
Prompts en parallèle
Explorez plusieurs résultats de code à la fois – essayez une version React et une version HTML en même temps, puis choisissez celle qui correspond à votre stack.
Fils partageables
Partagez un fil et votre équipe voit le prompt complet, le contexte de design et le code généré. Les développeurs comprennent le pourquoi derrière le résultat.
Affinez avec des prompts de suivi
Le premier résultat n'est pas tout à fait ce qu'il vous faut ? Ajustez dans le même fil – demandez des breakpoints responsive, une syntaxe différente, ou des conventions de nommage plus propres.
Figma est comme une extension naturelle de ma main. Je développe mes idées de design sur le plan de travail, et maintenant l'agent prend le relais pour la dernière étape. Avec mes bibliothèques de design connectées, je peux passer du design au code plus rapidement que jamais.
Andy Madrick
Product Designer chez Notion
Commencez avec l'agent Figma
Sélectionnez votre design
Ouvrez votre fichier dans Figma Design et sélectionnez le frame, le composant ou la section que vous voulez convertir en code.
Décrivez le résultat souhaité
Indiquez à l'agent ce dont vous avez besoin – HTML et CSS, composants React, ou un framework spécifique. Mentionnez les conventions que suit votre équipe.
Vérifiez le code
Vérifiez le résultat généré sur votre plan de travail. Pas tout à fait ce qu'il vous faut ? Affinez dans le même fil ou essayez un prompt en parallèle pour une approche différente.
Transférez au développement
Partagez le fil avec vos développeurs. Ils voient votre design, le prompt et le code généré au même endroit – prêt à être implémenté ou itéré.
Devenez un expert de l'agent
L'agent de design Figma est là
En savoir plusRegardez l'agent IA de Figma en action et voyez comment l'utiliser dans vos propres workflows.
Travaillez avec l'agent Figma
CommencerUn terrain de jeu pratique pour explorer les capacités de l'agent Figma – de l'édition en masse à la mise en œuvre des retours – avec des instructions étape par étape intégrées.
Comment utiliser l'agent Figma dans vos workflows de design
Regarder la vidéoApprenez à utiliser l'agent Figma dans vos workflows de design avec un tutoriel étape par étape de l'équipe Figma.
FAQ
Un convertisseur Figma vers code traduit des designs visuels en code prêt pour la production – HTML, CSS, React, ou d'autres formats. L'agent Figma fait cela directement sur votre plan de travail, en lisant vos calques, composants et tokens de design réels pour générer du code qui correspond à ce que vous avez créé. Aucun outil séparé ni étape d'export nécessaire.
L'agent Figma peut générer du code à partir de vos designs lorsque vous le lui demandez via un prompt. Sélectionnez un frame, décrivez le format de sortie dont vous avez besoin, et l'agent traduit vos calques en code. Ce n'est pas entièrement automatique – vous guidez le processus avec des prompts – mais il se charge du travail de traduction pour que vous n'ayez pas à tout reconstruire manuellement.
La précision dépend de la structure de votre design. L'agent Figma lit vos calques, votre espacement et votre hiérarchie de composants réels, donc des fichiers propres et bien organisés produisent un code plus propre. Vous pouvez affiner les résultats avec des prompts de suivi – en ajustant les conventions de nommage, le comportement responsive, ou la syntaxe – jusqu'à ce que le code corresponde à vos standards.
L'agent Figma est disponible sur tous les plans payants de Figma. Vous le trouverez dans la barre latérale gauche de Figma Design. Pendant la bêta ouverte actuelle, il ne consomme pas de crédits IA – c'est donc le bon moment pour explorer, expérimenter et partager vos retours avec nous.
Construisez plus vite avec l'agent Figma
Dans Figma Design, sélectionnez le frame ou le composant que vous voulez convertir, puis ouvrez l'agent depuis la barre latérale gauche ou appuyez sur CMD + Entrée. Décrivez le résultat dont vous avez besoin – React, HTML, CSS responsive – et l'agent génère du code à partir de vos calques de design réels. Affinez avec des prompts de suivi jusqu'à ce que ce soit prêt pour le développement.