金大哥 - TimHolden_figma-mcp-server MCP 详情

article

README

🚀 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

📚 详细文档

配置

设置您的 Figma 访问令牌：

export FIGMA_ACCESS_TOKEN=your_access_token

配置服务器（可选）：
```
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 错误码： | 错误码 | 错误详情 | | ------ | ------ | | -32700 | 解析错误 | | -32600 | 无效请求 | | -32601 | 方法未找到 | | -32602 | 无效参数 | | -32603 | 内部错误 | | 100 | 资源未找到 | | 101 | 资源访问被拒绝 | | 102 | 资源暂时不可用 |

🔧 技术细节

项目结构

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

📄 许可证

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

TimHolden_figma-mcp-server