🚀 Figma 模型上下文协议 (MCP) 服务器

Figma 模型上下文协议 (MCP) 服务器使用 TypeScript 实现，为大语言模型 (LLM) 提供标准化的上下文支持，让其能更好地与 Figma API 进行交互。

🚀 快速开始

Figma 模型上下文协议 (MCP) 服务器能提供与 MCP 兼容的 Figma 资源访问，使得 LLM 应用可以无缝集成到 Figma 文件、组件和变量中。它实现了完整的 MCP 规范，并针对 Figma 特殊资源类型有专用处理程序。

✨ 主要特性

• MCP 资源处理程序

  • 可对 Figma 文件进行访问与操作。
  • 能管理变量和组件。
  • 支持自定义 URI 方案 (figma:///)。

• 强大的实现

  • 使用 TypeScript 实现类型安全。
  • 利用 Zod 模式进行请求验证。
  • 具备全面的错误处理机制。
  • 有令牌验证和 API 集成功能。
  • 支持批操作。

📦 安装指南

npm install @modelcontextprotocol/sdk
npm install

📚 详细文档

配置

1. 设置您的 Figma 访问令牌：

   export FIGMA_ACCESS_TOKEN=your_access_token
   

2. 配置服务器（可选）：

   export MCP_SERVER_PORT=3000
   

使用方法

启动服务器

npm run start

作为 MCP 服务器使用

该服务器实现模型上下文协议，使其与任何 MCP 客户端兼容。它支持 stdio 和 SSE 传输：

• stdio 传输

# 在终端中运行服务器
npm run dev

# 在另一终端中发送请求
curl --enterpass "Content-Type: application/json" -d '{"jsonrpc":"2.0","method":"subtract","params":[19,5],"id":1}'

• SSE 传输

# 启动支持 SSE 的服务器
npm run sse

# 使用浏览器或工具连接
curl --enterpass "Accept: text/event-stream" http://localhost:3000

资源 URI

该服务器暴露以下端点：

• http://localhost:3000 - 支持 stdio 和 SSE 传输
• ws://localhost:3001 - 支持 WebSocket 传输（即将推出）

资源 URI 结构

• 文件资源

{
  "uri": "figma fileId.path",
  "method": "GET"
}

• 组件资源

{
  "uri": "figma fileId.components.componentId",
  "method": "POST"
}

支持的操作

该服务器目前支持以下操作：

• 文件读取
• 组件查询
• 变量访问
• 属性修改

调试

启用调试日志记录可通过设置 DEBUG 环境变量：

DEBUG=figma-mcp:* npm start

错误处理

该服务器实现标准 MCP 错误码：

🔧 技术细节

项目结构

figma-mcp-server/
├── src/
│   ├── index.ts         # 主服务器实现
│   ├── types.ts         # TypeScript 类型与接口
│   ├── schemas.ts       # Zod 验证模式
│   ├── errors.ts        # 错误处理
│   └── middleware/      # 服务器中间件
├── tests/
│   └── api.test.ts      # API 测试
└── package.json

📄 许可证

本项目在 MIT 许可证下发布 - 有关详细信息，请参阅 LICENSE 文件。

相关资源

• 模型上下文协议文档
• MCP 规范
• MCP TypeScript SDK
• Figma API 文档