Figma 官方 MCP 怎么接入 Claude Code？

July 30, 2026 · 6 min read

Figma 官方远程 MCP 让 Claude Code 直接读/写设计稿，但 OAuth 流程有两个非显而易见的坑。

接入前提：Figma Professional/Organization/Enterprise 付费计划，免费的不支持官方 MCP。
一行接入：claude mcp add --transport http --scope user figma https://mcp.figma.com/mcp，写入 ~/.claude.json。
OAuth 第一坑：/mcp 弹窗不显示待认证的 HTTP server，诊断靠 claude mcp list。
OAuth 第二坑：claude mcp login 需要交互式 TTY，Claude Code 内 Bash 跑会失败。
解决路径：自己用终端跑 claude mcp login figma，浏览器授权完再回 Claude Code。
验证方式：claude mcp get figma 应返回 Status: ✔ Connected。
卸载命令：claude mcp remove figma -s user。

它解决什么问题

想让 AI 直接读 Figma 设计稿——节点树、颜色变量、组件、批注、Code Connect 元数据——传统做法是导出 JSON 再让模型读：不是不行，但每次改动都要重新导出。

Figma 官方 MCP 把这条通道打通成一个 HTTP server（https://mcp.figma.com/mcp），AI 通过 OAuth 拿到访问令牌后，能直接调用官方暴露的工具：

读取/搜索设计稿节点
列出/编辑颜色变量、文本样式、组件
查看和新增批注
通过 Code Connect 把 Figma 组件映射到代码仓库
渲染节点为图片（截图）

接入后，「把登录页面的 Figma 设计稿转成 React 组件」这类需求直接让 Claude Code 拉数据写代码，不再需要中间手工导出。

一行接入

claude mcp add --transport http --scope user figma https://mcp.figma.com/mcp

四个参数各司其职：

参数	作用
`--transport http`	走 HTTP 传输（区别于 stdio / SSE），Figma 远程 MCP 是 HTTP 类型
`--scope user`	写入 `~/.claude.json`，所有项目都能用；不加默认 `local`，仅当前项目可见
`figma`	在 `claude mcp list` 里显示的名字
`https://mcp.figma.com/mcp`	官方远程端点，不要改成其他 URL

执行成功会打印两行：

Added HTTP MCP server figma with URL: https://mcp.figma.com/mcp to user config
File modified: /Users/kimi/.claude.json

~/.claude.json 的 mcpServers 段新增这一条：

"figma": {
  "type": "http",
  "url": "https://mcp.figma.com/mcp"
}

此时 claude mcp list 的状态是 ! Needs authentication——server 已注册，OAuth 还没做。

第一个坑：/mcp 弹窗里看不到

装完第一反应是在 Claude Code 里输入 /mcp 找 figma → 点 Authenticate。但你会发现 弹窗里没有 figma 这一项。

/mcp 弹窗只展示 ✔ Connected 的 server，新加的 ! Needs authentication 状态 HTTP server 被过滤掉了。诊断得靠 CLI：claude mcp list（不带 UI 过滤）能看到 figma 已注册，只是还没认证。

绕路：直接走 claude mcp login 命令行流程，不要在 UI 里找入口。

OAuth 入口是 claude mcp login <name>。在 Claude Code 对话框内让 AI 跑这一步会失败：

$ claude mcp login figma --no-browser
Couldn't complete authentication for "figma": stdin isn't a terminal,
so authentication can't be completed here. Re-run in an interactive terminal
— e.g. `ssh -t` — and paste the redirect URL when prompted.

错误信息很直白：stdin 不是 TTY，没法交互。claude mcp login 内部依赖 OAuth callback 监听本地端口 + 等待浏览器回调粘贴 redirect URL，非交互 shell 直接拒绝。

--no-browser 也不行——它本质是为 SSH / headless 场景设计的「打印 URL 让你手动复制」，但仍然需要 TTY 接收 redirect URL。从 Claude Code 的 Bash 工具跑，两条路都过不去。

正确路径：切到自己的终端

Claude Code 内的 Bash 跑不了这一步。切到用户自己的终端（macOS 的 Terminal.app / iTerm / Ghostty 都行）执行：

claude mcp login figma

会自动开默认浏览器跳转到 https://www.figma.com/oauth?...，选 Figma 账户、确认授权。授权完浏览器跳转到 http://127.0.0.1:<callback-port>/... 显示成功页——这个 callback port 是 Claude Code 在 login 启动时临时占用的。

回到 Claude Code 跑 claude mcp list，状态从 ! Needs authentication 变成 ✔ Connected：

figma: https://mcp.figma.com/mcp (HTTP) - ✔ Connected

claude mcp get figma 给出完整信息：

figma:
  Scope: User config (available in all your projects)
  Status: ✔ Connected
  Type: http
  URL: https://mcp.figma.com/mcp

To remove this server, run: claude mcp remove figma -s user

Scope: User config (available in all your projects) 这一行是验证「真的写到全局」的关键——加了 --scope user 才会有这条。

接入后的典型用法

授权完成后，Claude Code 自动加载 Figma MCP 暴露的工具（通常是 get_file、get_node、get_screenshot、create_comment、get_metadata 等十几个）。常见用法：

「把 [Figma URL] 里登录页面的所有按钮列出来，告诉我它们的命名」
「检查 [Figma URL] 的颜色变量，导出成 Tailwind config 片段」
「给我 [Figma URL] 首页的截图」
「在 [Figma URL] 的 [节点名] 上加一条评论」
「把 [Figma URL] 的 design token 同步到 src/styles/tokens.css」

所有操作都通过自然语言触发，AI 自动选 tool、传参数。

卸载

claude mcp remove figma -s user

-s user 必须带上，否则默认从 local scope 删（找不到会报 not found）。OAuth 凭证存在 Claude Code 自带的凭据存储里，删 server 时会自动清掉。

三个要注意的点

Figma 账户必须绑定付费计划——免费 plan 没有官方远程 MCP 权限。如果是 free plan，要么升级，要么改装第三方 figma-developer-mcp 走 Personal Access Token（功能比官方少，主要是读取，无写入）。
OAuth 凭证是绑账户的——换 Figma 账户需要重新 claude mcp login，旧凭证会失效。
HTTP server 默认走 OAuth——不要尝试用 --header "Authorization: Bearer xxx" 硬塞 token，Figma 远程 MCP 不接受 PAT 直连，必须走 OAuth 浏览器流程。

它解决什么问题​

一行接入​

第一个坑：/mcp 弹窗里看不到​

第二个坑：claude mcp login 需要 TTY​

正确路径：切到自己的终端​

接入后的典型用法​

卸载​

三个要注意的点​

References​