Dès aujourd’hui, vous pouvez générer des fichiers de design Figma depuis Codex grâce au serveur MCP de Figma. Ce serveur facilite les allers-retours : vous pouvez importer une interface fonctionnelle sur le canevas Figma, puis reporter vos modifications dans le code tout aussi facilement. Vous pouvez ainsi explorer plusieurs idées et développer les meilleures sans vous arrêter à la première.
L’application de bureau Codex est conçue pour la programmation agentique. Son interface réunit les outils nécessaires pour gérer plusieurs agents en parallèle sur différents projets, suivre leur progression sans perdre le fil et intégrer des outils externes. Les équipes qui utilisent Figma connaissent bien cette souplesse. Sur le canevas, elles peuvent explorer plusieurs pistes et les retravailler pour laisser les meilleures idées prendre forme. En reliant le canevas Figma à Codex, vous pouvez poursuivre cette exploration tout au long du développement, du premier prototype à l’application en production.
Créer une application à partir d’une maquette
L’un des principaux usages du serveur MCP de Figma consiste à récupérer le contexte d’un fichier Figma pour générer du code. Pendant le développement, le serveur peut extraire des informations de fichiers Figma Design, Make et FigJam et les transmettre à Codex.
Pour commencer, ouvrez le fichier Figma qui servira de base à votre application. Faites un clic droit sur le cadre de votre choix, sélectionnez « Copier en tant que », puis « Copier le lien vers la sélection ».
Chaque URL de sélection pointe directement vers un cadre ou un nœud du canevas Figma. La sélection peut contenir un seul élément ou un ensemble de composants. Dans les deux cas, elle fournit les données dont l’agent se servira pour générer le code. Vous pouvez faire cette sélection dans un fichier Figma Design, Make ou FigJam. Une fois l’URL copiée, ouvrez Codex et choisissez un nouveau projet ou un projet existant. Donnez ensuite vos instructions à Codex avec un prompt comme celui-ci :
Aidez-moi à implémenter cette maquette Figma dans le code. Réutilisez autant que possible les composants de mon design system existant.Avec ce type de prompt, l’agent appelle l’outil get_design_context du serveur MCP de Figma. Cet outil extrait du fichier Figma les informations essentielles de la maquette, notamment la disposition des éléments, les styles et les caractéristiques des composants. Il transmet ensuite ce contexte à Codex pour la génération de code.
Le serveur MCP de Figma propose d’autres outils en plus de ceux qui extraient les informations d’une maquette. Pour en retrouver la liste complète, consultez notre documentation.
Du code au canevas
Après avoir retravaillé l’interface dans le code, vous pouvez la ramener sur le canevas pour comparer des parcours, explorer d’autres solutions et vérifier vos hypothèses. Le serveur MCP de Figma vous permet de récupérer ces écrans dans Figma sans avoir à les recréer à la main à partir de ce que vous voyez dans le navigateur. Avec l’outil generate_figma_design, quelques secondes suffisent pour convertir l’interface d’une application en cours d’exécution en cadres Figma entièrement modifiables. Vous pouvez alors explorer de nouvelles pistes en équipe, directement sur le canevas, à partir de l’interface telle qu’elle fonctionne.
Commencez par afficher l’interface de votre application, en local ou depuis un serveur web accessible au public. Demandez ensuite à Codex de vous aider à générer un nouveau fichier de design Figma.
Codex vous guidera alors à chaque étape :
- Choisissez de créer un fichier Figma ou d’utiliser un fichier existant.
- Sélectionnez l’espace de travail dans lequel placer le fichier.
- Préparez l’application pour la capture de l’interface.
- Ouvrez l’application dans une nouvelle session du navigateur.
Une fois l’application rechargée, une nouvelle barre d’outils apparaît en haut de la page avec les options suivantes :
Écran entier : capturez l’intégralité de l’écran tel qu’il s’affiche et envoyez la capture vers le fichier Figma.
Sélectionner un élément : choisissez le composant ou l’élément de la page à capturer.
Ouvrir le fichier : ouvrez le fichier Figma pour examiner les nouveaux calques de votre maquette.
Une fois que vous avez capturé tout ce que vous souhaitez transférer dans Figma, vous pouvez ouvrir le fichier ou revenir dans Codex. Vous y retrouverez l’URL du fichier Figma.
Un aller-retour avec MCP
Votre application et votre fichier de design sont prêts. Vous pouvez maintenant retravailler l’interface en profitant des possibilités qu’offre le canevas Figma :
- Ajoutez des composants de votre design system.
- Associez les styles, les polices et les couleurs à des variables.
- Ajustez la disposition des éléments et ajoutez des annotations pour préciser vos instructions.
- Concevez différentes interactions et prévoyez ce qui s’affiche en l’absence de contenu.
- Travaillez à plusieurs sur différentes variantes et explorez de nouvelles pistes.
Une fois l’interface affinée, reprenez les étapes décrites au début de cet article pour intégrer vos modifications à l’application via le serveur MCP.
Lorsque le code et le canevas sont reliés, vous passez facilement de l’exploration d’une idée à sa mise en œuvre, puis revenez sur la maquette pour l’affiner. C’est tout l’intérêt de ces allers-retours entre Codex et le serveur MCP de Figma : quel que soit votre point de départ, vous pouvez créer rapidement des applications utiles et soigner l’expérience des utilisateurs.
Pour en savoir plus sur le serveur MCP de Figma, consultez notre documentation. Pour commencer à l’utiliser, installez-le directement dans l’application de bureau Codex.