🚀 Figma 模型上下文协议 (MCP) 服务器
Figma MCP 服务器是一款用于与 Figma 进行交互的工具，支持与 Claude 集成。它能实现与 Figma 的深度集成，提供强大的设计协作能力，还能与 Claude 桌面端无缝连接，且所有工具输入都经过严格验证，同时提供详细的错误信息和状态码。
🚀 快速开始
Figma MCP 服务器可助力用户与 Figma 进行交互，并集成 Claude。下面为你介绍其核心实现和功能：
- 核心实现：支持与 Figma 的深度集成，提供强大的设计协作能力。
- Claude 桌面集成：实现与 Claude 桌面端的无缝连接。
- 工具验证：所有工具输入均经过严格验证。
- 错误处理：提供详细的错误信息和状态码。
✨ 主要特性
核心功能
- 安全认证：仅支持个人访问令牌，未来计划实现 OAuth。
- 速率限制：遵循 Figma API 的速率限制规范。
- 缓存管理：默认缓存 TTL 为 5 分钟，最大缓存条目数为 500。
- 模块解析：支持本地和全局模块分辨率。
工具验证
所有工具输入均使用 Zod 进行严格验证：
const CreateVariablesSchema = z.object({
fileKey: z.string(),
variables: z.array(z.object({
name: z.string(),
type: z.enum(['COLOR', 'FLOAT', 'STRING']),
value: z.string(),
scope: z.enum(['LOCAL', 'ALL_FRAMES'])
}))
});
📦 安装指南
安装步骤
- 克隆仓库：使用 Git 克隆项目。
- 构建项目：运行
npm run build构建 TypeScript 文件。 - 设置环境变量：配置必要的环境变量。
- 启动服务器：执行
node dist/index.js启动 MCP 服务器。
配置示例
# 安装依赖
npm install
# 编译项目
npm run build
# 启动服务器
node dist/index.js --port 3000 --env development
💻 使用示例
基础用法
核心 API
- 启动 MCP 服务器
const server = await startMCPServer({
port: 3000,
env: 'development',
debug: true
});
高级用法
所有工具均使用 Zod 进行输入验证，确保数据正确性。如工具验证部分的代码示例，使用 Zod 对创建变量的输入进行了严格验证。
📚 详细文档
项目状态
已完成的功能
- 核心实现
- 初始化并启动 MCP 服务器。
- 支持与 Figma 的数据交互。
- 集成 Claude 桌面端。
- 提供全面的错误处理机制。
- 潜在功能
- 实现团队级权限管理。
- 支持 OAuth 认证。
- 开发更多设计协作工具。
错误处理
常见错误码
- 403 Forbidden：认证失败或无效令牌。
- 429 Too Many Requests：速率限制 exceeded。
- 400 Bad Request：参数验证失败。
- 500 Internal Server Error：服务器内部错误。
已知问题与限制
API 限制
- 只读操作：当前版本仅支持读取操作。
- 令牌权限：个人访问令牌无写入权限。
- 缓存策略：默认缓存 TTL 为 5 分钟，容量上限为 500 项。
贡献指南
- Fork 仓库：创建自己的代码库副本。
- 创建功能分支：为新功能或修复创建独立分支。
- 提交更改：确保包含详尽的测试用例。
- 提交 Pull Request：合并到主分支。
开发规范
- 遵循 TypeScript 严格模式。
- 使用 ESLint 进行代码检查。
- 采用 Jest 进行单元测试。
- 实现全面的错误处理机制。
故障排除
如需更多调试步骤和解决方案，请参阅 故障排除指南。
常见问题
- JSON 连接错误
- 确保在 Claude 桌面配置中使用绝对路径。
- 确认服务器已成功构建 (
dist/index.js)。 - 验证所有环境变量均已正确设置。
- 认证失败
- 检查令牌是否有效且未过期。
- 确保令牌具备所需权限。
联系方式
如需反馈或技术支持，请联系项目维护者。
📄 许可证
本项目遵循 MIT 许可证，具体内容详见 LICENSE 文件。