返回市场
麦克佩奇-菲玛

麦克佩奇-菲玛

作者:thirdstrandstudio49 星标更新:2025-08-05

项目介绍

技术文档摘要

Figma MCP 服务器

Third Strand Studio

smithery 徽章

用于与Figma API交互的MCP服务器。此服务器通过模型上下文协议提供了完整的Figma API方法集。在处理大型Figma文件时,有时需要指定深度(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 - 根据键获取样式

网络钩子方法(V2 API)

  1. figma_post_webhook - 创建网络钩子
  2. figma_get_webhook - 根据ID获取网络钩子
  3. figma_update_webhook - 更新网络钩子
  4. figma_delete_webhook - 删除网络钩子
  5. figma_get_team_webhooks - 获取团队中的网络钩子

库分析方法

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

安装

通过Smithery安装

要通过Smithery自动安装mcp-figma到Claude Desktop:

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

先决条件

  • Node.js(v16或更高版本)
  • npm 或 yarn

安装包

# 克隆仓库
git clone https://github.com/thirdstrandstudio/mcp-figma.git
cd mcp-figma

# 安装依赖
npm install

# 构建包
npm run build

配置

要使用此MCP服务器,您需要设置您的Figma API令牌。您可以采用以下三种方式之一进行设置:

1. 环境变量

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

FIGMA_API_KEY=your_figma_api_key

2. 命令行参数

启动服务器时,可以通过命令行参数传递您的Figma API令牌:

# 使用长形式
node dist/index.js --figma-token YOUR_FIGMA_TOKEN

# 或使用短形式
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文件

// 获取Figma文件
const result = await callTool("figma_get_file", {
  fileKey: "abcXYZ123"
});

从文件中获取评论

// 从文件中获取评论
const comments = await callTool("figma_get_comments", {
  fileKey: "abcXYZ123",
  as_md: true
});

创建网络钩子

// 创建网络钩子
const webhook = await callTool("figma_post_webhook", {
  event_type: "FILE_UPDATE",
  team_id: "12345",
  endpoint: "https://example.com/webhook",
  passcode: "your_passcode_here",
  description: "文件更新网络钩子"
});

开发

# 安装依赖
npm install

# 在开发模式下启动服务器
npm start

# 构建服务器
npm run build

# 使用Figma API令牌运行
npm start -- --figma-token YOUR_FIGMA_TOKEN

许可证

此MCP服务器根据MIT许可证发布。这意味着您可以自由地使用、修改和分发该软件,但需遵守MIT许可证中的条款和条件。详情请参阅项目存储库中的LICENSE文件。