Figma MCP Server
2025.04.05
2
TypeScript设计工具UI 设计Figma 集成开发效率
Figma MCP Server 是一个连接 Claude 与 Figma 的工具，允许用户通过 Claude 创建和编辑 Figma 设计。它支持创建新设计、编辑现有设计、生成完整的线框图和 UI 元素，并导出设计。
View on GitHub
Overview
基本能力
产品定位
Figma MCP Server 是一个设计工具，旨在通过 Claude 实现与 Figma 的无缝集成，简化设计流程。
核心功能
- 通过 Claude 创建新的 Figma 设计
- 编辑现有的 Figma 设计
- 生成完整的线框图和 UI 元素
- 导出设计
适用场景
- 设计师希望通过自然语言快速生成设计
- 团队协作设计项目
- 快速原型设计和 UI 元素创建
工具列表
- Figma Plugin: 在 Figma 中创建和编辑设计
- Claude: 理解用户的设计请求并生成设计
- Docker: 运行 Figma MCP Server
常见问题解答
- Claude 无法连接到 Figma
- 确保 Figma 插件正在运行
- 检查 Claude 配置文件是否正确设置
- 重启 Claude
- 形状显示不符合预期
- 提供更具体的指令
- 使用常见的颜色名称或十六进制代码
- 插件无法工作
- 确保已打开 Figma 文件
- 重新安装插件
使用教程
使用依赖
- Node.js (>= 16)
- npm
- Docker
- Figma Desktop app
安装教程
- 克隆并安装
git clone <repository-url> cd figma-mcp-server npm install - 构建
npm run build npm run build:figma-plugin - 构建 Docker 镜像和 Figma 插件
docker build -t mcp/hs-figma . npm run build:figma-plugin - 配置 Claude
编辑
~/Library/Application Support/Claude/claude_desktop_config.json: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" } } } }
调试方式
- WebSocket 连接失败
- 检查端口 9000 是否被防火墙阻止
- 验证服务器和插件配置中的 WS_PORT 设置
- 插件加载问题
- 确保 TypeScript 文件正确编译
- 检查 Figma 开发者工具中的控制台错误
- 颜色格式问题
- 颜色对象应使用 opacity 而不是 alpha ('a') 属性