Dès aujourd’hui, vous pouvez générer des fichiers de design Figma depuis Codex à l’aide du serveur MCP de Figma. Ce serveur est conçu pour fonctionner dans les deux sens : importer une interface fonctionnelle dans le canevas Figma, puis la reconvertir en code tout aussi facilement. Vous pouvez ainsi développer vos meilleures idées, sans vous limiter à la première.
L’application de bureau Codex est spécialement conçue pour la programmation agentique. Son interface dédiée permet de gérer plusieurs agents en parallèle sur différents projets, de suivre leur progression sans perdre le contexte et d’intégrer des outils externes. Cette fluidité a un air familier : dans Figma, les équipes travaillent avec la même aisance. Le canevas est conçu pour explorer et itérer. C’est un espace où les meilleures idées peuvent prendre forme. En reliant le canevas Figma à Codex, cet esprit d’exploration s’étend directement au workflow de développement et offre aux utilisateurs une nouvelle façon de créer, aux possibilités étendues, aussi bien des prototypes que des applications de production.
Créer une application à partir d’un design
L’un des principaux cas d’utilisation du serveur MCP de Figma consiste à récupérer du contexte dans les fichiers Figma pour l’utiliser lors de la génération de code. Le serveur MCP de Figma peut extraire des informations de fichiers Figma Design, Make et FigJam, puis les transmettre à Codex au cours du développement.
Pour commencer, ouvrez le fichier Figma à partir duquel vous souhaitez créer votre application. Faites un clic droit sur un cadre, puis sélectionnez « Copier en tant que » et « Copier le lien vers la sélection ».
Ces URL de sélection renvoient directement à un cadre ou à un nœud du canevas Figma. La sélection peut être un élément unique ou un ensemble de composants : dans tous les cas, elle fournit les données sources qu’un agent utilisera pour générer du code. Les sélections peuvent provenir de fichiers Figma Design, Make ou FigJam. Une fois l’URL obtenue, ouvrez Codex et sélectionnez un nouveau projet ou un projet existant. Vous pouvez alors donner des instructions à Codex avec un prompt comme celui-ci :
help me implement this Figma design in code, use my existing design system components as much as possible.Ce type de prompt demande à l’agent d’appeler l’outil get_design_context du serveur MCP de Figma. Cet outil permet d’extraire des fichiers Figma les informations essentielles du design, comme les mises en page, les styles et les données sur les composants, puis de fournir ce contexte à Codex pour la génération de code.
Outre l’extraction d’informations de design, le serveur MCP de Figma propose plusieurs autres outils utiles. Pour en connaître la liste complète, consultez notre documentation.
Du code au canevas
Après plusieurs itérations dans le code, vous souhaiterez réimporter votre design dans le canevas pour comparer les parcours, explorer d’autres possibilités et valider vos hypothèses. Le serveur MCP de Figma facilite le retour de ces écrans dans Figma, sans avoir à les recréer manuellement à partir du navigateur. Avec l’outil generate_figma_design, vous pouvez transformer en quelques secondes une interface en cours d’exécution en cadres Figma entièrement modifiables. Vous retrouvez ainsi une interface réelle et fonctionnelle directement dans le canevas, pour approfondir vos explorations et collaborer.
Commencez par afficher l’interface de votre application, soit en local, soit via un serveur web accessible au public. Demandez ensuite à Codex de vous aider à générer un nouveau fichier de design Figma.
Codex vous guidera ensuite à travers les étapes suivantes :
- Choisissez de créer un nouveau fichier Figma ou d’utiliser un fichier existant.
- Choisissez l’espace de travail dans lequel placer le fichier.
- Configurez l’application pour capturer son interface.
- Ouvrez votre application dans une nouvelle session de navigateur.
Lorsque l’application se recharge, une nouvelle barre d’outils apparaît en haut de la page avec les options suivantes :
Écran entier : Capturez le rendu de l’intégralité de l’écran actuellement affiché et envoyez-le dans le fichier Figma.
Sélectionner un élément : Choisissez un composant ou un élément précis de la page à capturer
Ouvrir le fichier : Ouvrez le fichier Figma pour examiner les nouveaux calques de votre design
Après avoir capturé toutes les informations que vous souhaitez transférer dans Figma, vous pouvez ouvrir le fichier ou revenir dans Codex. Vous y trouverez l’URL du fichier Figma.
Un aller-retour, une histoire de MCP
Maintenant que vous avez créé votre application et préparé votre fichier de design, vous pouvez procéder par itérations. Profitez de toutes les possibilités du canevas Figma, notamment :
- L’ajout de composants du design system
- Le remplacement des styles, polices et couleurs par des variables
- L’ajustement des mises en page et l’ajout d’instructions sous forme d’annotations
- La création de différentes interactions et d’états vides
- La collaboration autour de plusieurs variantes et pistes d’exploration
Une fois l’interface affinée, vous pouvez suivre les étapes décrites au début de cet article pour réintégrer ces modifications dans votre application via le serveur MCP.
Lorsque le code et le canevas sont reliés, vous pouvez passer avec fluidité de la réalisation à l’exploration. Ces allers-retours révèlent tout le potentiel du serveur MCP de Figma associé à Codex : partir de n’importe quel point pour créer des expériences applicatives pertinentes et de grande qualité, sans sacrifier la rapidité.
Pour en savoir plus sur le serveur MCP de Figma, consultez notre documentation ou lancez-vous en installant le serveur MCP de Figma directement dans l’application de bureau Codex.