In the past, making a product was easiest to get stuck in two places:
If you can't design, you will make it like a semi-finished product; if you can't develop, the design draft will only lie in Figma forever.
Now the process of connecting Codex and Figma is becoming:
Ideas → Sort out requirements → Generate or modify designs → Develop real pages → Browser verification → Go back to Figma to continue adjusting
Figma MCP already supports two-way collaboration: Codex can read components, variables, layouts, and materials in Figma, and can also capture running web pages into editable Figma layers; when you have the appropriate permissions, you can also directly create or modify Figma native content.
1️⃣ How do Codex and Figma divide the labor?
Many people think:
Codex handles the code and Figma handles the drawing.
In fact, their division of labor is more like this.
Codex: Requirements Analysis + Development Execution
It can help you:
-
Sort out vague thoughts
-
Read the PRD and project code
-
Analyze page structure
-
Write and modify front-end code
-
Run Build and Test
-
Continue to adjust based on design feedback
-
Check for final changes
Figma: Design and Review Workspace
It mainly carries:
-
page structure
-
Components and variants
-
Color, font, and spacing variables
-
automatic layout
-
interactive explanation
-
Product reviews and reviews
-
multiple design schemes
Connecting the two is Figma MCP。
It converts the selected Figma Frame, components, variables, layout, and materials into a structured context, which is then handed over to Codex to understand and implement. Note that MCP itself will not generate the final code for you; it is still Codex that is really responsible for adapting the code warehouse, reusing components, and completing development.
2️⃣ Before starting, confirm your account and permissions first
You need to prepare:
① Codex workspace on the ChatGPT desktop, or Codex CLI ② A Figma account ③ A simple practice project ④ Git to save and roll back code ③ Clear requirements, PRD, or reference materials
Currently, remote Figma MCP can be used on different packages and seats, but the call amount is different. For Starter users and View and Collab seats in paid teams, reading tools usually only have a small amount of monthly calls;Full and Dev seats have a higher amount.
There are also two important functions to distinguish:
-
Read design information: Dev, Full and other seats can be used based on permissions.
-
Write to Canvas, directly modify the Figma canvas: Requires a Full seat and has editing rights for the target file.
Write to Canvas is still in Beta. Figma said there is no additional charge for now, but plans to change to billing based on usage in the future.
3️⃣ Step 1: Install Codex
Users who have already installed it can directly skip it.
macOS or Linux
Windows PowerShell
You can also use npm:
npm install -g
macOS can also be installed through Homebrew:
brew install –cask codex
Post-installation inspection:
codex –version
Launch CLI:
codex
These commands are all from OpenAI's current official Codex repository.
As of July 2026, the original Codex desktop experience has been integrated into the ChatGPT desktop application, and Codex projects, settings and workflows remain.
4️⃣ Step 2: Connect Figma to Codex
On the current new version of ChatGPT desktop, you can generally enter:
Settings → Plugins → Figma → Install
After Figma login and authorization are completed, it can be called in the Codex workspace.
Some versions or the Figma help page still display the following entry:
Plugins → + next to Figma → Install Figma → Allow access
This is because after Codex was integrated into the ChatGPT desktop in July, the plug-in management location has been adjusted, and the actual interface may vary with the version.
Check whether the connection was successful
Open a Figma file that you have permissions to access:
Select Frame → Right click → Copy link to selection → Send the link to Codex
Then enter:
markdown
请通过 Figma MCP 读取这个设计节点。
暂时不要写代码，请告诉我：
1. 页面包含哪些模块
2. 使用了哪些颜色、字体和间距
3. 有哪些组件和变量
4. 哪些内容适合复用项目已有组件
5. 是否提供了移动端设计
无法确认的内容请明确标记，不要自行猜测。Remote Figma MCP works based on links, which should point to the exact Frame, component, or variant as much as possible, rather than just providing the home address of the entire document.
5️⃣ Practice 1: Start with an idea to build a website
You can enter:
Help me build a pet supplies website.
But this can only be used to start discussions and cannot directly enter development.
A more stable approach is to let Codex ask you back like a product manager first.
Copy this prompt directly
markdown
我想制作一个宠物用品品牌官网，但需求还不完整。
先不要设计，也不要写代码。
请向我提问，帮助我明确：
1. 目标用户是谁
2. 核心产品是什么
3. 用户进入网站后的主要目标
4. 首页需要哪些模块
5. 是否需要商品详情、购物车或支付
6. 品牌风格与参考方向
7. 手机端有哪些重点
8. 第一版必须完成什么
9. 第一版暂时不做什么
10. 最终验收标准是什么
每轮最多问5个问题。
信息不足时继续提问，不要自行编造。
确认完成后，输出：
- 产品定位
- 页面结构
- 用户流程
- 内容清单
- 设计需求
- 开发计划One sentence can start the project, but what determines the direction is still the subsequent questions, confirmations and trade-offs.
6️⃣ Let Codex generate first version designs in Figma
The original post directly requires:
Create the front page in a new Figma file.
This is not stable enough.
A more suitable way for Xiaobai is:
-
Create a new blank Design file in Figma yourself;
-
Confirm that you have editing rights;
-
Copy file links;
-
Then let Codex write to the canvas.
markdown
请使用 Figma MCP，在下面这个空白文件中创建首页设计：
【粘贴Figma文件链接】
要求：
1. 使用Figma原生图层
2. 使用Auto Layout
3. 建立清晰的页面层级
4. 建立颜色、字体和间距变量
5. 包含桌面端与手机端页面
6. 图片位置先使用占位区域
7. 不编造Logo和品牌素材
8. 不增加尚未确认的功能Write to Canvas can create frames, components, variables, and automatic layouts, but requires users to have a Full seat and file editing rights. After generation, it still needs to be manually checked in Figma, rather than treating the AI output directly as the final design.
When there is no Full seat, you can ask Codex to output first:
-
page structure
-
component manifest
-
code for design
-
Wireframe description
Then you build it manually in Figma, or use existing design drafts to read and develop it.
7️⃣ Practice 2: Turn Figma design draft into a real website
After the design is confirmed, select the Frame to be developed and hand the link to Codex:
markdown
请根据这个Figma Frame实现当前项目中的首页。
【设计要求】
1. 遵循布局、间距、颜色和字体层级
2. 优先复用项目已有组件和变量
3. 不创建重复的组件系统
4. 使用Figma提供的真实图片和图标
5. 同时适配桌面端与手机端
【工程要求】
1. 先检查项目技术栈
2. 先输出实现计划
3. 不安装没有必要的依赖
4. 不修改无关文件
5. 不添加设计稿中没有的业务功能
【验证要求】
1. 运行已有构建和测试
2. 检查文字溢出与横向滚动
3. 检查按钮、链接和交互
4. 对比页面与Figma参考
5. 输出修改文件及验证结果
无法实际验证的项目必须标记为“未验证”。The official recommendation is that Codex first obtain the accurate node design context and screenshots, and then reuse the existing components, tokens, routing, and data patterns in the code warehouse, rather than directly copying the example structure returned by MCP.
The more standardized the Figma file, the more stable the effect it will be generated for the first time:
-
Use Auto Layout as much as possible
-
Don't tear up all components
-
Layer names are clear
-
Use variables or Design Tokens
-
Keep real pictures and icons
-
Clarify desktop and mobile status
8️⃣ Practice 3: Turn screenshots into original products
When you see a page you like, you can upload a screenshot for Codex to analyze, but don't let it copy it directly.
Business logic and interaction rules that cannot be seen in the screenshots must be asked to me first and don't make them up by yourself.
markdown
请分析我提供的网页截图。
不要逐像素复刻，也不要复制原网站的：
- Logo
- 品牌名称
- 文案
- 插画
- 产品图片
- 具有明显识别度的视觉资产
请只提取：
1. 信息层级
2. 页面模块
3. 配色逻辑
4. 字体层级
5. 卡片和按钮风格
6. 留白与间距
7. 图片使用方式
再结合我的产品需求，生成一套原创设计。Screenshots can only provide visual information and cannot tell AI:
-
What happens after the button is clicked
-
How to verify the form
-
Where does the data come from?
-
How to control login permissions
-
How to expand the mobile menu
-
How to display failure and empty status
9️⃣ Practice 4: Turn PRD into a reviewable prototype
After handing the PRD to Codex, don't ask it to generate pages immediately.
Let it identify loopholes in the requirements first:
markdown
请读取这份产品需求文档。
第一阶段只做需求分析，不要生成设计和代码。
请整理：
1. 用户角色
2. 每个角色能够执行的操作
3. 所需页面
4. 页面核心任务
5. 正常流程
6. 异常流程
7. 空状态和错误状态
8. 权限边界
9. 矛盾或模糊描述
10. 必须由我补充的问题
等待我确认后，再制作产品原型。After confirming the requirements, ask Codex to create a page or a FigJam flowchart through Figma MCP.
When using Write to Canvas, the Full seat and editing permissions are still required; the Dev seat is more suitable for reading the design context than directly modifying the canvas.
🔟 Send a running web page back to Figma
This is one of Codex + Figma's most valuable capabilities.
The traditional process is:
Figma Design → Development and Implementation → Design drafts gradually expire
A closed loop can now be formed:
Figma design → Codex development → browser running → capture back Figma → review and adjustment → Codex implementation again
You can say to Codex:
Please start the local development server for the current project. Use Figma MCP's Code to Canvas capability to capture the current homepage into a new Figma Design file. Do not overwrite the original design draft. After completing the initial capture, tell me how to continue capturing the status of other pages.
Code to Canvas converts a running page in the browser into an editable Figma Frame. The current status is automatically captured when you open the browser for the first time; for other pages, pop-ups or error states, you usually need to manipulate the page and use the "Entire screen" or "Select element" in the toolbar to continue capturing.
You can use different seats to create or edit capture files in your own Drawings; to write to existing files outside of Drawings, you need a Full seat and edit permissions.
1⃣1⃣ To make apps and data kanban, boundaries must also be added
Codex + Figma is great for making:
-
To-do tool
-
Get used to checking in
-
simple bookkeeping
-
Data Kanban
-
Product landing page
-
Operation backend prototype
-
Lightweight Web App
But "making a page" does not mean "completing a mature app."
Mobile apps may still require:
-
Xcode or Android SDK
-
Signature and certificate
-
back-end services
-
login and privilege
-
push notification
-
Privacy Policy
-
App store review
-
long-term maintenance
Data Kanban also requires confirmation by people:
-
data interface
-
Indicator caliber
-
user rights
-
data isolation
-
paging and performance
-
Data Mask
1⃣2⃣ Don't deploy directly after you're done
Finally, hand the following paragraph to Codex:
markdown
请对当前项目执行发布前检查。
先列出项目中真实存在的：
- build
- lint
- test
- 浏览器测试
- 部署脚本
然后执行可以安全运行的检查。
检查内容：
1. 构建是否成功
2. 是否存在终端或控制台错误
3. 是否存在横向滚动
4. 图片是否加载失败
5. 按钮和链接是否有效
6. 表单是否提供错误提示
7. 是否存在测试文案和占位数据
8. 是否泄露API Key或敏感信息
9. 页面是否符合Figma设计
10. 是否存在明显无障碍问题
不能实际验证的项目标记为“未验证”，
不要写成“已通过”。
不要执行正式部署、购买域名或创建付费资源。The official recommendation process also requires using a real browser to compare the design, combined with tools such as Playwright to check the appearance and interaction of the page, rather than just reading the code and announcing completion.
Generating code only means that the project has a first version; verification means that it is starting to approach the product.
finally it summarizes
The correct way to open Codex + Figma is not:
One sentence → Automatic design → Automatic development → Automatic launch
Instead:
① Codex asks and clarifies the requirements ② Figma carries the editable design ③ Manual confirmation of the page and process ④ Codex realizes the real code ④ Browser and test tool Verification ④ Send the implementation results back to Figma for review ③ Confirm before deploying online
People who couldn't design in the past were stuck in Figma, and people who couldn't program were stuck in code.
Now Codex + Figma really lowers the bar from ideas to prototypes to working pages.
But it reduces implementation costs, not thinking costs.
In the end, what really determines the value of the product is still:
-
What problem did you solve?
-
Who wants to use
-
Are the needs clear?
-
Whether the data is reliable
-
Is the code verified
-
Are you willing to continue iterating