Timholden Figma MCP Server

🚀 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 文檔