将Figma画布接入Codex/CC

最近，你可能看到设计师使用AI工具生成UI、构建组件，甚至直接在Figma中创建完整的设计系统。

这不仅仅是另一个生产力技巧。 这是设计工作发生方式的根本性转变。

我们正在从：手动创建组件转变为 → AI代理主动在画布上设计。

通过正确的设置，AI可以：

• 自动生成组件
• 构建和结构化设计系统
• 读取现有布局并改进它们
• 甚至直接将设计转化为可工作的代码

所有这些之所以可能，是因为设计栈中的一个新层：MCP（模型上下文协议）。

1、这实际是如何工作的

在核心上，这个工作流依赖于两个关键概念：

1.1 工具调用（AI如何采取行动）

AI模型不仅仅生成文本——它们可以通过工具采取行动。

例如：

• 模型问："选择了什么组件？"
• 它从Figma接收数据
• 然后决定："更新这个布局"或"创建一个新组件"

这个循环持续到任务完成。

简单来说：AI不只是思考——它行动。

1.2 MCP服务器（与Figma的桥梁）

第二部分是MCP服务器。

把它想象成一座桥梁，允许AI：

• 访问Figma文件
• 读取布局和组件数据
• 执行创建或编辑设计等操作

没有MCP，AI只能看到设计（像截图一样）。 有了MCP，它可以理解和操作设计文件的实际结构。

2、设置Codex + Figma MCP：你的AI设计栈

要让AI代理直接在Figma画布上设计，你需要连接三个部分：

• Codex（AI代理） → 进行思考
• MCP服务器（桥梁） → 启用通信
• Figma（画布） → 设计发生的地方

连接后，这个设置允许AI直接在设计文件中读取和写入。

如果你更喜欢使用Claude而不是Codex，你可以在本文末尾找到逐步的Claude设置指南。

2.1 设置Codex（你的AI代理）

首先设置你的AI环境。

你可以使用以下工具：

• Codex（通过ChatGPT或CLI）
• Claude Code / Cursor / VS Code（任何支持代理的编辑器）

1. 下载Codex桌面版（https://openai.com/codex/）
2. 安装并用你的OpenAI账户登录
3. 打开一个工作项目或空工作区

在这个阶段，你的AI已经可以：

• 生成代码
• 理解UI结构
• 执行命令

但它还不能访问Figma——这就是MCP的用武之地。

2.2 安装Figma Console MCP（桥梁）

这是连接AI到Figma的关键层。

MCP不仅仅是分析截图，它允许AI：

• 读取实际的设计层
• 访问组件和token
• 在画布上执行真正的操作

添加MCP服务器

转到你的编辑器设置并添加一个新的MCP服务器：

名称: figma-console-mcp
启动命令: npx
参数: -y figma-console-mcp@latest

环境变量: FIGMA_ACCESS_TOKEN = your_token_here
ENABLE_MCP_APPS = true

生成Figma访问令牌：

1. 打开Figma
2. 转到设置 → 安全
3. 点击生成新令牌
4. 复制并保存它（你将无法再次看到它）
5. 将其粘贴到环境变量（your_token_here）中并保存

确保清楚地命名令牌，最好命名为相同的名称（figma-console-mcp），以便以后容易识别。根据你的使用情况设置适当的过期日期，检查所有权限，然后点击生成。

此令牌允许AI安全地访问你的Figma文件。

重启你的环境

保存后：

• 重启你的编辑器
• 确保MCP服务器正在运行

你现在已创建了AI和Figma之间的桥梁。

2.3 将MCP连接到Figma

现在你需要将MCP服务器连接到你的实际Figma画布。

这是通过导入Figma Console MCP插件来完成的，该插件允许Figma与你的AI代理通信。

为什么这一步很重要

由于我们使用npx，插件不会永久安装在你的系统上。 它从临时文件运行，因此我们需要手动将Figma指向它。

把这一步想象成将Figma链接到MCP桥梁。

前提条件：安装Node.js（npx所需）

要运行MCP脚本，你需要安装Node.js。

检查是否安装了Node：

