Framelink MCP for Figma

让您的编程代理能够访问您的 Figma 数据。一键在任何框架中实现设计。

通过这个 Model Context Protocol 服务器，让 Cursor 和其他 AI 驱动的编程工具能够访问您的 Figma 文件。

当 Cursor 能够访问 Figma 设计数据时，它一次性准确实现设计的能力，远比粘贴截图等替代方案要强得多。

查看快速入门指南 →

演示

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

工作原理

1. 打开您 IDE 的聊天界面（例如 Cursor 中的 agent 模式）。
2. 粘贴 Figma 文件、画板或组的链接。
3. 让 Cursor 对 Figma 文件执行操作——例如实现该设计。
4. Cursor 将从 Figma 获取相关元数据，并利用它来编写您的代码。

这个 MCP 服务器专为与 Cursor 配合使用而设计。在返回来自 Figma API 的上下文之前，它会对响应进行简化和转换，只向模型提供最相关的布局和样式信息。

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

快速开始

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

可以通过将以下内容添加到您的配置文件中来配置 figma-developer-mcp 服务器。

注意：您需要创建一个 Figma 访问令牌才能使用此服务器。有关如何创建 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 网站了解更多信息，充分发挥其潜力。