← 返回目录

Framelink MCP for Figma

社区

让 AI 编程代理读取 Figma 设计数据。

查看安装方法 ↓ 横向对比 GitHub 源仓库 ↗

分类: 开发工具第 158 / 438
Stars: ★ 16.0k 非常热门
传输方式: stdio（本地进程）
运行环境: Node.js
凭据: 需要 API Key / 凭据
许可证: MIT
最近提交: 4 个月前

57FMRS · C

MIT 许可的开源 MCP 服务器，面向 Cursor 等 AI 编程工具提供 Figma 布局与样式上下文；manifest 版本为 0.6.4，使用 npm 包 figma-developer-mcp 和 stdio 传输。

最强项 · 安装易用性 13/20 最弱项 · 可靠性 9/20

可靠性

9/20

安全与权限

11/20

维护活跃度

11/20

文档质量

13/20

安装易用性

13/20

查看各项评分依据

可靠性 9/20: 清单声明了 npm 包、stdio 传输和必需的 FIGMA_API_KEY，README 描述了基本调用流程，因此启动和握手在静态上是合理的。但未提供工具清单、源码、测试、CI、错误处理或依赖锁定证据，无法验证初始化、工具行为和失败诊断；按静态校准不超过12分。
安全与权限 11/20: 清单将 Figma 令牌标记为必需且秘密，README 也说明其用于访问 Figma 数据；已披露了主要凭据需求。扣分原因是 README 示例把令牌作为命令行参数传递，可能暴露于进程信息，且没有权限范围、数据边界、网络数据流、令牌轮换或危险操作确认的证据；未发现提示中的红线风险。
维护活跃度 11/20: 仓库未归档，提供 MIT 许可证，并有 0.6.4 版本和 npm 发布标识，说明存在基本的发布与许可信息。扣分原因是仅凭材料无法确认持续提交、依赖更新、问题响应、安全披露渠道或明确的维护治理；星标和开放问题数量不加分。
文档质量 13/20: README 提供用途、工作流程、Figma 令牌准备说明、MacOS/Linux 与 Windows 配置示例及外部文档链接，足以支持基本理解和安装。扣分原因是缺少可审查的工具参数、权限限制、API 成本/速率限制、版本兼容性、故障排查和安全最佳实践说明。
安装易用性 13/20: README 给出了 npx 配置、stdio 参数、MacOS/Linux 和 Windows 示例，并允许通过环境变量设置凭据，主流客户端的基本路径较清楚。扣分原因是依赖运行时和客户端兼容范围未明确，命令行令牌示例较脆弱，PORT 的说明与清单中的 stdio 配置关系不清，且没有实际连接验证或测试证据。

静态评测 · 未实际运行收录于 2026-07-29

查看 FMRS 评分方法 →

选型与风险

能访问什么访问网络

适合谁

使用 Cursor 的开发者
希望根据 Figma 设计生成代码的团队
需要布局和样式上下文的 AI 编程工作流

不适合谁

不使用 Figma 的项目
不使用 AI 编程工具的工作流
需要已列明具体工具清单或非 stdio 传输的场景

所需权限

需要 Figma Personal Access Token
令牌用于访问 Figma 数据
具体令牌权限范围未在来源中说明

风险与副作用

需要将 Figma 访问令牌配置给服务器，令牌泄露可能导致访问风险
Figma 设计数据会提供给 AI 编程代理，敏感设计内容应谨慎使用
生成结果仍需人工核对，来源仅描述其有助于更准确地实现设计

安装接入

准备工作

运行环境：Node.js

FIGMA_API_KEY 必填密钥 Figma 个人访问令牌（必需，密钥），可在 Figma 帮助文档 "Manage personal access tokens" 页面按说明创建。

在支持 MCP 的客户端配置文件中添加服务器配置，使用 npx 运行 figma-developer-mcp，并将 --figma-api-key=YOUR-KEY 替换为你的 Figma 访问令牌。服务器使用 stdio 传输。也可以在 env 中设置 FIGMA_API_KEY 和 PORT。

.cursor/mcp.json

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

以 Cursor 为例。其他客户端的配置文件位置或字段可能不同（如 VS Code 使用 servers 字段），可用下方配置生成器转换。

.vscode/mcp.json

{
  "servers": {
    "Framelink MCP for Figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}

写入项目的 .vscode/mcp.json（VS Code 使用 servers 字段）。

Terminal

claude mcp add 'Framelink MCP for Figma' -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

在终端运行；先把 <…> 占位符换成你自己的值。

生成并校验客户端配置

验证是否装好

在客户端的 MCP 服务器列表中确认 "Framelink MCP for Figma" 已连接，然后粘贴一个 Figma 文件链接让 agent 读取设计数据，能返回布局信息即说明安装成功。

常见排障

确认已创建并配置 Figma 访问令牌
检查客户端配置中的 npx、包名、令牌参数和 --stdio 参数
确认提供的是 Figma 文件、画板或组的链接
如使用环境变量，检查 FIGMA_API_KEY 是否已设置

试试这样问

连接成功后，可以直接对 AI 助手这样说：

打开 Cursor 的 agent 模式，粘贴这个 Figma 文件链接并实现其中的设计
把这个 Figma frame 链接发给你，帮我用当前项目的技术栈还原布局和样式
根据这个 Figma 分组链接的内容生成对应的前端组件代码

使用场景

将 Figma 文件、画板或组链接提供给 Cursor

根据 Figma 设计在任意框架中实现界面

让 AI 编程工具读取布局和样式上下文

支持客户端

Cursor

依据项目文档列出，未经本站实测。

详细介绍

Framelink MCP for Figma 是一个通过 Model Context Protocol 向 Cursor 等 AI 编程工具提供 Figma 布局信息的 MCP 服务器。它会简化并转换 Figma API 响应，向模型提供更相关的布局和样式信息，帮助其实现设计。