Figma MCP Server

这是一个基于ModelContextProtocol的服务器，使AI助手能够与Figma文件进行交互。该服务器提供了通过ModelContextProtocol直接查看、评论和分析Figma设计的工具。

功能

• 通过提供URL将Figma文件添加到与Claude的聊天中
• 阅读和发布Figma文件上的评论

使用Claude设置

通过Smithery安装

要通过Smithery自动安装Figma MCP Server给Claude桌面应用：

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

1. 从claude.ai/download下载并安装Claude桌面应用。
2. 获取Figma API密钥（figma.com -> 点击左上角的名字 -> 设置 -> 安全）。授予文件内容和评论权限。
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中。

4. 重启Claude桌面应用。
5. 在Claude界面中查找带有可用工具数量的锤子图标，确认服务器正在运行。

示例用法

开始一个新的与Claude桌面应用的聊天，并粘贴以下内容

这个Figma文件里有什么？

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

更现实的使用演示

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

开发环境设置

使用Inspector运行

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

访问Inspector文档，获取详细的设置说明和使用指南。

本地测试时使用的命令是

npx @modelcontextprotocol/inspector npx figma-mcp

本地开发

1. 克隆仓库
2. 安装依赖项：

npm install

3. 构建项目：

npm run build

4. 开发时自动重建：

npm run watch

提供的工具

服务器提供的工具包括：

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

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