1、 下载Codex Agent 工具

2、通过自己的个人ChatGPT 账号,登录进入Codex 桌面端

3、注意:不要使用左侧插件中 Figma Skills 这种链路 来作为Codex 链接Figma MCP 服务的方式
4、mac 下 执行 open ~/.codex 找到 config.toml 进行如下配置
	[mcp_servers.figma]
	command = "npx"
	args = ["-y", "figma-developer-mcp", "--stdio"]
	[mcp_servers.figma.env]
	FIGMA_API_KEY = "figd_YFxQ8Wkg2yf4o5UHwspwgTitIAXzUH5lLDQAjOMx"

主要是这个FIGMA_API_KEY 怎么获取, 前提是登录的账号必须处于只读状态(can view)下的开发模式(就是鼠标移动上去,就会显示尺寸、样式等信息),而不仅仅是只读。你当然也可以申请编辑权限,但是公司一般都不会让你登录自己的Figma账号,只会给开发者个人只读权限(can view),你可以用公司统一Figma账号登录,⚠️ 登录的账号-必须是只读权限并且处于开发模式

如下图,这种才是处于开发模式,Figma 设计稿底下放可查看,如果仅仅是只读会显示仅查看

在这里插入图片描述

**然后点击Figma左上角帮助和账号->账户设置->安全->个人访问令牌 选择[codex-figma-mcp]生成(PAT)【Personal Access Token】,然后放到FIGMA_API_KEY中,这样重启Codex ,就可以让Codex连接到Figma MCP 服务器,从而使Codex 拿到 Figma get_design_context 上下文,调用Figma Rest API 请求获取的,他会用到token 就是你上边配置的FIGMA_API_KEY **

最后判断验证 Codex 是否连接 Figma MCP 服务器成功 直接在Codex 中进行询问即可,比如

在这里插入图片描述

以上代表着就成功了。

解析来让其尝试解析下该Figma 设计稿,右键选择

在这里插入图片描述
这个就可以生成UI了,比如让他分析下上述画面样式尺寸等信息:它很快就分析出来了。

在这里插入图片描述

Logo

openEuler 是由开放原子开源基金会孵化的全场景开源操作系统项目,面向数字基础设施四大核心场景(服务器、云计算、边缘计算、嵌入式),全面支持 ARM、x86、RISC-V、loongArch、PowerPC、SW-64 等多样性计算架构

更多推荐