Figma MCP 服务器

一个让 Claude 直接在 Figma 中创建和编辑设计的工具。

功能

此工具将 Claude 与 Figma 连接，允许您：

• 通过向 Claude 描述来创建新的 Figma 设计
• 使用简单的指令编辑现有的 Figma 设计
• 生成完整的线框图和 UI 元素
• 导出您的设计

工作原理

1. Claude: 理解您的设计请求
2. Figma 插件: 在 Figma 中创建设计
3. 服务器: 连接 Claude 和 Figma (自动运行)

快速入门指南

用户指南

1. 安装 Figma 插件:

   • 打开 Figma 桌面应用程序
   • 转到 插件 > 开发 > 从清单导入插件
   • 从本项目中选择 figma-plugin/manifest.json 文件

2. 在 Claude 配置中配置 Figma MCP 服务器:

   • 检查 MCP Config json 文件在您系统上的位置。 这可能取决于您的操作系统。
   • 编辑 ~/Library/Application Support/Claude/claude_desktop_config.json:

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

3. 与 Claude 一起使用:

   • 打开 Claude
   • Figma 工具应该出现在 Claude 的工具菜单中
   • 要求 Claude 在 Figma 中创建设计，例如：
     • "在 Figma 中创建一个登录屏幕"
     • "在 Figma 中设计一个带有圆角的蓝色按钮"
     • "在 Figma 中制作一个简单的着陆页布局"

技术设置 (IT/开发者)

<details> <summary>点击展开技术设置说明</summary>

前提条件

• Node.js (>= 16)
• npm
• Docker (安装在运行 Claude 的机器上)
• Figma 桌面应用程序

安装

1. 克隆并安装:

   git clone <repository-url>
   cd figma-mcp-server
   npm install
   

2. 构建:

   npm run build
   npm run build:figma-plugin
   

3. 构建 Docker 镜像 & Figma 插件:

   docker build -t mcp/hs-figma .
   
   npm run build:figma-plugin
   

4. 配置 Claude: 编辑 ~/Library/Application Support/Claude/claude_desktop_config.json:

   {
     "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 会在需要时自动启动服务器。 </details>

设计能力

您可以要求 Claude：

• 创建矩形、圆形、文本和框架
• 设计按钮、卡片和其他 UI 组件
• 排列网页和应用程序的布局
• 使用颜色、阴影和效果来设置元素样式
• 将设计导出为图像

故障排除

常见问题

1. Claude 无法连接到 Figma

   • 确保 Figma 插件正在运行
   • 确保您已正确设置 Claude 配置文件
   • 重新启动 Claude 并重试

2. 形状未按预期显示

   • 尝试在您给 Claude 的指令中更具体
   • 对于颜色，请使用常用名称，如“蓝色”或十六进制代码，如“#0000FF”

3. 插件无法工作

   • 确保您已打开 Figma 文件
   • 如果需要，重新安装插件

有关技术故障排除，请参阅下面的“技术问题”部分。

<details> <summary>技术问题</summary>

1. WebSocket 连接失败

   • 检查端口 9000 是否被防火墙阻止
   • 验证服务器和插件配置中的 WS_PORT 设置

2. 插件加载问题

   • 确保 TypeScript 文件已正确编译
   • 检查 Figma 开发者工具中的控制台错误

3. 颜色格式问题

   • 颜色对象应使用 opacity 而不是 alpha ('a') 属性 </details>

示例

尝试询问 Claude：

• "在 Figma 中创建一个简单的应用程序主页，包含标题、英雄区域和页脚"
• "在 Figma 中设计一个用户个人资料卡，包含头像、姓名和简介"
• "在 Figma 中制作一组导航按钮"

许可证

MIT