Figma 模型上下文协议 (MCP) 服务器实现了 ModelContextProtocol,能让 AI 助手与 Figma 文件进行交互。借助该服务器提供的工具,用户可通过模型上下文协议,直接在 Figma 文件中查看、评论和分析设计。
curl -L "https://desktop.claude.ai/install.sh" | bash
文件内容 和 评论 权限范围。echo '{
"mcpServers": {
"figma-mcp": {
"command": "npx",
"args": ["figma-mcp"],
"env": {
"FIGMA_API_KEY": ""
}
}
}
}' > ~/Library/Application\ Support/Claude/claude_desktop_config.json
figma-mcp 块复制到你的 claude_desktop_config.json 文件中。在新的 Claude 聊天窗口中粘贴以下内容:
这个 Figma 文件里有什么?
https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC
请访问 loom.com 查看完整的演示。
为了开发和调试目的,你可以使用 MCP 检查工具。该检查器提供了一个可视界面,用于测试和监控 MCP 服务器交互。
请参考 Inspector 文档 获取详细的安装说明和使用指南。
在终端中运行以下命令以本地测试:
npx @modelcontextprotocol/inspector npx figma-mcp
git clone
npm install
npm run build
npm run watch
该服务器提供以下工具:
| 属性 | 详情 |
|---|---|
add_figma_file |
通过提供 URL 将 Figma 文件添加到上下文中 |
view_node |
获取 Figma 文件中特定节点的缩略图 |
read_comments |
获取 Figma 文件上的所有评论 |
post_comment |
在 Figma 文件中的一个节点上发布评论 |
reply_to_comment |
回复现有的 Figma 文件中的评论 |
每个工具都经过设计,以通过模型上下文协议界面实现与 Figma 文件的特定交互功能。