mcp-figma

Figma MCP 服务器

MCP 服务器用于与 Figma API 交互。此服务器通过模型上下文协议 (Model Context Protocol) 提供一整套 Figma API 方法。有时，对于较大的 figma 文件，您可能需要设置 figma_get_file 的深度为 1，并在需要更多深度时增加深度。

工具

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

用户方法

figma_get_me - 获取当前用户

文件方法

figma_get_file - 通过键获取 Figma 文件
figma_get_file_nodes - 从 Figma 文件中获取特定节点
figma_get_images - 从 Figma 文件渲染图像
figma_get_image_fills - 获取 Figma 文件中的图像填充
figma_get_file_versions - 获取 Figma 文件的版本历史记录

评论方法

figma_get_comments - 获取 Figma 文件中的评论
figma_post_comment - 向 Figma 文件添加评论
figma_delete_comment - 从 Figma 文件中删除评论
figma_get_comment_reactions - 获取评论的反应
figma_post_comment_reaction - 对评论添加反应
figma_delete_comment_reaction - 从评论中删除反应

团队和项目方法

figma_get_team_projects - 获取团队中的项目
figma_get_project_files - 获取项目中的文件

组件方法

figma_get_team_components - 获取团队中的组件
figma_get_file_components - 获取文件中的组件
figma_get_component - 通过键获取组件
figma_get_team_component_sets - 获取团队中的组件集
figma_get_file_component_sets - 获取文件中的组件集
figma_get_component_set - 通过 key 获取组件集

样式方法

figma_get_team_styles - 获取团队风格
figma_get_file_styles - 获取文件中的样式
figma_get_style - 通过 key 获取样式

Webhook 方法（V2 API）

figma_post_webhook - 创建 webhook
figma_get_webhook - 通过 ID 获取 webhook
figma_update_webhook - 更新 webhook
figma_delete_webhook - 删除 webhook
figma_get_team_webhooks - 获取团队的 webhook

图书馆分析方法

figma_get_library_analytics_component_usages - 获取库分析组件使用情况数据
figma_get_library_analytics_style_usages - 获取库分析样式使用情况数据
figma_get_library_analytics_variable_usages - 获取库分析变量使用情况数据

安装

通过 Smithery 安装

要通过Smithery自动为 Claude Desktop 安装 mcp-figma：

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

先决条件

Node.js（v16 或更高版本）
npm 或 yarn

安装包

# 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 文件。

This server cannot be installed

security - not tested

license - permissive license

quality - not tested

How are these scores calculated?

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Figma MCP 具有完整的 API 功能

Related Resources

Reddit Discussion about this server

Related MCP Servers

Figma MCP Server
TimHolden
A
security
F
license
A
quality
Enables seamless interaction with Figma via the Model Context Protocol, allowing LLM applications to access, manipulate, and track Figma files, components, and variables.
Last updated -
2
106
TypeScript
Figma MCP Server
moonray
A
security
A
license
A
quality
Facilitates the analysis of Figma file structures by extracting node hierarchies, accessible via REST API or MCP protocol.
Last updated -
1
2
TypeScript
MIT License
Talk to Figma MCP
sonnylazuardi
A
security
A
license
A
quality
An MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.
Last updated -
19
2,514
3,528
JavaScript
MIT License
Claude Figma MCP
tonycueva
-
security
F
license
-
quality
A Model Context Protocol (MCP) server that enables Claude to create and manipulate designs in Figma through either a Figma plugin or directly via the Figma API.
Last updated -
TypeScript

View all related MCP servers