MCP 服务器

Framelink Figma MCP Server

injunko

开发者工具

README

<div align="center"> <h1>Framelink Figma MCP 服务器</h1> <h3>让你的编码助手访问你的 Figma 数据。<br/>一次性在任何框架中实现设计。</h3> <a href="https://npmcharts.com/compare/figma-developer-mcp?interval=30"> <img alt="每周下载量" src="https://img.shields.io/npm/dm/figma-developer-mcp.svg"> </a> <a href="https://github.com/GLips/Figma-Context-MCP/blob/main/LICENSE"> <img alt="MIT 许可证" src="https://img.shields.io/github/license/GLips/Figma-Context-MCP" /> </a> <a href="https://framelink.ai/discord"> <img alt="Discord" src="https://img.shields.io/discord/1352337336913887343?color=7389D8&label&logo=discord&logoColor=ffffff" /> </a> <br /> <a href="https://twitter.com/glipsman"> <img alt="Twitter" src="https://img.shields.io/twitter/url?url=https%3A%2F%2Fx.com%2Fglipsman&label=%40glipsman" /> </a> </div>

<br/>

使用此模型上下文协议服务器，让 Cursor、Windsurf、Cline 和其他 AI 驱动的编码工具访问你的 Figma 文件。

当 Cursor 可以访问 Figma 设计数据时，它在一次性准确实现设计方面比粘贴屏幕截图等替代方法好得多。

<h3><a href="https://www.framelink.ai/docs/quickstart?utm_source=github&utm_medium=readme&utm_campaign=readme">查看快速入门说明 →</a></h3>

演示

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

工作原理

打开 IDE 的聊天窗口（例如 Cursor 中的代理模式）。
粘贴指向 Figma 文件、框架或组的链接。
要求 Cursor 对 Figma 文件执行某些操作，例如实现设计。
Cursor 将从 Figma 获取相关的元数据，并使用它来编写你的代码。

此 MCP 服务器专为与 Cursor 一起使用而设计。在响应来自 Figma API 的上下文之前，它会简化和翻译响应，以便仅向模型提供最相关的布局和样式信息。

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

开始使用

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

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

注意：你需要创建一个 Figma 访问令牌才能使用此服务器。有关如何创建 Figma API 访问令牌的说明，请参见此处。

MacOS / Linux

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

Windows

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