Figma 设计 MCP 服务器使用说明

项目简介

Figma 设计 MCP 服务器是一个桥梁工具，它基于 Model Context Protocol (MCP) 构建，旨在连接大型语言模型（LLM）客户端（如 Claude）与 Figma 设计平台。通过这个服务器，用户可以使用自然语言指令，让 LLM 直接在 Figma 中创建、编辑和导出设计稿，从而实现更智能、更高效的设计工作流程。

主要功能点

AI 设计生成： 通过 Claude 等 LLM，用户可以用文字描述设计需求，服务器驱动 Figma 插件自动生成设计稿，例如创建登录界面、按钮、网页布局等。
Figma 设计编辑： 允许 LLM 根据指令修改 Figma 设计，例如调整元素样式、颜色、位置等。
设计导出： 支持将 Figma 设计导出为常见的图片格式（PNG, JPG, SVG, PDF），方便后续使用和分享。
实时通信： 通过 WebSocket 与 Figma 插件进行实时双向通信，确保操作的即时性和反馈。
MCP 标准协议： 遵循 Model Context Protocol 标准，易于集成到各种支持 MCP 协议的 LLM 客户端。

安装步骤

安装 Figma 插件：
- 打开 Figma 桌面应用程序。
- 点击菜单 "Plugins" -> "Development" -> "Import plugin from manifest..."。
- 在弹出的文件选择框中，选择本仓库 'figma-plugin' 目录下的 'manifest.json' 文件并导入。

配置 Claude MCP 服务器 (如果使用 Claude)：

找到您系统上 Claude 桌面应用的配置文件 'claude_desktop_config.json'。通常位于 '~/Library/Application Support/Claude/' (macOS)。
编辑 'claude_desktop_config.json' 文件，在 'mcpServers' 字段下添加 Figma 服务器的配置信息，如下所示：

{
  "mcpServers": {
      "figma": {
      "command": "docker",
         "args": [
            "run",
            "-i",
            "-p",
            "9000:9000",
            "--rm",
            "mcp/hs-figma"
         ],
         "env": {
            "NODE_ENV": "production",
            "WEBSOCKET_MODE": "true",
            "WS_PORT": "9000"
         }
      }
  }
}

配置参数说明 (无需修改， Claude 用户复制粘贴即可):

{
  "mcpServers": {
      "figma": { // 服务器名称，可以自定义
      "command": "docker", // 启动服务器的命令，这里使用 Docker
         "args": [ // 命令参数
            "run", // Docker run 命令
            "-i",  // 保持STDIN打开，即使不附加也保持打开
            "-p",  // 端口映射
            "9000:9000", // 将容器的 9000 端口映射到主机的 9000 端口
            "--rm", // 容器退出时自动删除
            "mcp/hs-figma" // Docker 镜像名称，请确保已构建该镜像
         ],
         "env": { // 环境变量
            "NODE_ENV": "production", // 设置 Node.js 运行环境为生产环境
            "WEBSOCKET_MODE": "true", // 启用 WebSocket 模式
            "WS_PORT": "9000" // 设置 WebSocket 服务器端口为 9000
         }
      }
  }
}

注意: 如果您不使用 Docker 运行服务器，而是直接使用 Node.js，请将 'command' 和 'args' 字段修改为相应的 Node.js 启动命令和参数。

启动 Figma MCP 服务器：

Docker 方式 (推荐): 确保已安装 Docker。在仓库根目录下，执行以下命令构建并运行 Docker 镜像：

docker build -t mcp/hs-figma .
docker run -d -p 9000:9000 mcp/hs-figma

Node.js 方式: 确保已安装 Node.js 和 npm。在仓库根目录下，执行以下命令安装依赖并启动服务器：
```
npm install
npm run build
npm start
```

在 Claude 中使用：
- 打开 Claude 应用程序。
- 如果配置正确，Figma 工具应该会自动出现在 Claude 的工具菜单中。
- 您可以开始向 Claude 发送设计指令，例如：
  - "Create a login screen in Figma" (在 Figma 中创建一个登录界面)
  - "Design a blue button with rounded corners in Figma" (在 Figma 中设计一个带有圆角的蓝色按钮)
  - "Make a simple landing page layout in Figma" (在 Figma 中创建一个简单的落地页布局)

基本使用方法

确保 Figma 桌面应用已打开并登录。
运行 Figma MCP 服务器 (Docker 或 Node.js 方式)。
打开 Claude 或其他 MCP 客户端，并确保已正确配置 Figma MCP 服务器。
在 Claude 中，通过自然语言描述您的设计需求，例如创建特定类型的 UI 元素、修改现有设计、导出设计稿等。
观察 Figma 中的实时设计变化，并根据需要调整您的指令。

提示: 为了获得最佳效果，请尽可能清晰、具体地描述您的设计需求。

关键词

Figma 设计 MCP 服务器使用说明

信息