Figma MCP Server - MCP服务，MCP服务器，MCP教程

基本能力

产品定位

Figma MCP Server 是一个设计工具，旨在通过 Claude 实现与 Figma 的无缝集成，简化设计流程。

核心功能

• 通过 Claude 创建新的 Figma 设计
• 编辑现有的 Figma 设计
• 生成完整的线框图和 UI 元素
• 导出设计

适用场景

• 设计师希望通过自然语言快速生成设计
• 团队协作设计项目
• 快速原型设计和 UI 元素创建

工具列表

• Figma Plugin: 在 Figma 中创建和编辑设计
• Claude: 理解用户的设计请求并生成设计
• Docker: 运行 Figma MCP Server

常见问题解答

1. Claude 无法连接到 Figma
2. 确保 Figma 插件正在运行
3. 检查 Claude 配置文件是否正确设置
4. 重启 Claude
5. 形状显示不符合预期
6. 提供更具体的指令
7. 使用常见的颜色名称或十六进制代码
8. 插件无法工作
9. 确保已打开 Figma 文件
10. 重新安装插件

使用教程

使用依赖

• Node.js (>= 16)
• npm
• Docker
• Figma Desktop app

安装教程

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:
   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"
}
}
}
}

调试方式

1. WebSocket 连接失败
2. 检查端口 9000 是否被防火墙阻止
3. 验证服务器和插件配置中的 WS_PORT 设置
4. 插件加载问题
5. 确保 TypeScript 文件正确编译
6. 检查 Figma 开发者工具中的控制台错误
7. 颜色格式问题
8. 颜色对象应使用 opacity 而不是 alpha ('a') 属性