MCP Figma

🚀 Figma MCP 服務器

Figma MCP 服務器是一個基於 Model Context Protocol (MCP) 的 Figma API 服務器實現，它支持 Figma 插件和小部件集成，為 Figma 開發提供了強大的功能和便捷的操作。

🚀 快速開始

Figma MCP 服務器允許您通過 MCP 與 Figma API 進行交互，支持 Figma 插件和小部件開發。以下是使用該服務器的基本步驟：

# 克隆倉庫
git clone <repository-url>
cd figma-mcp
# 安裝依賴項
bun install
# 構建項目
bun run build
# 運行開發服務器
bun run dev

✨ 主要特性

• MCP 交互：通過 MCP 與 Figma API 進行交互，實現高效通信。
• 插件通信：帶有 WebSocket 服務器，方便與 Figma 插件進行通信。
• 小部件支持：支持 Figma 小部件開發，拓展 Figma 功能。
• 靈活配置：可通過命令行參數配置環境變量，滿足不同需求。
• 豐富工具集：提供豐富的 Figma 操作工具，涵蓋文件、節點、評論等操作。

📦 安裝指南

克隆倉庫

git clone <repository-url>
cd figma-mcp

安裝依賴項

bun install

💻 使用示例

構建項目

bun run build

運行開發服務器

bun run dev

使用命令行參數

支持通過 -e 參數設置環境變量：

bun --watch src/index.ts -e FIGMA_PERSONAL_ACCESS_TOKEN=your_token -e PORT=6000

您也可以使用專用令牌參數：

bun --watch src/index.ts --token your_token

或者其簡寫形式：

bun --watch src/index.ts -t your_token

📚 詳細文檔

配置

環境變量

創建一個 .env 文件並設置以下環境變量：

FIGMA_PERSONAL_ACCESS_TOKEN=your_figma_token
PORT=3001
NODE_ENV=development

獲取 Figma 訪問令牌

1. 登錄到 Figma
2. 轉到賬戶設置 > 個人訪問令牌
3. 創建一個新的訪問令牌
4. 將令牌複製到 .env 文件或通過命令行參數傳遞

在 Cursor 中配置 MCP

將以下內容添加到 .cursor/mcp.json 文件中：

{
  "Figma MCP": {
    "command": "bun",
    "args": [
      "--watch",
      "/path/to/figma-mcp/src/index.ts",
      "-e",
      "FIGMA_PERSONAL_ACCESS_TOKEN=your_token_here",
      "-e",
      "PORT=6000"
    ]
  }
}

可用工具

服務器提供了以下 Figma 操作工具：

• 文件操作：獲取文件、版本等。
• 節點操作：獲取和操作 Figma 節點。
• 評論操作：管理 Figma 文件中的評論。
• 圖像操作：將 Figma 元素導出為圖像。
• 搜索功能：在 Figma 文件中搜索內容。
• 組件操作：管理 Figma 組件。
• 畫布操作：創建矩形、圓、文本等。
• 小部件操作：管理 Figma 小部件。

Figma 插件開發

插件簡介

Figma 插件是用於擴展 Figma 功能的定製工具，可實現工作流自動化、添加新功能或集成外部服務。以下是如何使用 Figma 插件的示例：

1. 安裝插件：在 Figma 賬戶中下載並安裝所需的插件。
2. 配置插件：根據插件要求設置必要的參數和權限。
3. 使用插件：在設計項目中調用插件功能，如自動佈局、數據綁定等。

插件開發步驟

1. 創建新插件：

   • 打開 Figma 賬戶，進入插件市場。
   • 點擊“創建插件”按鈕，開始構建新的插件項目。

2. 編寫代碼：

   • 使用 JavaScript 或 TypeScript 編寫插件邏輯。
   • 定義插件功能，如事件監聽、數據處理等。

3. 測試插件：

   • 在 Figma 中打開測試文件，加載開發中的插件。
   • 測試各項功能，確保插件按預期工作。

4. 發佈插件：

   • 完成測試後，填寫插件描述和使用說明。
   • 提交插件到 Figma 市場，供其他用戶下載使用。

在 Figma 中加載插件

1. 打開 Figma 應用，進入您要使用的項目。
2. 點擊右上角的“插件”圖標，選擇“從我的電腦加載”或“從 URL 加載”。
3. 選擇已下載的插件文件或輸入插件鏈接，點擊“打開”。

開發

構建小部件和插件

# 構建 widget
bun run build-widget
# 構建 plugin
bun run build-plugin

運行開發模式

# 啟動 widget 開發服務器
bun run dev-widget
# 啟動 plugin 開發服務器
bun run dev-plugin

📄 許可證

本項目採用 MIT 許可證。