Figma MCP Server (Framelink)已精选

什么是 Figma MCP Server (Framelink)？

Figma MCP Server (Framelink) 是一个开源的 Figma MCP 服务器，可以把 Figma 中的布局和样式数据提供给 Cursor、Claude Code 等 AI 编程代理。粘贴一个链接，代理就能据此实现设计，不必再根据截图去猜。

它由 GLips 开发，是社区项目，不是 Figma 官方服务器。npm 包名为 figma-developer-mcp，采用 MIT 许可证。数据送到模型之前，它会精简并转换 Figma REST API 的响应，只留下与写代码相关的布局、样式和内容。上下文越少，生成的结果越准确。

如何使用 Figma MCP Server (Framelink)？

前置条件：

• Node.js 20 或更高版本（通过 npx 运行）。
• 一个 Figma 个人访问令牌（personal access token）。在 Figma 的 Settings → Security → Personal access tokens 中创建。Framelink 文档列出了建议勾选的权限范围，最少需要 file_content:read 和 file_dev_resources:read。

令牌可以通过 --figma-api-key=YOUR-KEY 传入，也可以写在 env 中的 FIGMA_API_KEY 里。服务器同样支持 OAuth 令牌，对应 --figma-oauth-token 或 FIGMA_OAUTH_TOKEN。加上 --stdio 参数，它会作为本地 stdio MCP 服务器运行。

Claude Code

claude mcp add Framelink_Figma_MCP -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

Claude Desktop

打开 Settings → Developer，编辑 claude_desktop_config.json，加入：

{
  "mcpServers": {
    "Framelink_Figma_MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Cursor

进入 Cursor Settings → MCP → Add new global MCP server，或者编辑 ~/.cursor/mcp.json（只对单个项目生效时用 .cursor/mcp.json）。上面的 JSON 可以直接用，也可以改用环境变量写法：

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

VS Code

"mcp": {
  "servers": {
    "Framelink_Figma_MCP": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windsurf

Windsurf 使用与 Claude Desktop 相同的 mcpServers JSON。

在 Windows 上，大多数客户端无法直接启动 npx。请把 "command" 设为 "cmd"，并在 args 开头加上 "/c", "npx"。

使用方法：在 Figma 中右键点击某个 frame 或 group，选择 Copy/Paste as → Copy link to selection，把链接粘贴到代理对话中，然后让代理实现它。

Figma MCP Server (Framelink) 的主要功能

• 通过链接读取 Figma 文件、frame 和 group，文件 key 和 node-id 直接从 URL 中解析。
• 把 Figma API 的输出精简为布局、样式、文本和组件数据，节省 token。默认输出格式是紧凑的 tree，也可以用 --format=yaml 或 --format=json。
• 根据更新日志，支持 auto layout、CSS Grid、富文本样式、渐变、效果和描边。
• 可以把 SVG 和 PNG 资源下载到项目中。写入只限于 --image-dir 目录，默认是当前工作目录。
• 只需要读取时，可以用 --skip-image-downloads 彻底移除下载工具。
• 也可以作为本地 HTTP 服务器运行（StreamableHTTP 端点为 /mcp，默认端口 3333），每个请求都可以带上自己的 X-Figma-Token 请求头。
• 支持代理（--proxy、FIGMA_PROXY），适合企业网络环境。
• 免费，采用 MIT 许可证。遥测默认开启，可以用 --no-telemetry、FRAMELINK_TELEMETRY=off 或 DO_NOT_TRACK 关闭。

Figma MCP Server (Framelink) 工具

服务器提供两个工具：

• get_figma_data：接收 fileKey 和可选的 nodeId，返回该文件或节点精简后的布局、内容、视觉和组件信息。你粘贴 Figma 链接后，代理调用的就是这个工具。
• download_figma_images：把图片填充和图标节点导出为 SVG 或 PNG（PNG 默认 2 倍缩放），保存到图片目录下的 localPath，这样生成的代码可以直接引用真实资源。

Figma MCP Server (Framelink) 的使用场景

• 把落地页的 frame 转成组件：“用 React 和 Tailwind 实现这个 Figma frame：”。
• 匹配现有设计系统：“用我们现有的 Button 和 Badge 组件做出这张卡片，间距按 Figma 来。”
• 用真实的图标和图片代替占位图：“把这个 frame 里的图标下载到 public/icons 并用上。”
• 把同一份设计移植到多个技术栈，比如 SwiftUI、Vue 或纯 HTML/CSS，因为它的输出与框架无关。
• 对照设计检查实现：“把这个页面和 Figma frame 对比一下，列出间距或颜色上的差异。”

Figma MCP Server (Framelink) 与替代方案对比

Figma 有自己的官方 Figma MCP server，以前叫 Dev Mode MCP server。它有两种形式：一种是位于 https://mcp.figma.com/mcp 的远程服务器，用 Figma 账号登录；另一种是通过 Figma 桌面应用运行的桌面服务器，需要付费计划中的 Dev 或 Full 席位。官方服务器的工具多得多，包括 get_design_context、get_screenshot、get_variable_defs、Code Connect 相关工具以及写入画布的工具。在 Claude Code 中的配置命令是 claude mcp add --transport http figma https://mcp.figma.com/mcp。

如果你想要一个小巧、以读取为主的 figma context MCP，在本地用个人访问令牌运行、不需要桌面应用，Framelink 更合适。它的输出紧凑，在任何 MCP 客户端中表现都一样。如果需要 Code Connect、变量，或者要把设计写回 Figma，请选择 Figma 官方服务器。

Figma MCP Server (Framelink) 常见问题排查

• 403 “Invalid scope(s)” 或 “Invalid token”：重新生成一个个人访问令牌，至少包含 file_content:read 和 file_dev_resources:read，并检查配置里有没有拼写错误或残留的占位文字。
• 403 “File not exportable”：需要文件所有者允许查看者复制、分享和导出，或者你可以把文件复制到自己的工作区。
• 429／触发速率限制：Figma API 的限额取决于文件所有者的计划和席位，免费计划的请求次数非常少。可以把文件移到付费团队，或者等待一段时间。
• 在代理环境下出现 fetch failed／ECONNRESET：添加 --proxy=http://your-proxy:8080 或设置 FIGMA_PROXY。用 --proxy=none 可以忽略代理相关的环境变量。
• Cannot find module 错误：关闭客户端，运行 npx clear-npx-cache，然后重新打开。