mac版codex提取figma颜色失败的根本原因是figma未建立variables中的color类型变量,而非插件故障;必须先在figma variables面板创建带语义化命名(如primary/500)的color变量,再刷新同步并确保node-id精准指向variables所在页面,最后在codex中重新触发提取。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

Mac版Codex在连接Figma后提取颜色失败,往往不是插件坏了,而是Figma设计稿里根本没建Color Styles或Variables,Codex只能看到一堆散落的HEX值,没法识别成“主色/错误色/背景色”这类语义化颜色——它需要结构,不是色块。
确认Figma中已建立颜色体系
打开你的Figma文件,点击左侧边栏最下方的「Variables」图标(或按 Cmd + Shift + V),检查是否已创建Design Token集合。没有Variables面板,或面板为空,Codex就无法提取语义化颜色。
如果Variables面板存在但未启用Color类型变量,请点击右上角「+ Add variable」→ 选择「Color」→ 命名为「Primary / 500」这类带层级和用途的名称,再填入HEX值。不要命名为「color1」「btn-blue」这种无意义标签。
【必须先完成这一步】 Codex的Figma MCP插件只读取Variables中定义的Color类型变量,对纯图层填充色、Style样式(Color Styles)或文本直接填色一律忽略。Color Styles不等于Variables,二者不能混用。
导出前强制刷新Figma变量索引
修改或新增Variables后,Figma不会自动广播变更给外部工具。Codex可能仍在读取旧缓存数据。
退出Figma → 打开终端 → 输入以下命令并回车:
defaults write com.figma.Desktop disableAutomaticSafeMode true
重新启动Figma,等待右下角状态栏出现「Variables synced」提示(约3–5秒),再打开Codex桌面端。
这一步跳过会导致Codex仍报“no color tokens found”,哪怕Variables面板里明明有内容。
在Codex中触发颜色提取
方法一:直接调用技能
在Codex编辑区输入指令:“从Figma页面 https://figma.com/design/abc123?node-id=123:456 中提取所有Color Variables,并生成CSS变量声明” → 按回车。
方法二:通过插件面板手动拉取
点左侧「Plugins」→ 找到「Figma MCP」→ 点击「Connect」确保已登录 → 在「Tokens」标签页下点击「Refresh Colors」按钮 → 等待加载完成,若显示“0 colors”,说明Figma端Variables未生效或URL节点ID不匹配。
注意:URL中的node-id必须精确指向包含Variables定义的Frame或Page。如果复制的是整个文件链接(不含node-id),Codex会默认读取首页,而Variables可能建在另一个隐藏页里。
修复提取后颜色命名混乱
第一步:检查Figma中Variables的命名规范
进入Variables面板 → 点击每个Color变量 → 查看其「Semantic name」字段是否填写。Codex只认这个字段,不是变量名(Name),也不是Description。
第二步:批量修正语义名
选中多个Color变量 → 右键 → 「Edit semantic names」→ 统一填入如 surface-bg、text-primary、border-divider 这类符合WCAG语义体系的名称。避免使用 btn-hover-bg-red 这类耦合实现的命名。
第三步:在Codex中重新执行提取指令,不再依赖缓存,而是强制走MCP实时读取通道。
这一步做完,Codex输出的CSS变量将自动对应 --surface-bg: #ffffff; --text-primary: #1a1a1a; 格式,无需人工映射。











