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 - 获取库分析变量使用情况数据

Related MCP server: Salesforce MCP

安装

通过 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

A

license - permissive license

-

quality - not tested

How are these scores calculated?

Resources

Need Help?

Report Issue

Reddit Discussion

Related Servers

mcp-figma