打开终端并运行：

node -v

如果你看到版本号（例如v18.x.x），就可以了。 如果没有，安装Node.js。

• 前往：https://nodejs.org
• 下载LTS版本（推荐）
• 安装并重启终端

然后再次验证：

node -v
npx -v

你现在应该能够运行npx命令。

生成插件路径

TJ（Figma Console MCP的创建者）提供了一个帮助定位插件的脚本。

要做什么：

1. 打开终端
2. 粘贴提供的脚本（我会在下面包含它）
3. 运行它

npx figma-console-mcp@latest --print-path

• 脚本输出一个文件路径
• 这个路径指向一个manifest.json文件
• 这个文件是Figma用来加载插件的

复制这个路径——你将在下一步需要它

将插件导入Figma

现在切换到Figma并导入插件。

步骤：

1. 打开你的Figma文件
2. 前往：插件 → 开发 → 从manifest导入插件
3. 粘贴manifest.json文件的现有文件夹路径

运行插件

导入后：

1. 从你的插件菜单中选择插件
2. 点击运行

就是这样🎉 Figma现在已连接到你的MCP服务器。

2.4 验证连接

回到你的AI编辑器并运行：

check bridge status

如果一切正常，你会看到：

• MCP服务器已连接
• Figma桥梁已激活

在这一点上：你的AI代理现在可以与Figma对话了。

3、可选：设置Claude（Codex的替代方案）

如果你更喜欢使用Claude Code，集成方式非常相似。

关键区别：Claude更直接地连接到Figma MCP服务器（本地或远程），而不是使用自定义MCP设置。

3.1 安装Claude Code

首先，在终端中使用以下代码全局安装Claude Code：

npm install -g @anthropic-ai/claude-code

确保Node.js已安装（与之前相同）。

3.2 在Figma中启用MCP服务器

1. 打开Figma桌面应用
2. 打开任何设计文件
3. 切换到开发模式，在右侧边栏点击启用开发模式MCP服务器

一旦启用，服务器在本地运行在：

http://127.0.0.1:3845/sse

这是Claude和Figma之间的桥梁端点。

3.3 将Claude连接到Figma MCP

现在将Claude连接到MCP服务器：

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

3.4 验证连接

运行：

claude mcp list

你应该看到：figma-dev-mode-mcp-server被列出

这意味着Claude已成功连接到Figma。

3.5 开始将Claude与Figma一起使用

MCP连接验证后，你现在可以开始将Claude与Figma一起使用了。

在终端中打开Claude

在终端中，简单地运行：

claude

这将启动Claude CLI。

选择文本样式后，系统会询问你如何登录。

你通常会看到以下选项：

• Claude账户（订阅）
• Anthropic控制台账户（API密钥）
• 第三方平台

你应该选择什么

👉 选择：Anthropic控制台账户

为什么：

• MCP + Figma集成所需
• 与Claude Code（CLI）一起工作
• 使用API密钥进行代理工作流

不要选择：Claude账户（订阅）仅适用于Web应用（claude.ai） 不支持MCP或Figma集成

选择Anthropic控制台账户后，Claude会提示你使用API密钥连接。

创建你的API密钥

1. 前往Anthropic控制台
2. 导航到API密钥
3. 点击创建密钥
4. 复制密钥（你将无法再次看到它）

在终端中粘贴API密钥

回到你的终端（Claude CLI）：

• 提示时粘贴API密钥
• 按Enter

Claude现在将验证你的会话。

确认设置

成功后：

• Claude CLI将初始化
• 你会看到命令界面已准备好

在这一点上：Claude现在已准备好充当你的AI代理。

你刚刚解锁了什么

有了这个设置，你的AI现在可以：

• 读取选定的框架和组件
• 分析布局和间距
• 直接在Figma中生成UI
• 修改现有设计
• 开始构建设计系统

这是工作流从：

"手动设计" 转变为 "指导AI为你设计" 的时刻

原文链接: From AI Agents to Figma Canvas: Setting Up Your AI Design Workflow

汇智网翻译整理，转载请标明出处