Figma-Context-MCP-Next-1
此项目提供了一个模型上下文协议(MCP)服务器,允许像Cursor这样的AI驱动的编码工具访问和使用Figma设计数据。它简化了Figma API响应,仅提供最相关的布局和样式信息,从而提高了AI代码生成的准确性。
MCP 服务配置
复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用
{
"mcpServers": {
"Figma-Context-MCP-Cached": {
"args": [
"/c",
"npx",
"-y",
"figma-developer-mcp-caching-dev-fork",
"--figma-api-key=FIGMA_API_ACCESS_TOKEN"
],
"command": "cmd"
}
}
}
该服务需要配置环境变量:FIGMA_API_ACCESS_TOKEN
可用工具 (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
必填参数: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-caching-dev-fork,可以通过在配置文件中添加以下内容来进行配置。
注意:你需要创建一个 Figma 访问令牌才能使用此服务器。有关如何创建 Figma API 访问令牌的说明,请参阅 这里。
MacOS / Linux
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp-caching-dev-fork", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
Windows
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "cmd",
"args": ["/c", "npx", "-y", "figma-developer-mcp-caching-dev-fork", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
如果你希望通过环境变量管理凭据(如 MCP 客户端规范中推荐的那样),请将它们放在与你的服务器定义一起的 env 对象中。示例 Cursor 配置:
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp-caching-dev-fork", "--stdio"],
"env": {
"FIGMA_API_KEY": "YOUR-KEY",
"FIGMA_CACHING": "{\"ttl\":{\"value\":30,\"unit\":\"d\"}}",
"PORT": "3333"
}
}
}
}
如果你需要更多关于如何配置 Figma 的 Framelink MCP 的信息,请参阅 Framelink 文档。
支持免费 Figma 账户:持久缓存(可选)
为了避免达到 Figma 的重度速率限制,你可以通过设置包含 JSON 对象的 FIGMA_CACHING 环境变量来告诉 MCP 服务器在磁盘上缓存完整的文件响应。
FIGMA_CACHING='{ "ttl": { "value": 30, "unit": "d" } }'
将此变量放入你的 MCP 配置 JSON 中,参见上面的示例。- cacheDir(可选)控制缓存文件的写入位置。相对路径是相对于当前工作目录解析的,而 ~ 会扩展为您的主目录。如果您省略了它,在 Linux 上服务器默认使用 ~/.cache/figma-mcp,在 macOS 上默认使用 ~/Library/Caches/FigmaMcp,在 Windows 上默认使用 %LOCALAPPDATA%/FigmaMcpCache。
ttl控制缓存文件的有效时间。它必须包含一个value(数字)和一个unit(ms、s、m、h或d)。
当启用缓存时,服务器总是先完整地获取一次 Figma 文件,将其存储在磁盘上,并从缓存副本中提供后续的 get_figma_data / get_raw_node 请求,直到缓存过期。如果需要强制刷新,请删除 cacheDir 中的文件。不设置 FIGMA_CACHING 将保持默认的非缓存行为。
了解更多
Framelink MCP for Figma 简单但功能强大。通过访问 Framelink 网站了解更多内容,以充分利用其功能。
