Figma

Figma MCP 服务

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

功能介绍

此工具将 Claude 与 Figma 连接起来，让你可以：

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

工作原理

1. Claude：理解你的设计需求
2. Figma 插件：在 Figma 中创建设计
3. 服务：将 Claude 连接到 Figma（自动运行）

快速入门指南

面向用户

1. 安装 Figma 插件：

   • 打开 Figma 桌面应用
   • 前往 Plugins > Development > Import plugin from manifest
   • 选择此项目中的 figma-plugin/manifest.json 文件

2. 在 Claude 配置中配置 Figma MCP 服务：

   • 检查系统上的 MCP 配置 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. Use with Claude:

   • Open Claude
   • The Figma tool should appear in Claude's tools menu
   • Ask Claude to create designs in Figma, like:
     • "Create a login screen in Figma"
     • "Design a blue button with rounded corners in Figma"
     • "Make a simple landing page layout in Figma"

For Technical Setup (IT/Developers)

Click to expand technical setup instructions

Prerequisites

• Node.js (>= 16)
• npm
• Docker (installed on the machine running Claude)
• Figma Desktop app

Installation

1. Clone and Install:

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

2. Build:

   npm run build
   npm run build:figma-plugin
   

3. Build Docker Image & Figma Plugin:

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

4. Configure Claude: Edit ~/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 会在需要时自动启动服务。

设计能力

你可以让 Claude：

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

故障排除

常见问题

1. Claude 无法连接到 Figma

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

2. 形状显示不符合预期

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

3. 插件无法运行

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

如需技术故障排除，请参阅下方的“技术问题”部分。

技术问题

1. WebSocket 连接失败

   • 检查防火墙是否阻止了端口 9000
   • 确认服务和插件配置中的 WS_PORT 设置

2. 插件加载问题

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

3. 颜色格式问题

   • 颜色对象应使用 opacity，而不是 alpha（'a'）属性

示例

尝试向 Claude 提出以下请求：

• “在 Figma 中创建一个简单的应用首页，包含页眉、主视觉区域和页脚”
• “在 Figma 中设计一张用户资料卡，包含头像、姓名和简介”
• “在 Figma 中制作一组导航按钮”

许可证

MIT