HelloWorld
登录
F

Figma连接器

一个模型上下文协议服务器，提供对Figma API功能的访问，允许像Claude这样的AI助手与Figma文件、评论、组件和团队资源进行交互。

art-and-culturedeveloper-tools

623 查看 · 2026-07-07 更新

简介

一个模型上下文协议服务器，提供对Figma API功能的访问，允许像Claude这样的AI助手与Figma文件、评论、组件和团队资源进行交互。

简介

一个模型上下文协议服务器，提供对Figma API功能的访问，允许像Claude这样的AI助手与Figma文件、评论、组件和团队资源进行交互。

mcp-figma

一个用于 Figma API 集成的 Model Context Protocol (MCP) 服务器，设计用于与 Claude 和其他 MCP 兼容的 AI 助手一起使用。

npm version

特性

此 MCP 服务器提供了访问 Figma API 功能的能力：

  • 文件操作（获取文件、获取节点、获取图片）
  • 评论管理
  • 团队/项目管理
  • 组件和样式访问
  • 持久化 API 密钥存储

安装

NPM 安装

# Install globally
npm install -g mcp-figma

# Or install locally in a project
npm install mcp-figma

# Update to latest version
npm update -g mcp-figma

与 Claude 一起使用

  1. 将 mcp-figma 添加到您的 Claude 配置中：
"mcp-figma": {
  "command": "npx",
  "args": [
    "-y",
    "mcp-figma"
  ]
}
  1. 当您第一次使用 Claude 时，需要设置您的 Figma API 密钥：
Please use mcp-figma to set my Figma API key: figd_xxxxxxxxxxxxxxxxxxxxxxx

您的 API 密钥将被存储在 ~/.mcp-figma/config.json 中，并将在未来的会话中自动加载。

  1. 您可以验证您的 API 密钥是否已配置：
Please use mcp-figma to check my API key status
  1. 然后使用任何可用的 Figma API 函数：
Please use mcp-figma to get the file with key abc123

可用工具

该服务器提供以下工具：

  • set_api_key: 设置您的 Figma API 个人访问令牌（保存到配置）
  • check_api_key: 检查是否已配置 API 密钥
  • get_file: 通过密钥获取 Figma 文件
  • get_file_nodes: 从 Figma 文件中获取特定节点
  • get_image: 获取 Figma 文件中节点的图片
  • get_image_fills: 获取 Figma 文件中使用的图片 URL
  • get_comments: 获取 Figma 文件上的评论
  • post_comment: 在 Figma 文件上发布评论
  • delete_comment: 从 Figma 文件上删除评论
  • get_team_projects: 获取团队的项目
  • get_project_files: 获取项目的文件
  • get_team_components: 获取团队的组件
  • get_file_components: 从文件中获取组件
  • get_component: 通过密钥获取组件
  • get_team_component_sets: 获取团队的组件集
  • get_team_styles: 获取团队的样式
  • get_file_styles: 从文件中获取样式
  • get_style: 通过密钥获取样式

有关详细的使用示例，请参阅 USAGE.md。

许可证

MIT

工具列表

  • set_api_key: Set your Figma API personal access token (will be saved to ~/.mcp-figma/config.json)

  • check_api_key: Check if a Figma API key is already configured

  • get_file: Get a Figma file by key

  • get_file_nodes: Get specific nodes from a Figma file

  • get_image: Get images for nodes in a Figma file

  • get_image_fills: Get URLs for images used in a Figma file

  • get_comments: Get comments on a Figma file

  • post_comment: Post a comment on a Figma file

  • delete_comment: Delete a comment from a Figma file

  • get_team_projects: Get projects for a team

  • get_project_files: Get files for a project

  • get_team_components: Get components for a team

  • get_file_components: Get components from a file

  • get_component: Get a component by key

  • get_team_component_sets: Get component sets for a team

  • get_team_styles: Get styles for a team

  • get_file_styles: Get styles from a file

  • get_style: Get a style by key

来源