Figma MCP 是 Figma 官方给 AI 编辑器开的接口,让 VS Code、Cursor、Claude Code 这类工具能直接读你的设计稿、顺手生成代码。官方给了两条路:远程服务(mcp.figma.com/mcp)和本地桌面服务(127.0.0.1:3845/mcp)。下面按官方文档把两种模式的配置、调用和排错一次讲清。 Figma MCP 的两种接入方式
Figma 现在把 MCP 拆成两个版本,选哪个先看你的场景。
- 远程 MCP 服务(官方推荐):地址是 https://mcp.figma.com/mcp,功能最全,不用在 Figma 里手动开开关,连上去时拿 Figma 账号走一遍 OAuth 授权就行。
- 本地桌面 MCP 服务:靠 Figma 桌面客户端在本地起服务,地址 http://127.0.0.1:3845/mcp,主要给一些组织或企业的特殊场景用。
一句话区分:远程版开箱即用、能力更完整;本地版只在你这台机器上跑,数据不出本机。大多数人直接用远程版就够了。
Figma MCP 怎么配置
远程和本地两套步骤分开走,编辑器配置大同小异。
远程服务:VS Code / Cursor / Claude Code
- 先装好支持的编辑器并登录 Figma 账号;远程服务默认可用,不用进 Figma 里开。
- VS Code:按 Cmd/Ctrl + Shift + P 打开命令面板,搜「MCP: Open User Configuration」,在 mcp.json 里贴入 { "inputs": [], "servers": { "figma": { "url": "https://mcp.figma.com/mcp", "type": "http" } } },保存后点 Start 走 Figma 授权。
- Cursor:进 Settings → MCP,点「+ Add new global MCP server」,保存 { "mcpServers": { "figma": { "url": "https://mcp.figma.com/mcp" } } }。
- Claude Code:终端跑 claude mcp add --transport http figma https://mcp.figma.com/mcp,新开实例后输 /mcp 选 figma 完成 Authenticate。
- 授权通过就能在编辑器里直接问 AI 调 Figma 了;VS Code 那条记得把 GitHub Copilot 打开,否则 MCP 用不了。
本地桌面服务:从 Figma 客户端起
- 装并打开 Figma 桌面客户端,更新到最新版,随便开一个 Design 文件。
- 切到 Dev Mode(快捷键 Shift + D),在右侧检查面板的 MCP server 区点「Enable desktop MCP server」,底部会提示服务已启动。
- 把本地地址 http://127.0.0.1:3845/mcp 记下来,按上面同样的编辑器配置填进去,Server ID 用 figma-desktop 即可。
Figma MCP 支持的工具与编辑器
接上之后,AI 能调下面这几样工具去啃你的设计:
| |
|---|
| 返回所选节点的结构化描述,默认 React + Tailwind CSS,AI 再翻成你要的框架 |
| 把颜色、间距、字体等设计变量和样式抽成 token,避免 AI 写死数值 |
| 给所选节点出一版轻量 XML 属性(ID、名称、位置、尺寸),大文件能少占上下文 |
| |
| Code Connect 映射,让 AI 直接复用仓库里真实的代码组件,而不是现编一套 |
官方点名支持 MCP 的编辑器包括 VS Code(需 GitHub Copilot)、Cursor、Windsurf、Claude Code,以及 Xcode 27 beta。只要客户端能吃 Streamable HTTP,基本都能连。 Figma MCP 的席位与权限要求
这套服务目前还在开放测试阶段,不是所有人都能开。官方文档写的是:面向 Professional、Organization、Enterprise 三种套餐里持有 Dev 或 Full 席位的账号开放。远程服务靠 Figma 账号 OAuth 授权,授权后只能碰你账号权限范围内的文件。本地版则必须走桌面客户端,且客户端要保持最新。
beta 期间开放范围和具体门槛可能还会动,配置前最好去 Figma 帮助中心再对一眼当期要求,别照着旧帖死磕。
常见连接问题与排查
| | |
|---|
| | 重启 Figma 桌面客户端和编辑器,VS Code 切到 Agent 模式,输 #get_code 验证 |
| | 先在 VS Code 打开 Copilot,再配 MCP |
| | 到 Dev Mode 检查面板确认已 Enable desktop MCP server,并升到最新版 |
| | |
| | 用 Auto Layout、给图层起语义化名字、把组件和变量定义清楚 |
Figma MCP 常见问题
Q:Figma MCP 免费吗?
A:连接服务本身不收费,但开通需要符合条件的 Figma 付费套餐席位(beta 阶段面向 Dev/Full seat on Professional/Org/Enterprise)。
Q:远程和本地该选哪个?
A:绝大多数人选远程,功能最全、开箱即用;本地版适合有合规或网络隔离要求的组织场景。
Q:支持哪些编辑器?
A:VS Code(需 GitHub Copilot)、Cursor、Windsurf、Claude Code、Xcode 27 beta 等支持 MCP 的客户端都能接。
Q:怎么让 AI 读到我的设计?
A:两种办法——在 Figma 里选中帧或图层后让 AI 实现「当前选择」;或复制节点链接(Cmd/Ctrl+L)粘进提示词,AI 会自己提取 node-id。
Q:必须装 Figma 桌面客户端吗?
A:远程模式不需要;只有本地桌面 MCP 模式才依赖客户端。
Q:授权要怎么操作?
A:远程模式在编辑器点 Start/Add 后会弹出 Figma 账号的 OAuth 窗口,登录并允许访问就完成。
Q:生成的代码默认是什么框架?
A:get_code 默认给 React + Tailwind CSS 的结构化描述,AI 再翻成你指定的 Vue、SwiftUI、纯 HTML 等。
Q:连上了却调不出工具怎么办?
A:多半是服务没起或编辑器没进 Agent 模式,重启两端,VS Code 里输 #get_code 确认工具在线。
Q:数据安不安全?
A:远程模式走 Figma 官方账号授权,只动你授权范围内的文件;本地模式数据只在你机器上经桌面客户端流转。配置只从官方渠道取,别把凭据交给来路不明的页面。
Figma MCP 的远程与本地两种模式配置并不复杂,按官方文档把编辑器接上、授权账号,AI 就能直接吃进你的设计稿去生成代码。beta 期间功能和开放范围可能还会调,动手前在控制台或帮助中心确认一下当期标准更稳。想持续跟进 Figma MCP 的更新和更多 AI 工具用法,可以关注本站的 AI 工具栏目。