AI导哈

Figma API服务器

通过Model Context Protocol提供完整Figma API方法的服务器，支持文件、评论、组件和样式等操作。

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

使用说明

Figma MCP服务器

用于与Figma API交互的MCP服务器。该服务器通过模型上下文协议提供一套完整的Figma API方法。有时在大型figma文件上，您可能需要告诉它对figma_get_file使用depth=1，然后在需要更多时增加。

工具

该服务器将所有Figma API方法实现为MCP工具：

用户方法

  1. figma_get_me -获取当前用户

文件方法

  1. figma_get_file -按键获取Figma文件
  2. figma_get_file_nodes -从Figma文件中获取特定节点
  3. figma_get_images -从Figma文件渲染图像
  4. figma_get_image_fills -获取Figma文件中的图像填充
  5. figma_get_file_versions -获取Figma文件的版本历史记录

评论方法

  1. figma_get_comments -在Figma文件中获取评论
  2. figma_post_comment -在Figma文件中添加注释
  3. figma_delete_comment -从Figma文件中删除评论
  4. figma_get_comment_reactions -获取评论的反应
  5. figma_post_comment_reaction -在评论中添加反应
  6. figma_delete_comment_reaction -从评论中删除反应

团队和项目方法

  1. figma_get_team_projects -在团队中获取项目
  2. figma_get_project_files -获取项目中的文件

组件方法

  1. figma_get_team_components -在团队中获取组件
  2. figma_get_file_components -在文件中获取组件
  3. figma_get_component -按键获取组件
  4. figma_get_team_component_sets -在团队中获取组件集
  5. figma_get_file_component_sets -在文件中获取组件集
  6. figma_get_component_set -按键获取组件集

风格方法

  1. figma_get_team_styles -在团队中获得风格
  2. figma_get_file_styles -在文件中获取样式
  3. figma_get_style -按键获得风格

Webhook方法（V2 API）

  1. figma_post_webhook -创建webhook
  2. figma_get_webhook -按ID获取webhook
  3. figma_update_webhook -更新webhook
  4. figma_delete_webhook -删除webhook
  5. figma_get_team_webhooks -为团队获取webhooks

图书馆分析方法

  1. figma_get_library_analytics_component_usages -获取库分析组件使用数据
  2. figma_get_library_analytics_style_usages -获取库分析风格使用数据
  3. figma_get_library_analytics_variable_usages -获取库分析变量使用数据

安装

通过Smithery安装

通过以下方式自动安装Claude Desktop的mcp-figma 史密瑟里:

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

先决条件

  • Node.js（v16或更高版本）
  • npm或纱线

安装软件包

# Clone the repository
git clone https://github.com/thirdstrandstudio/mcp-figma.git
cd mcp-figma

# Install dependencies
npm install

# Build the package
npm run build

设置

要使用此MCP服务器，您需要设置Figma API令牌。您可以通过以下三种方式之一完成此操作：

1.环境变量

创建一个 .env 在项目根目录中创建文件或直接设置环境变量：

FIGMA_API_KEY=your_figma_api_key

2.命令行参数

启动服务器时，您可以将Figma API令牌作为命令行参数传递：

# Using the long form
node dist/index.js --figma-token YOUR_FIGMA_TOKEN

# Or using the short form
node dist/index.js -ft YOUR_FIGMA_TOKEN

使用Claude Desktop

将以下内容添加到您的 claude_desktop_config.json:

使用npx

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

直接Node.js（带环境变量）

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/path/to/mcp-figma/dist/index.js"],  
      "env": {
        "FIGMA_API_KEY": "your_figma_api_key"
      }
    }
  }
}

直接Node.js（带命令行参数）

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/path/to/mcp-figma/dist/index.js", "--figma-token", "your_figma_api_key"]
    }
  }
}

替换 /path/to/mcp-figma 使用存储库的实际路径。

例子

获取Figma文件

// Get a Figma file
const result = await callTool("figma_get_file", { 
  fileKey: "abcXYZ123"
});

从文件中获取评论

// Get comments from a file
const comments = await callTool("figma_get_comments", { 
  fileKey: "abcXYZ123",
  as_md: true 
});

创建Webhook

// Create a 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"
});

发展

# Install dependencies
npm install

# Start the server in development mode
npm start

# Build the server
npm run build

# Run with a Figma API token
npm start -- --figma-token YOUR_FIGMA_TOKEN

许可证

此MCP服务器根据MIT许可证获得许可。这意味着您可以根据MIT许可证的条款和条件自由使用、修改和分发软件。有关更多详细信息，请参阅项目存储库中的LICENSE文件。

相关 MCP