MCP Figma AI Bridge 连接报错解决方案

参考https://docs.trae.ai/ide/model-context-protocol配置mcp Figma AI Bridge，发现按照步骤来的，启动一直失败
​​​​

问题描述​​搜索

在尝试使用 MCP Figma AI Bridge 时遇到以下错误：

2025-09-03T11:08:54.778+08:00 [error] [MCPServer:mcp.config.usrlocalmcp.Figma AI Bridge] MCPClient#onClose node:internal/modules/cjs/loader:1212
const err = new Error(message);
^
Error: Cannot find module './db.json'
Require stack:
– C:\\Users\\15580\\AppData\\Local\\npm-cache\\_npx\\e05028111420be70\\node_modules\\mime-db\\index.js
– C:\\Users\\15580\\AppData\\Local\\npm-cache\\_npx\\e05028111420be70\\node_modules\\mime-types\\index.js
– C:\\Users\\15580\\AppData\\Local\\npm-cache\\_npx\\e05028111420be70\\node_modules\\accepts\\index.js

问题分析

这个错误是由于以下原因导致的：

解决步骤

1. 清理缓存

首先清理 npm 和 npx 缓存：

# 清理 npm 缓存
npm cache clean –force

# 清理 npx 缓存
npx clear-npx-cache

2. 重新安装项目依赖

npm install

3. 安装正确的 MCP Figma AI Bridge 包

通过搜索发现正确的包名是 figment-mcp：

# 全局安装 figment-mcp，这个很重要
npm install -g figment-mcp

注意：安装时可能会出现 Node.js 版本警告，但不影响使用：

EBADENGINE Unsupported engine {
package: '@create-figma-plugin/ui@3.4.1',
required: { node: '>=22' },
current: { node: 'v20.19.3', npm: '10.9.2' }
}

4. 配置 MCP 服务器

运行自动配置命令：

figment-setup

这个命令会：

• 创建 .figma-exports 目录
• 更新 Cursor、Claude Desktop 和 Continue 的 MCP 配置
• 创建通用 MCP 配置文件

5. 启动服务

启动 Bridge 服务器

figment-bridge

服务器将运行在：

• 地址：http://localhost:8473
• 健康检查：http://localhost:8473/health
• 调试接口：http://localhost:8473/debug

启动 MCP 服务器

node "C:\\software\\nvm\\nodejs\\node_modules\\figment-mcp\\dist\\mcp-server.js"

配置文件位置

MCP 配置文件

• 路径：C:\\Users\\15580\\.config\\claude\\mcp-servers\\figma-figment-bridge.json
• 内容：

{
"command": "node",
"args": ["C:\\\\software\\\\nvm\\\\nodejs\\\\node_modules\\\\figment-mcp\\\\dist\\\\mcp-server.js"],
"env": {
"FIGMA_EXPORT_DIR": "C:\\\\Users\\\\15580\\\\.figma-exports"
}
}

导出目录

• 路径：C:\\Users\\15580\\.figma-exports

验证安装

1. 检查服务器健康状态

curl http://localhost:8473/health

期望返回：

{
"status": "healthy",
"port": 8473,
"exportDir": "C:\\\\Users\\\\15580\\\\.figma-exports",
"timestamp": "2024-12-19T07:47:32.043Z"
}

2. 检查配置文件

# 检查配置文件是否存在
Test-Path "C:\\Users\\15580\\.config\\claude\\mcp-servers\\figma-figment-bridge.json"

# 查看配置文件内容
Get-Content "C:\\Users\\15580\\.config\\claude\\mcp-servers\\figma-figment-bridge.json"

使用方法

1. 安装 Figma 插件

在 Figma 中搜索并安装 “Figment” 插件。

2. 导出设计

3. 在 AI 助手中使用

在 Cursor、Claude Desktop 或 Continue 中，以下 MCP 工具将自动可用：

• import_figma_figment – 导入最新的 figment 数据
• extract_figma_design – 从组件中提取设计数据
• generate_code_from_blueprint – 从蓝图生成代码
• analyze_design_system – 分析设计系统
• generate_component_code – 为特定组件生成代码

故障排除

常见问题

重启服务

如果需要重启服务，按以下顺序操作：

解决好之后效果

下面是Trae提供的解决方案的过程

总结

通过以上步骤，成功解决了 MCP Figma AI Bridge 的连接问题：

✅ 问题根因：npm 缓存损坏和包名错误
✅ 解决方案：清理缓存 + 安装正确包 + 自动配置
✅ 服务状态：Bridge 服务器和 MCP 服务器均正常运行
✅ 配置完成：MCP 配置文件已创建并正确配置
✅ 功能验证：健康检查通过，MCP 工具可用

现在可以在 Figma 中导出设计，并在 AI 助手中使用相关的 MCP 工具进行代码生成和设计分析。

创建时间：2024-12-19
适用版本：figment-mcp v1.0.0+
测试环境：Windows 11, Node.js v20.19.3, npm v10.9.2