飞哥吗

luckyhavi/figma
Hosted
1 Stars 429 次浏览 更新于 2026-08-23

此服务器允许像Cursor这样的AI编码工具访问Figma设计数据。它简化并翻译了Figma API的响应,仅提供最相关的布局和样式信息,使AI更加准确且响应更相关。

MCP 服务配置

复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用

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

可用工具 (2 个)

该服务在 MCP 协议中暴露的工具,AI 可按需调用

get_figma_data 3 个参数 需填 1 项

When the nodeId cannot be obtained, obtain the layout information about the entire Figma file

必填参数:fileKey

download_figma_images 5 个参数 需填 3 项

Download SVG and PNG images used in a Figma file based on the IDs of image or icon nodes

必填参数:fileKey、nodes、localPath

服务介绍

通过这个 Model Context Protocol 服务器,让 Cursor 和其他基于 AI 的编码工具能够访问您的 Figma 文件。

当 Cursor 能够访问 Figma 设计数据时,它比粘贴截图等替代方法更准确地一次性实现设计。

演示

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

观看视频

工作原理

  1. 打开 IDE 的聊天窗口(例如 Cursor 中的代理模式)。
  2. 粘贴一个 Figma 文件、帧或组的链接。
  3. 请求 Cursor 对 Figma 文件执行某些操作——例如实现设计。
  4. Cursor 将从 Figma 获取相关元数据,并使用这些数据编写代码。

此 MCP 服务器是专门为与 Cursor 一起使用而设计的。在从 Figma API 响应之前,它会简化并翻译响应,以便只提供最相关的布局和样式信息给模型。

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

开始使用

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

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

注意:您需要创建一个 Figma 访问令牌才能使用此服务器。有关如何创建 Figma API 访问令牌的说明,请参阅 这里

MacOS / Linux

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

Windows

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

或者,您可以在 env 字段中设置 FIGMA_API_KEYPORT

如果您需要更多关于如何配置 Framelink Figma MCP 服务器的信息,请参阅 Framelink 文档

Star 历史记录

了解更多

Framelink Figma MCP 服务器简单但功能强大。通过访问 Framelink 网站,您可以最大限度地利用它。

赞助商

🥇 金牌赞助商

🥈 银牌赞助商

🥉 铜牌赞助商

😻 小额支持者

相关 MCP 服务