Figma
此项目提供了一个模型上下文协议（MCP）服务器，允许像Cursor这样的AI编码工具访问和使用Figma设计数据。它简化了Figma API的响应，仅提供最相关的布局和样式信息，从而提高了AI生成代码的准确性。
MCP 服务配置
复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用
{
"mcpServers": {
"Framelink MCP for Figma": {
"args": [
"/c",
"npx",
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR_KEY",
"--stdio"
],
"command": "cmd"
}
}
}该服务需要配置环境变量：YOUR_KEY
可用工具 （2 个）
该服务在 MCP 协议中暴露的工具，AI 可按需调用
get_figma_data 3 个参数 需填 1 项
Get comprehensive Figma file data including layout, content, visuals, and component information
必填参数：fileKey
download_figma_images 4 个参数 需填 3 项
Download SVG and PNG images used in a Figma file based on the IDs of image or icon nodes. Images will be saved relative to the server's image directory: /code
必填参数：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
{
"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。
如果您需要更多关于如何配置 Figma 的 Framelink MCP 的信息，请参阅 Framelink 文档。
星标历史
了解更多
Figma 的 Framelink MCP 简单但功能强大。通过访问 Framelink 网站了解更多内容，以充分利用它。
