Auparavant, faire un produit était le plus facile à coincer à deux endroits :
Ne pas concevoir, faire comme un produit semi-fini ; ne pas développer, le projet de conception ne peut que rester pour toujours dans Figma.
Maintenant, le processus de connexion du Codex et de Figma devient :
Idées → Peignage des besoins → Génération ou modification du design → Développement de pages réelles → Validation par navigateur → Retour à Figma pour continuer à peaufiner
Le MCP de Figma prend en charge la collaboration bidirectionnelle : Codex peut lire les composants, les variables, les layouts et les matériaux de Figma, et peut capturer les pages Web en cours d'exécution en couches Figma modifiables ; avec les autorisations appropriées, il peut également créer ou modifier directement le contenu natif de Figma.
1 ️️ Quelle est la répartition du travail entre Codex et Figma ?
Beaucoup de gens pensent que :
Le Codex est responsable du code, Figma est responsable du dessin.
En fait, leur division du travail ressemble plus à cela.
Codex : analyse des besoins + exécution du développement
Cela peut vous aider à :
-
Trouver des idées vagues
-
Lire le PRD et le code du projet
-
Analyse de la structure de la page
-
Écrire et modifier le code front-end
-
Exécuter Build & Test
-
Continuer à adapter en fonction du feedback de conception
-
Vérifiez les changements finaux
Figma : Espace de travail de conception et de révision
Elle porte principalement :
-
Structure de page
-
Composants et variants
-
Couleurs, polices et variables d'espacement
-
Layout automatique
-
Description interactive
-
Revue du produit et commentaires
-
Plusieurs conceptions
Ce qui relie les deux est Figma MCP。
Il convertit le cadre Figma sélectionné, les composants, les variables, la mise en page et le matériel en un contexte structuré, qui est ensuite remis à la compréhension et à la mise en œuvre du Codex. Notez que le MCP lui-même ne génère pas le code final pour vous ; c'est toujours le Codex qui est vraiment responsable de l'adaptation du dépôt de code, de la réutilisation des composants et du développement complet.
2 ️ à️ Avant de commencer, vérifiez le numéro de compte et les autorisations
Vous devez être prêt :
1 ChatGPT Desktop Codex Workspace, ou Codex CLI 2 Un compte Figma 3 Un projet pratique simple 4 Git pour enregistrer et revenir en arrière du code 5 Exigences explicites, PRD ou matériel de référence
Actuellement, le MCP à distance Figma est disponible sur différents forfaits et sièges, mais avec des quotas d'appel différents. Les utilisateurs Starter ainsi que les sièges View, Collab dans les équipes payantes, les outils de classe de lecture n'ont généralement qu ' un petit nombre de quotas d'appel par mois ; les sièges Full et Dev sont plus élevés.
Il faut également distinguer deux fonctions importantes :
-
Lire le designLes sièges Dev, Full, etc. peuvent être utilisés en fonction des droits.
-
Écrire sur Canvas, modifier directement le canvas Figma: Requiert un siège complet et des autorisations d'édition sur le fichier cible.
Write to Canvas est toujours en version bêta, et Figma a déclaré qu 'il n'y avait pas de frais supplémentaires pour le moment, mais prévoyait de facturer à l'avenir à la base de l'utilisation.
3 ️ à️ Étape 1 : Installer le Codex
Les utilisateurs qui ont déjà installé peuvent simplement sauter.
MacOS ou Linux
Windows PowerShell
Vous pouvez également utiliser npm :
Installer npm - g
MacOS peut également être installé via Homebrew :
Installation de cask codex
Vérification post-installation :
Codex - Version
Démarrer la CLI :
Codex
Toutes ces commandes proviennent du référentiel officiel du Codex d'OpenAI.
En juillet 2026, l'expérience de bureau Codex d'origine a été intégrée dans l'application de bureau ChatGPT, les projets, les paramètres et les flux de travail Codex restent.
4 ️ à️ Étape 2 : Connectez Figma au Codex
Dans la nouvelle version actuelle du bureau de ChatGPT, vous pouvez généralement accéder :
Paramètres → Plugins → Figma → Installation
Une fois que vous avez terminé la connexion et l'autorisation Figma, vous pouvez l'appeler dans l'espace de travail Codex.
Certaines versions ou la page d'aide de Figma affichent toujours les entrées suivantes :
En haut à gauche Plugins → + à côté de Figma → Installer Figma → Autoriser l'accès
C'est parce que l'emplacement de la gestion des plugins a été ajusté après que Codex a été intégré dans le bureau de ChatGPT en juillet, et l'interface réelle peut varier selon la version.
Vérifiez si la connexion a réussi
Ouvrez un fichier Figma auquel vous avez accès :
Sélectionnez Frame → Bouton droit → Copiez le lien à la sélection → Envoyer le lien à Codex
Ensuite, entrez :
Marqueur
请通过 Figma MCP 读取这个设计节点。
暂时不要写代码，请告诉我：
1. 页面包含哪些模块
2. 使用了哪些颜色、字体和间距
3. 有哪些组件和变量
4. 哪些内容适合复用项目已有组件
5. 是否提供了移动端设计
无法确认的内容请明确标记，不要自行猜测。Le MCP Figma à distance fonctionne sur la base de liens qui doivent essayer de pointer vers le cadre, le composant ou la variante exacte, plutôt que de fournir uniquement l'adresse de la page d'accueil du fichier entier.
5 ️ à️ Pratique 1 : Créer un site Web à partir d'une idée
Vous pouvez entrer :
Aidez-moi à créer un site Web officiel pour animaux de compagnie.
Mais cela ne peut être utilisé que pour lancer la discussion et ne peut pas entrer directement dans le développement.
Une approche plus sûre consiste à laisser Codex vous poser des questions comme un chef de produit.
Copier directement le message
Marqueur
我想制作一个宠物用品品牌官网，但需求还不完整。
先不要设计，也不要写代码。
请向我提问，帮助我明确：
1. 目标用户是谁
2. 核心产品是什么
3. 用户进入网站后的主要目标
4. 首页需要哪些模块
5. 是否需要商品详情、购物车或支付
6. 品牌风格与参考方向
7. 手机端有哪些重点
8. 第一版必须完成什么
9. 第一版暂时不做什么
10. 最终验收标准是什么
每轮最多问5个问题。
信息不足时继续提问，不要自行编造。
确认完成后，输出：
- 产品定位
- 页面结构
- 用户流程
- 内容清单
- 设计需求
- 开发计划Une phrase peut démarrer le projet, mais ce qui décide de la direction est toujours la question, la confirmation et le compromis ultérieurs.
6 ️ à️ Laissez Codex générer des conceptions initiales dans Figma
Demandé directement dans le post original :
Créez la page d'accueil dans un nouveau fichier Figma.
Ce n'est pas assez stable.
La façon la plus appropriée pour le petit blanc est :
-
Créer un nouveau fichier de conception vide dans Figma ;
-
Confirmer que vous avez les droits d'édition ;
-
Copier les liens de fichiers ;
-
et laisser le Codex écrire sur la toile.
Marqueur
请使用 Figma MCP，在下面这个空白文件中创建首页设计：
【粘贴Figma文件链接】
要求：
1. 使用Figma原生图层
2. 使用Auto Layout
3. 建立清晰的页面层级
4. 建立颜色、字体和间距变量
5. 包含桌面端与手机端页面
6. 图片位置先使用占位区域
7. 不编造Logo和品牌素材
8. 不增加尚未确认的功能Écrire sur la toile permet de créer des cadres, des composants, des variables et des mises en page automatiques, mais nécessite que l'utilisateur dispose d'un siège complet et d'autorisations d'édition de fichiers. Après la génération, il est toujours nécessaire de vérifier manuellement dans Figma, plutôt que de traiter la sortie de l'IA directement comme la conception finale.
S'il n'y a pas de siège complet, vous pouvez d'abord obtenir la sortie de Codex :
-
Structure de page
-
Liste des composants
-
Spécification de design
-
Description du Wireframe
Ensuite, vous pouvez le construire manuellement dans Figma ou le lire et le développer en utilisant un projet existant.
7 ️ à️ Exercice 2 : Transformer le design de Figma en une page Web réelle
Après la confirmation de la conception, sélectionnez le cadre à développer et donnez le lien au Codex :
Marqueur
请根据这个Figma Frame实现当前项目中的首页。
【设计要求】
1. 遵循布局、间距、颜色和字体层级
2. 优先复用项目已有组件和变量
3. 不创建重复的组件系统
4. 使用Figma提供的真实图片和图标
5. 同时适配桌面端与手机端
【工程要求】
1. 先检查项目技术栈
2. 先输出实现计划
3. 不安装没有必要的依赖
4. 不修改无关文件
5. 不添加设计稿中没有的业务功能
【验证要求】
1. 运行已有构建和测试
2. 检查文字溢出与横向滚动
3. 检查按钮、链接和交互
4. 对比页面与Figma参考
5. 输出修改文件及验证结果
无法实际验证的项目必须标记为“未验证”。Les autorités recommandent que le Codex obtienne d'abord le contexte de conception et les captures d'écran des nœuds précis, puis réutilise les composants, les jetons, le routage et les modèles de données existants de l'entrepôt de code, plutôt que de copier directement l'exemple de structure retournée par le MCP.
Plus le fichier Figma est canonique, plus l'effet produit pour la première fois est généralement stable :
-
Utilisez le Auto Layout
-
Les composants ne doivent pas être séparés
-
Layer nom clair
-
Utiliser des variables ou des jetons de conception
-
Préserver les images et les icônes réelles
-
Définir les statuts du bureau et du mobile
8 ️ à️ Pratique 3 : Transformer les captures d'écran en produits originaux
Voyez la page que vous aimez, téléchargez une capture d'écran pour que Codex l'analyse, mais ne laissez pas copier directement.
La logique métier et les règles d'interaction qui ne sont pas visibles dans la capture d'écran, vous devez me poser des questions d'abord, ne les inventez pas vous-même.
Marqueur
请分析我提供的网页截图。
不要逐像素复刻，也不要复制原网站的：
- Logo
- 品牌名称
- 文案
- 插画
- 产品图片
- 具有明显识别度的视觉资产
请只提取：
1. 信息层级
2. 页面模块
3. 配色逻辑
4. 字体层级
5. 卡片和按钮风格
6. 留白与间距
7. 图片使用方式
再结合我的产品需求，生成一套原创设计。Les captures d'écran ne fournissent que des informations visuelles et ne peuvent pas dire à l'IA :
-
Que se passe-t - il après avoir cliqué sur le bouton
-
Comment vérifier le formulaire
-
Où les données sont obtenues
-
Comment les droits de login sont contrôlés
-
Comment développer le menu du téléphone
-
Comment les échecs et les états vides sont affichés
9 ️️ Pratique 4 : Transformer le PRD en prototype révisable
Après avoir remis le PRD au Codex, ne lui demandez pas immédiatement de générer des pages.
Laissez-le d'abord trouver les lacunes dans les besoins :
Marqueur
请读取这份产品需求文档。
第一阶段只做需求分析，不要生成设计和代码。
请整理：
1. 用户角色
2. 每个角色能够执行的操作
3. 所需页面
4. 页面核心任务
5. 正常流程
6. 异常流程
7. 空状态和错误状态
8. 权限边界
9. 矛盾或模糊描述
10. 必须由我补充的问题
等待我确认后，再制作产品原型。Après avoir confirmé les besoins, laissez Codex créer la page ou un organigramme FigJam via Figma MCP.
Lorsque vous utilisez Écrire sur la toile, vous avez toujours besoin d'un siège complet et d'autorisations d'édition ; le siège Développement est plus approprié pour lire le contexte de conception que pour modifier directement la toile.
🔟 Retourner les pages Web en cours d'exécution à Figma
C'est l'une des capacités les plus précieuses de Codex + Figma.
Le processus traditionnel est :
Figma Design → Développement et mise en œuvre → Draft de conception est progressivement expiré
Une boucle fermée peut maintenant être formée :
Conception de Figma → Développement du Codex → Exécution du navigateur → Capture de retour Figma → Révision et ajustement → Réimplémentation du Codex
On peut dire du Codex :
Veuillez démarrer le serveur de développement local pour le projet en cours. Capturez la page d'accueil actuelle dans un nouveau fichier Figma Design en utilisant la capacité Code to Canvas de Figma MCP. Ne remplacez pas le projet original. Après avoir terminé la capture initiale, dites-moi comment continuer à capturer d'autres états de page.
Code to Canvas convertit une page en cours d'exécution dans un navigateur en un cadre Figma modifiable. L'état actuel est automatiquement capturé lorsque vous ouvrez le navigateur pour la première fois ; d'autres pages, pop-ups ou états d'erreur, vous obligent généralement à manipuler la page, puis à utiliser « Écran entier » ou « Sélectionner un élément » dans la barre d'outils pour continuer la capture.
Vous pouvez utiliser différents sièges pour créer ou modifier vos propres fichiers de capture dans les brouillons ; pour écrire sur des fichiers existants en dehors des brouillons, vous avez besoin d'un siège complet et d'autorisations d'édition.
1 à 21 à 2 Faites des applications et des banques de données, ajoutez également des frontières
Codex + Figma est idéal pour la production de :
-
To-do outils
-
Habitude de punch card
-
Comptabilité simple
-
Données Kanban
-
Produit Landing Page
-
Prototypes opérationnels
-
App Web léger
Mais « créer une page » ne signifie pas « terminer une application mature ».
Les applications mobiles peuvent toujours nécessiter :
-
Xcode ou SDK Android
-
Signature et certificat
-
Service back-end
-
Login et permissions
-
Notification push
-
Politique de confidentialité
-
App Store Audit
-
Maintenance longue durée
Le Kanban de données a également besoin d'une personne pour confirmer :
-
Interface de données
-
Indicateur de calibre
-
Droits utilisateur
-
Isolation des données
-
Paging et performance
-
Traitement des données sensibles
1 à 22 à Ne déployez pas directement après avoir terminé
En conclusion, nous remettons le paragraphe suivant au Codex :
Marqueur
请对当前项目执行发布前检查。
先列出项目中真实存在的：
- build
- lint
- test
- 浏览器测试
- 部署脚本
然后执行可以安全运行的检查。
检查内容：
1. 构建是否成功
2. 是否存在终端或控制台错误
3. 是否存在横向滚动
4. 图片是否加载失败
5. 按钮和链接是否有效
6. 表单是否提供错误提示
7. 是否存在测试文案和占位数据
8. 是否泄露API Key或敏感信息
9. 页面是否符合Figma设计
10. 是否存在明显无障碍问题
不能实际验证的项目标记为“未验证”，
不要写成“已通过”。
不要执行正式部署、购买域名或创建付费资源。Le processus de recommandation officiel exige également l'utilisation d'un navigateur réel contre la conception et la combinaison d'outils tels que Playwright pour vérifier l'apparence et l'interaction de la page, plutôt que de lire simplement le code et de déclarer terminé.
La génération de code signifie seulement que le projet a une première version ; la validation signifie qu 'il commence à se rapprocher du produit.
Résumé final
La bonne façon d'ouvrir le Codex + Figma n'est pas :
Une phrase → Conception automatique → Développement automatique → Lancement automatique
Mais plutôt :
1Codex demande, définit les exigences 2Figma héberge la conception éditable 3Vérification manuelle des pages et des processus 4Codex implémenté du code réel 5Vérification du navigateur et des outils de test 6Envoyer les implémentations à Figma pour examen 7Vérification avant déploiement en ligne
Dans le passé, les gens qui ne seraient pas conçus sont coincés dans Figma, et les gens qui ne seraient pas programmés sont coincés dans le code.
Aujourd ' hui, Codex + Figma abaisse en effet le seuil de l'idée au prototype et à la page exploitable.
Mais il réduit les coûts de réalisation, pas les coûts de réflexion.
En fin de compte, ce qui détermine vraiment la valeur du produit est toujours :
-
Quel problème avez-vous résolu ?
-
qui veut utiliser
-
Les besoins sont clairs ?
-
Les données sont fiables
-
Le code est-il validé
-
Voulez-vous continuer à itérer ?