AI导哈

Figma MCP服务器

一个基于ModelContextProtocol的服务器，使AI助手能够与Figma文件交互，提供查看、评论和分析Figma设计的功能。

  • by MatthewDailey
  • TypeScript
  • 本地部署
  • 213 星标
  • 更新于
在 GitHub 查看 MatthewDailey/figma-mcp

使用说明

Figma MCP服务器

A. 模型上下文协议 服务器，使AI助手能够与Figma文件进行交互。该服务器提供了直接通过ModelContextProtocol查看、评论和分析Figma设计的工具。

特性

  • 通过提供网址将Figma文件添加到您与Claude的聊天中
  • 阅读并发表对Figma文件的评论

与Claude一起设置

通过Smithery安装

通过以下方式自动安装Claude Desktop的Figma MCP服务器 史密瑟里:

npx -y @smithery/cli install @MatthewDailey/figma-mcp --client claude

  1. 从下载并安装Claude桌面应用程序 claude.ai/下载

  2. 获取Figma API密钥（Figma.com->单击您的姓名左上角->设置->安全）。授予 File content 和 Comments 范围。

  3. 配置Claude以使用Figma MCP服务器。如果这是您的第一台MCP服务器，请在终端中运行以下命令。

echo '{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": ["figma-mcp"],
      "env": {
        "FIGMA_API_KEY": "<YOUR_API_KEY>"
      }
    }
  }
}' > ~/Library/Application\ Support/Claude/claude_desktop_config.json

如果不是，请复制 figma-mcp 阻止您的 claude_desktop_config.json

  1. 重新启动克劳德桌面。

  2. 在Claude的界面中查找带有可用工具数量的锤子图标，以确认服务器正在运行。

示例用法

与claude桌面开始新的聊天，并粘贴以下内容

What's in this figma file?

https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC

演示更真实的用法

https://www.loom.com/share/0e759622e05e4ab1819325bcf6128945?sid=bcf6125b-b5de-4098-bf81-baff157e3dc3

开发设置

与Inspector一起运行

出于开发和调试目的，您可以使用MCP检查器工具。Inspector为测试和监控MCP服务器交互提供了一个可视化界面。

访问 检查员文件 有关详细的设置说明和使用指南。

使用Inspector进行本地测试的命令是

npx @modelcontextprotocol/inspector npx figma-mcp

地方发展

  1. 克隆存储库
  2. 安装依赖项：
npm install
  1. 构建项目：
npm run build
  1. 对于自动重建的开发：
npm run watch

可用工具

服务器提供以下工具：

  • add_figma_file：通过提供其URL将Figma文件添加到您的上下文中
  • view_node：获取Figma文件中特定节点的缩略图
  • read_comments：获取Figma文件上的所有评论
  • post_comment：在Figma文件中的节点上发表评论
  • reply_to_comment：回复Figma文件中的现有评论

每个工具都旨在通过ModelContextProtocol接口提供与Figma文件交互的特定功能。

相关 MCP