Framelink MCP for Figma

让你的 AI 编程助手直接获取 Figma 设计数据。实现“一次性”将设计转化为任意框架的代码。

通过此 Model Context Protocol (MCP) 服务，为 Cursor 及其他 AI 编程工具提供访问 Figma 文件的能力。

相比于粘贴截图等替代方案，当 Cursor 能够获取 Figma 设计数据时，它在精准实现设计稿方面表现极其出色。

查看快速入门指南 →

演示

观看在 Cursor 中利用 Figma 设计数据构建 UI 的演示视频

工作原理

1. 打开 IDE 的聊天窗口（例如 Cursor 的 Agent 模式）。
2. 粘贴 Figma 文件、Frame（画板）或 Group（组）的链接。
3. 让 Cursor 执行针对该 Figma 文件的操作，例如实现设计稿。
4. Cursor 将从 Figma 获取相关的元数据，并将其用于编写代码。

此 MCP server 专门为 Cursor 设计。在从 Figma API 获取上下文并进行响应之前，它会对数据进行简化和转换，确保只向模型提供最相关的布局和样式信息。

减少提供给模型的上下文数量，有助于提高 AI 的准确性并使生成的响应更具相关性。

快速入门

许多代码编辑器和其他 AI 客户端使用配置文件来管理 MCP servers。

你可以通过在配置文件中添加以下内容来配置 figma-developer-mcp 服务。

注意：使用此服务需要创建一个 Figma 访问令牌（Access Token）。关于如何创建 Figma API 访问令牌的说明，请点击此处。

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"]
    }
  }
}

或者，你也可以在 env 字段中设置 FIGMA_API_KEY 和 PORT。

如果需要有关如何配置 Framelink MCP for Figma 的更多信息，请查阅 Framelink 文档。

Star 历史

了解更多

Framelink MCP for Figma 虽然简单但功能强大。访问 Framelink 网站，了解更多信息以充分发挥其潜力。