Figma

简介

Figma MCP 服务器提供完整的 Figma API 访问，使您能够通过模型上下文协议(MCP)与 Figma 交互。

安装

通过 Smithery 安装（推荐）

npx @smithery/cli@latest install @jayarrowz/mcp-figma --client claude

手动安装

git clone https://github.com/jayarrowz/mcp-figma.git
cd mcp-figma
npm install
npm run build

配置 API 令牌

选择以下方式之一配置您的 Figma API 令牌：

1. 环境变量

创建 .env 文件：

FIGMA_API_KEY=your_figma_api_key

2. 命令行参数

node dist/index.js --figma-token YOUR_FIGMA_TOKEN

3. Claude Desktop 配置

在 claude_desktop_config.json 中添加：

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["@jayarrowz/mcp-figma", "--figma-token", "your_figma_api_key"]
    }
  }
}

使用示例

获取 Figma 文件

const result = await callTool("figma_get_file", { 
  fileKey: "abcXYZ123", 
  depth: 1  // 使用较小深度处理大型文件
});

获取文件评论

const comments = await callTool("figma_get_comments", { 
  fileKey: "abcXYZ123",
  as_md: true 
});

创建 Webhook

const webhook = await callTool("figma_post_webhook", {
  event_type: "FILE_UPDATE",
  team_id: "12345",
  endpoint: "https://example.com/webhook",
  passcode: "your_passcode_here",
  description: "File update webhook"
});

可用工具

该服务器提供 31 个 MCP 工具，包括：

• 用户方法：figma_get_me
• 文件方法：figma_get_file, figma_get_file_nodes, figma_get_images...
• 评论方法：figma_get_comments, figma_post_comment...
• 团队和项目方法：figma_get_team_projects...
• 组件和样式方法：figma_get_team_components...
• Webhook 和分析方法

许可证

MIT 许可证