Codex et Figma : partir d’une maquette précise
Montrez l’écran que vous voulez réaliser. Une référence précise donne à Codex les couleurs, l’organisation et les éléments à reprendre.
Donnez un écran de référence
Figma sert à dessiner les écrans d’un site ou d’une application. Yarden Katz explique, sur le blog OpenAI Developers, comment transmettre une sélection Figma à Codex, puis retravailler le résultat. Cette méthode utilise la connexion Figma prévue pour Codex.
Comment essayer
Choisissez l’écran à réaliser
Dans Figma, sélectionnez le cadre voulu et copiez le lien vers cette sélection.
Donnez le lien et vos contraintes
Avec la connexion Figma configurée, demandez à Codex de réaliser cet écran dans votre projet, en réutilisant ses éléments existants.
Ouvrez le résultat et ajustez
Comparez l’écran réalisé à la maquette. Précisez les changements souhaités avant de poursuivre.
Votre point de départ
Remplacez les éléments entre crochets par votre situation.
Réalise cet écran [lien de sélection Figma] dans [projet]. Réutilise les éléments existants. Vérifie le résultat sur ordinateur et mobile, puis indique les différences avec la maquette.
D’où vient ce conseil ?
Reformulation en français par Opecla. Les exemples sont rédigés pour vous aider à essayer.
- Building frontend UIs with Codex and Figma — OpenAI Developers ↗
Yarden Katz (Figma) · source publiée le 26 février 2026 · consultée le 1 octobre 2026
Pour continuer
Codex : garder des consignes utiles et à jour
Une longue liste d’anciennes consignes peut compliquer le travail. Précisez le but, les limites et les vérifications qui comptent.
Source : Eric Provencher