Integrations

Enables creating and manipulating designs in Figma through either a Figma plugin or directly via the Figma API, supporting operations like creating projects, frames, components, layouts, interactions, retrieving file information, and exporting assets.

克劳德·菲格玛 MCP

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

概述

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

插件方法：使用 Figma 插件在 Figma 的 UI 中执行命令
- 允许从头开始创建和操作设计
- 需要在 Figma 应用程序中运行 Figma 插件
API 方法：直接使用 Figma REST API
- 允许检索和导出现有的 Figma 文件
- 无需打开 Figma 即可工作，但创作能力较为有限
- 需要 Figma API 密钥

安装

使用 NPM（推荐）

全局安装包：

npm install -g claude-figma-mcp

或者直接用 npx 运行：

npx claude-figma-mcp

从本地源运行

克隆此存储库
使用npm install安装依赖项
使用npm run build构建 TypeScript 代码
使用npm start （HTTP 模式）或npm run start:cli （STDIO 模式）运行服务器

设置 Claude 桌面集成

标准方法（NPM 包）

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

{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "claude-figma-mcp",
        "--stdio"
      ]
    }
  }
}

Figma API 方法

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

{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "claude-figma-mcp",
        "--stdio",
        "--figma-api-key",
        "your_figma_api_key_here"
      ]
    }
  }
}

简化的服务器选项

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

{
  "mcpServers": {
    "figma-mcp": {
      "command": "node",
      "args": [
        "/path/to/claude-figma-mcp/simple-mcp-server.js"
      ]
    }
  }
}

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

打开 Figma 并转到菜单 → 插件 → 开发 → 从清单导入插件...
从此存储库中选择figma-plugin/manifest.json文件
该插件现在应该可以在 Figma 插件菜单中使用

用法

插件方法

以 HTTP 模式启动 MCP 服务器
打开 Figma 并运行 Claude MCP Integration 插件
在插件界面中点击“连接到 MCP 服务器”
在 Claude 中，使用 Figma MCP 工具与 Figma 进行交互

API 方法

使用 Figma API 密钥启动 MCP 服务器
在 Claude 中，使用 Figma MCP 工具与 Figma 文件进行交互
无需打开 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 ：将框架或节点导出为图像

克劳德提示示例

插件方法示例

Can you create a login screen in Figma? It should have a logo at the top, email and password input fields, and a login button.

I need a dashboard layout in Figma with a header, sidebar navigation, and a main content area with 4 card components showing different statistics.

API 方法示例

Show me the contents of my Figma file with ID abcde12345

Export the frame named 'Homepage' from my Figma file abcde12345 as a PNG

配置

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

环境变量

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 的连接问题

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

node /path/to/claude-figma-mcp/simple-mcp-server.js

插件无法连接到服务器

确保：

MCP 服务器正在以 HTTP 模式运行
端口未被防火墙阻止
WebSocket 端口（默认值：8080）与服务器配置和插件匹配

API 密钥无法识别

确保您的 Figma API 密钥是：

有效且具有必要的权限
在环境变量或命令行参数中正确设置

贡献

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

执照

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

This server cannot be installed

-

security - not tested

F

license - not found

-

quality - not tested