Figma Context MCP — 使用场景, 安装 & 实时演示

为什么要用

核心特性

以 token 高效的 YAML/JSON 形式返回 Figma 数据，而不是原生 API 的怪物结构
解析 component instance 及其 override
按名字暴露设计 token（颜色、文字样式、间距）
可导出所选节点的图片做视觉参考
只读——绝不回写 Figma 文件

实时演示

实际使用效果

figma.replay ▶ 就绪

0/0

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标，然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "figma",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  ]
}

Continue 使用服务器对象数组，而非映射。

~/.config/zed/settings.json

{
  "context_servers": {
    "figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "figma-developer-mcp"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add figma -- npx -y figma-developer-mcp

一行命令搞定。用 claude mcp list 验证，claude mcp remove 卸载。

使用场景

实战用法： Figma Context

从 Figma frame 生成 React/SwiftUI/Tailwind 代码

👤 实现设计稿屏幕的前端开发 ⏱ ~30 min intermediate

何时使用： 你手上有一个屏幕/组件的 Figma frame，想让前 80% 的代码被忠实生成出来。

前置条件

Figma personal access token — figma.com → Settings → Personal access tokens；scope 设为 file_read
Figma 文件 URL — 从 Figma 复制 URL；MCP 能从中抽出 file key 和 node id

步骤

拉取 frame 数据

获取 <粘贴带 node-id 的 figma URL> 对应的节点。返回它的布局、文字内容、颜色和子结构。✓ 已复制

→ 带真实值的层级节点数据——而不是 'unable to fetch'
基于数据生成代码

生成一个 React + Tailwind 组件精确匹配它。使用 Figma 数据里真实的 hex 颜色和像素值，不要近似。✓ 已复制

→ 引用真实值的代码，比如 bg-[#1A2B3C] 而非 bg-blue-500
用导出图做视觉校对

把同一个 frame 导出为 PNG。对比你生成组件预计的渲染，指出差异。✓ 已复制

→ 具体差异（缺图标、padding 不对）而不是 '差不多'

结果： 一版像素级忠实的初稿，可以打磨而非重做。

注意事项

auto-layout 与绝对定位对应到 flex/grid 的方式不同 — 告诉 Claude：Figma 用 auto-layout 时优先 flexbox；否则用 absolute
矢量图标以 SVG path 返回，Claude 会内联照搬 — 让它单独把图标抽到 /icons/*.svg 并以组件形式引用

搭配使用： filesystem · github

把 Figma 设计 token 同步进代码库

👤 设计系统维护者 ⏱ ~20 min intermediate

何时使用： 设计师在 Figma 里更新了色板/字体，你需要让 token JSON 匹配。

步骤

拉取已发布样式

从 Figma 文件 <key>，列出所有已发布的颜色样式、文字样式和效果样式。按类别分组。✓ 已复制

→ 完整 token 列表，带名字和值
跟代码库对 diff

读 /design-tokens/tokens.json。告诉我自上次同步以来 Figma 里变动了哪些 token（新增、删除、值变更）。✓ 已复制

→ 逐 token diff，带 old/new
应用并开 PR

更新 tokens.json 以匹配 Figma。开一个标题为 'sync: design tokens YYYY-MM-DD' 的 PR，描述里贴 diff。✓ 已复制

→ PR 创建成功，diff 可审查

结果： 代码侧 token 与 Figma 保持同步；再没有 '品牌色怎么有点不对' 的工单。

注意事项

重命名 token 看起来像 delete+add — 让 Claude 用启发式检测重命名（值相同、名字相似），标记出来由人复核

搭配使用： filesystem · github

从 Figma 文件提取开发 spec（间距、尺寸、文案）

👤 没开 Dev Mode 又要对接 Figma 的工程师 ⏱ ~15 min beginner

何时使用： 你没有 Figma Dev Mode，但需要一个屏幕的像素 spec。

步骤

获取屏幕

对 Figma 节点 <id>，给我所有叶子元素的扁平列表，包含绝对位置、尺寸和任何文字内容。✓ 已复制

→ 带 x/y/w/h 的元素表
让它生成 spec 文档

把这些转成面向开发的 spec：按区块，带从位置推断的间距（margin/padding）。✓ 已复制

→ 带具体等价 CSS 值的 spec 文档
核对边界情况

当文字超出设计宽度会怎样？设计是否规定了换行、截断或撑高？未规定就标记给设计师。✓ 已复制

→ 开放问题清单，而非默默假设

结果： 一份可落地的 spec，无需给每个人买 Dev Mode 席位。

注意事项

设计师用了任意间距（13px、17px）而非 token 值 — 让 Claude 四舍五入到最近 token 值，但把偏差记录下来，供设计师清理

搭配使用： filesystem

组合

与其他 MCP 搭配，撬动十倍杠杆

figma + filesystem

从 Figma 生成代码并直接写入组件文件

拉取 Figma 节点 <id>。生成精确匹配的 React 组件，用 filesystem MCP 写入 src/components/Card.tsx。✓ 已复制

figma + github

开一个包含新组件的 PR，描述里附 Figma 链接供 reviewer 参考

从 Figma <url> 生成 Card 组件，commit、push，并开 PR，同时附上代码改动和源 Figma 链接。✓ 已复制

figma + chrome-devtools

构建、在浏览器里渲染、截图，然后对比 Figma 导出做视觉比对

构建新组件。在 localhost:3000/preview/card 渲染。截图。跟 Figma PNG 导出做视觉比对，列出任何视觉差异。✓ 已复制

工具

此 MCP 暴露的能力

工具	输入参数	何时调用	成本
get_figma_data	fileKey: str, nodeId?: str, depth?: int	以 agent 友好形式拉取一个 frame 或整个文件	1 次 Figma API 调用（免费额度：1500/分钟）
download_figma_images	fileKey: str, nodes: [{nodeId, fileName}], localPath: str, format?: 'png'\|'svg', scale?: number	把设计资源（图标、插画、截图）导出到本地	每节点 1 次 Figma 渲染调用

成本与限制

运行它的成本

API 配额: Figma 免费版：1500 请求/分钟。交互使用绰绰有余。
每次调用 Token 数: 紧凑模式下，单 frame 约 1-5k token。整文件会膨胀——按 nodeId 限定范围。
费用: MCP 免费。任何 Figma 账号都可免费使用 Figma API。
提示: 能传 nodeId 就传——拉整文件很浪费。

安全

权限、密钥、影响范围

最小权限： file_read

凭据存储： personal access token 放进环境变量 FIGMA_API_KEY。绝不提交仓库。

数据出站： 所有调用发到 api.figma.com

切勿授予： file_write——MCP 不需要；写权限 token 有误改风险

personal access token 权限很大——用只读 scope 并定期轮换。
Figma 文件内容（你的设计）会作为 context 发送到 LLM 提供商。敏感文件优先按 node 拉取而不是整文件。

故障排查

常见错误与修复

403 Forbidden

token 没该文件访问权。确认文件所在 team/workspace 是 token 可见的。社区共享文件请用另一个 token。

验证： curl -H 'X-Figma-Token: $FIGMA_API_KEY' https://api.figma.com/v1/me

Could not extract file key from URL

使用 https://www.figma.com/file/<KEY>/... 或 https://www.figma.com/design/<KEY>/... 格式。URL 解析失败时显式传 fileKey。

响应巨大，吃爆 context

传 nodeId 限定到某 frame，或 depth: 2 限制遍历深度。

图片导出报 'unsupported node type'

section、slice 等节点类型无法导出。选一个实际 frame 或 component。

替代方案

Figma Context 对比其他方案

替代方案	何时用它替代	权衡
Figma 官方 Dev Mode MCP（beta）	你有 Figma Dev Mode，想用官方集成	较新，需要 Dev Mode 订阅；长期会有更深的 Figma 功能支持
通过 shell 直接调 Figma REST API	你要完整的 API 面（variables、branch、comment）	原生 API 响应巨大，LLM 消化困难

Figma Context

为什么要用

核心特性

实时演示

实际使用效果

安装

选择你的客户端

使用场景

实战用法： Figma Context

前置条件

步骤

注意事项

步骤

注意事项

步骤

注意事项

组合

与其他 MCP 搭配，撬动十倍杠杆

工具

此 MCP 暴露的能力

成本与限制

运行它的成本

安全

权限、密钥、影响范围

故障排查

常见错误与修复

替代方案

Figma Context 对比其他方案

更多

资源