飞哥吗
此服务器允许像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 的演示
工作原理
- 打开 IDE 的聊天窗口(例如 Cursor 中的代理模式)。
- 粘贴一个 Figma 文件、帧或组的链接。
- 请求 Cursor 对 Figma 文件执行某些操作——例如实现设计。
- 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_KEY 和 PORT。
如果您需要更多关于如何配置 Framelink Figma MCP 服务器的信息,请参阅 Framelink 文档。
Star 历史记录
了解更多
Framelink Figma MCP 服务器简单但功能强大。通过访问 Framelink 网站,您可以最大限度地利用它。
