Framelink MCP for Figma

让你的 AI 编程助手能够访问你的 Figma 设计数据。实现一次性将设计转化为任何框架的代码。

通过此 Model Context Protocol (MCP) 服务器，让 Cursor 及其他 AI 驱动的编程工具能够访问你的 Figma 文件。

当 Cursor 能够获取 Figma 设计数据时，它在“一次性”准确还原设计方面的表现，远超粘贴截图等替代方案。

查看快速入门指南 →

演示

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

工作原理

打开 IDE 的聊天界面（例如 Cursor 的 Agent 模式）。
粘贴 Figma 文件、Frame 或 Group 的链接。
要求 Cursor 根据该 Figma 文件执行操作（例如实现该设计）。
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 网站了解更多信息。

GLips/Figma-Context-MCP