克劳德·菲格玛 MCP

模型上下文协议 (MCP) 服务器使 Claude 能够通过 Figma 插件或直接通过 Figma API 在 Figma 中创建和操作设计。

概述

该项目为 Claude 提供了两种与 Figma 交互的方法：

1. 插件方法：使用 Figma 插件在 Figma 的 UI 中执行命令

   • 允许从头开始创建和操作设计

   • 需要在 Figma 应用程序中运行 Figma 插件

2. API 方法：直接使用 Figma REST API

   • 允许检索和导出现有的 Figma 文件

   • 无需打开 Figma 即可工作，但创作能力较为有限

   • 需要 Figma API 密钥

Related MCP server: mcp-figma

安装

使用 NPM（推荐）

全局安装包：

或者直接用 npx 运行：

从本地源运行

1. 克隆此存储库

2. 使用npm install安装依赖项

3. 使用npm run build构建 TypeScript 代码

4. 使用npm start （HTTP 模式）或npm run start:cli （STDIO 模式）运行服务器

设置 Claude 桌面集成

标准方法（NPM 包）

将以下内容添加到您的 Claude Desktop 配置文件中：

Figma API 方法

如果您更喜欢直接使用 Figma API（更可靠但创建功能较少）：

简化的服务器选项

对于标准服务器出现问题的环境，我们提供了简化的服务器：

设置 Figma 插件（仅限插件方法）

1. 打开 Figma 并转到菜单 → 插件 → 开发 → 从清单导入插件...

2. 从此存储库中选择figma-plugin/manifest.json文件

3. 该插件现在应该可以在 Figma 插件菜单中使用

用法

插件方法

1. 以 HTTP 模式启动 MCP 服务器

2. 打开 Figma 并运行 Claude MCP Integration 插件

3. 在插件界面中点击“连接到 MCP 服务器”

4. 在 Claude 中，使用 Figma MCP 工具与 Figma 进行交互

API 方法

1. 使用 Figma API 密钥启动 MCP 服务器

2. 在 Claude 中，使用 Figma MCP 工具与 Figma 文件进行交互

3. 无需打开 Figma - 操作直接通过 API 进行

可用工具

插件方法工具

• create_project ：创建一个新的 Figma 项目

• create_frame ：创建一个新的框架/画板

• create_rectangle ：创建一个矩形元素

• create_text ：创建文本元素

• create_component ：创建预定义的 UI 组件（按钮、输入等）

• create_layout ：创建常见的布局模式（页眉、页脚等）

• create_interaction ：在元素之间创建交互式原型连接

• export_frame ：将帧导出为图像

API 方法工具

• get_file ：检索有关 Figma 文件的信息

• get_file_nodes ：从 Figma 文件中获取特定节点

• get_comments ：从 Figma 文件中检索评论

• post_comment ：向 Figma 文件添加评论

• get_team_components ：列出团队的组件

• export_image ：将框架或节点导出为图像

克劳德提示示例

插件方法示例

API 方法示例

配置

可以使用环境变量或命令行参数配置服务器：

环境变量

• PORT ：HTTP 服务器端口（默认值：3000）

• WEBSOCKET_PORT ：用于 Figma 插件通信的 WebSocket 服务器端口（默认值：8080）

• FIGMA_API_KEY ：Figma API 密钥（API 方法所需）

命令行参数

• --port ：HTTP 服务器端口

• --websocket-port ：WebSocket 服务器端口

• --figma-api-key : Figma API 密钥

• --stdio ：以 stdio 模式运行（用于 Claude Desktop 集成）

故障排除

Claude Desktop 的连接问题

如果您对默认服务器有疑问，请尝试简化服务器选项：

插件无法连接到服务器

确保：

1. MCP 服务器正在以 HTTP 模式运行

2. 端口未被防火墙阻止

3. WebSocket 端口（默认值：8080）与服务器配置和插件匹配

API 密钥无法识别

确保您的 Figma API 密钥是：

1. 有效且具有必要的权限

2. 在环境变量或命令行参数中正确设置

贡献

欢迎贡献代码！欢迎提交 Pull 请求。

执照

该项目根据 MIT 许可证获得许可 - 有关详细信息，请参阅 LICENSE 文件。