Framelink Figma MCP

这个 Agent 能做什么，适合哪些场景？

Framelink Figma MCP 是一个基于 Model Context Protocol (MCP) 的服务器，专门为 Cursor 等 AI 编程工具提供 Figma 文件的结构化布局数据。它通过命令行工具 figma-developer-mcp 运行，需要用户提供 Figma API 密钥并进行配置。该服务器会调用 Figma API 获取文件元数据，进行简化和翻译，仅向模型提供最相关的布局和样式信息，从而提高 AI 生成代码的准确性和相关性。它支持跨平台（macOS、Linux、Windows）运行，并可通过 npx 直接启动。项目采用 MIT 许可证，源代码托管在 GitHub 上。

该服务器首先监听用户的配置指令，当 Cursor 等客户端发送包含 Figma 链接的请求时，它会调用 Figma API 获取文件、帧或组件的元数据。然后，它会对响应进行简化和翻译，过滤掉无关信息，只保留关键的布局和样式数据（如尺寸、位置、颜色、字体等）。这些简化后的数据会以文本形式返回给 AI 模型，作为生成代码的上下文。整个流程通过标准输入输出（stdio）通信，部署时通过 npx 命令启动，需要设置 --figma-api-key 参数或环境变量 FIGMA_API_KEY。

1. 前端开发者在 Cursor 中打开 Figma 设计链接，要求 AI 实现该设计，AI 能准确生成对应框架的组件代码。
2. 产品设计师在开发会议中，快速将设计稿转换为可运行的 React 或 Vue 原型，无需手动标注。
3. 技术团队在迭代 UI 时，希望 AI 生成的代码与设计稿的间距、颜色等细节完全一致，减少手动调整。
4. 独立开发者使用 Cursor 进行全栈开发，希望将 Figma 中的设计元素直接嵌入到现有代码库中。
5. 设计系统维护者需要将设计规范的变更同步到前端代码，使用 AI 助手辅助更新样式。

如何安装或部署这个 Agent？

1. 确保安装了 Node.js 和 npm（npx 可用）。
2. 在 Figma 中创建个人访问令牌：登录 Figma，进入设置 → 安全 → 生成访问令牌，并复制。
3. 在代码编辑器的 MCP 配置文件中添加以下配置：

macOS/Linux:

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

Windows:

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

如何使用这个 Agent？

1. 将上述配置保存到编辑器的 MCP 配置文件中（例如 Cursor 的 .cursor/mcp.json）。
2. 重启编辑器，确保 MCP 服务器成功启动。
3. 在编辑器的聊天界面中，粘贴 Figma 文件的分享链接（可以是文件、帧或组件的链接）。
4. 输入要求，如“实现这个设计”，AI 将自动获取 Figma 数据并生成代码。
5. 也可以设置环境变量 FIGMA_API_KEY 和 PORT 代替命令行参数。

这个 Agent 有哪些优点和局限？

这个 Agent 与同类方案有什么区别？

与相关度最高的同类 agent 并排比较关键指标。

FollowAgents 如何评估这个 Agent？

最近版本

来自该项目 GitHub Releases 的最新发布记录，说明为上游原文摘录，未经本站改写或测试。

1. v0.13.2 2026-06-18
   发布说明摘录

   What's New in v0.13.2 Gradients with reduced opacity render at the right strength Previously, gradient fills ignored *layer* opacity, only looking at paint/stop-level opacity. Agents could generate gradient overlays like scrims much stronger than intended. Solid fills already honored opacity; now gradients do too. - [#399](https://github.com/GLips/Figma-Context-MCP/pull/399) · authored by @LovePlayCode --- <details> <summary><strong>Full technical changelog</strong></summary> [0.13.2](https://github.com/GLips/Figma-Context-MCP/compare/v0.13.1...v0.13.2) (2026-06-18) …

   在 GitHub 查看 ↗
2. v0.13.1 2026-06-18
   发布说明摘录

   What's New in v0.13.1 A quick follow-up to v0.13.0's payload diet. No more irrelevant, duplicate, or misleading titles Figma auto-names a text layer after its content, so a layer that reads "Add to cart" is *named* "Add to cart" too. The design data was carrying both. Worse, when someone edited the copy without renaming the layer, the stale old name often rode along, contradicting the real text and confusing LLM consumers. Additionally, auto-named labels (Rectangle 12, Frame 8372211, Ellipse 6) were included. All are gone now. …

   在 GitHub 查看 ↗
3. v0.13.0 2026-06-18
   发布说明摘录

   What's New in v0.13.0 v0.13.0 is focused on design output quality: new support for Figma grid layouts, a batch of rendering bug fixes, and — perhaps most importantly — a new default output format that cuts token usage roughly in half. Two of these changes came from the community: thanks to [@Jkuzz](https://github.com/Jkuzz) and [@cnYui](https://github.com/cnYui). Your payloads just got cut in half …

   在 GitHub 查看 ↗

常见问题