☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
让设计流程更系统化！深度拆解Figma画布全新能力
一、全文概览图
二、在画布中直接执行设计任务
Figma 最新更新，真正重构了设计师在画布上的交互逻辑。
三、Remote MCP Server 的核心能力
根据官方说明，启用该服务器后，用户可实现以下操作：
- 基于实时 UI 界面生成设计方案（当前仅部分工具支持）
- 从 Figma Frame 直接输出可用代码
- 自动提取设计上下文信息（含组件结构、设计变量、布局规则等）
- 获取工程化资源（如 Makefile 等构建文件）
- 通过 Code Connect 功能，持续同步设计与开发侧变更
老三认为，其中最具突破性的能力是 Context Injection——即把完整的设计系统“注入”AI模型中（虽然隔壁的 Stitch 也在推进类似的设计系统融合方案）
需特别注意：上述功能目前暂为免费开放，但后续政策可能调整，请及时关注官方动态。
此外，使用该远程服务前，必须完成 Figma 的 OAuth 授权登录。配置完成后，即可安全调用 Figma 数据，并与各类开发工具无缝集成。
四、启用 Remote MCP Server 的完整流程
第一步：确认所用工具已支持 MCP 协议，例如：
- Claude Code
- Codex
- Cursor
- Visual Studio Code
这些工具作为 MCP Client，构成 AI 执行环境的基础载体。
官方也提供了详尽的文档支持，可供随时查阅。
第二步：配置远程服务器地址（最关键环节）
所有工具共用同一套基础配置：
ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line
{
"servers": {
"figma": {
"url": "https://mcp.figma.com/mcp",
"type": "http"
}
}
}本质即配置一个标准 HTTP 类型的远程 API 接口端点。
第三步：完成 OAuth 登录与授权
使用前，需通过 Figma 官方 OAuth 流程完成身份验证并授权访问权限。
授权成功后，客户端将显示如下提示：
Authentication successful. Connected to figma
此处有两个重点需牢记：
• MCP Server 不等于公开数据接口，所有访问均受账户权限控制
• 必须绑定你个人的 Figma 账户，不可跨账号共享
五、主流工具的具体配置方式
上文提到四款支持 MCP 的工具，下面逐一详解操作步骤：
1. Claude Code
推荐方式：安装 Figma 官方插件，内含 MCP 服务预设及高频工作流技能代理。
执行以下命令，从 Anthropic 插件市场一键安装：
ounter(line claude plugin install figma@claude-plugins-official
若需手动添加 MCP 服务，可在终端运行：
ounter(line claude mcp add --transport http figma https://mcp.figma.com/mcp
小贴士： 若希望该服务对所有项目生效，请加上 --scope user 参数：claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
可选参数为：
ounter(line --scope user
随后重启 Claude Code 实例。
进入应用后，输入 /mcp 命令管理服务器列表，选择 figma 后点击 Authenticate（身份验证）按钮 → 点击 Allow Access（允许访问）。
返回界面后，应可见提示：Authentication successful. Connected to figma
也可再次输入 /mcp 查看连接状态是否正常。
准备就绪，启动吧！
2. Codex（App / CLI 双模式）
App 版本操作流程：
① 下载并安装 Codex 应用（点击跳转）
② 左上角点击 “Skills”（技能）
③ 在技能列表中，依次点击各 Figma 技能旁的 + 按钮
④ 左下角点击 “Settings”（设置） → 进入 “MCP Servers”
⑤ 在推荐列表中，点击 “Install and Verify Figma Server”，按提示完成授权
启动提示出现，即表示配置完成！
CLI 版本操作流程：
① 安装 Codex CLI（点击跳转）
② 终端执行以下命令（按提示完成身份校验）：
codex mcp add figma --url https://mcp.figma.com/mcp
ounter(line
③ 启动提示出现，即可开始使用！
3. Cursor
推荐方式：通过内置插件系统安装 Figma 插件，已集成 MCP 配置与常用代理技能。
在 Cursor 的代理聊天窗口中输入以下指令安装：
ounter(line /add-plugin figma
该插件包含三大能力模块：
- Figma MCP 服务的标准配置项
- 支持设计生成、Code Connect 组件联动、设计系统规则创建等技能
- 内置适配 Figma MCP 资产处理的策略规则
如需手动配置，步骤如下：
① 打开 MCP 配置页
② 点击 Install
③ 点击 Connect
④ 点击 Open
⑤ 完成授权，点击 Allow Access
启动提示弹出，即表示接入成功！
4. VS Code
① 使用快捷键 ⌘+Shift+P（Mac）或 Ctrl+Shift+P（Win/Linux），然后：
→ 选择 MCP: Open User Configuration（全局启用 Figma MCP）
→ 或选择 MCP: Open Workspace Folder MCP Configuration（仅限当前工作区）
若配置文件不存在，系统将提示新建 mcp.json，请确认创建。
② 在 mcp.json 文件中粘贴如下内容：（没错，和前面一致）
ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line
{
"inputs": [],
"servers": {
"figma": {
"url": "https://mcp.figma.com/mcp",
"type": "http"
}
}
}③ 点击服务器名称上方的 Start 按钮
④ 在弹窗中点击 Allow Access 完成授权
启动提示出现，即表示一切就绪！
六、Remote MCP Server 的实战应用指南（设计师 & 开发者双视角）
Remote MCP Server 让 AI 能在你的本地开发环境中，直接读取 Figma 文件结构与设计系统规范。相比传统截图识别或人工描述方式（以 MasterGo 为例，虽已支持 MCP，但在实际落地中仍存在诸多限制，常需依赖截图解析），MCP Server 提供的是结构化、语义化的原始设计数据，确保 AI 准确理解真实设计意图。
1. 基于链接提取设计上下文
- 复制任意 Figma 文件或节点 URL
- 在 MCP Client 工具中粘贴该链接
- AI 自动解析文件层级：Frame 结构、组件定义、布局约束、设计变量、Tokens 规范
- 输出可用于生成、优化或分析的标准化上下文数据
2. 基于选区触发智能操作
- 在 Figma 中选中某个 Frame 或组件实例
- 在 MCP 工具中引用该选区作为上下文源
- AI 将围绕该局部区域执行生成、修改或格式转换等任务
适合快速迭代局部设计，显著提升效率，同时规避全量文件解析带来的性能损耗
3. 设计系统优先策略
- MCP Server 自动识别组件库、Design Tokens、变量集等系统资产
- AI 所有输出严格遵循现有设计规范与约束条件
- 杜绝脱离系统规范的“自由发挥”，保障产出一致性与可维护性
七、它的真正价值在哪里？
老三认为，Remote MCP Server 的核心价值，应回归到设计师每日真实工作场景中去理解：
首先，AI 可直接读取并理解完整的设计系统，从而生成高保真、可复用的代码或 UI 片段——这意味着设计与开发之间真正形成闭环。
对老三当前的工作流而言，不再需要反复复制样式属性、也不必截图上传再解释需求，大幅减少重复性劳动；更重要的是，所有产出天然符合已有组件库与设计语言，从根本上保障一致性。
最直观的变化是：Figma 正在成为真正的多工具中枢，就像当年大家熟悉的 Pencil 一样，如今技术上已可实现平滑替代，甚至更进一步——笑着告别吧 ?
技术和工具的本质，永远是服务于人。所以无需焦虑，找到最适合自己的那一套组合，熟练掌握它、自然融入日常流程，就是最好的生产力升级。
我是老三，愿这份设计情报为你带来切实帮助。
