Figma Context MCP Tokens

🚀 Figma MCP 服務器指南

本指南旨在幫助您瞭解並使用 Figma MCP 服務器，它提供了獲取 Figma 數據和生成設計令牌等功能，能有效提升您處理 Figma 設計的效率。

🚀 快速開始

📦 安裝指南

安裝依賴

pnpm install

啟動開發服務器

pnpm run dev

✨ 主要特性

獲取 Figma 數據工具 (get_figma_data)

此工具可獲取指定 Figma 文件的信息。

參數:

• fileKey (字符串): 需要獲取信息的 Figma 文件密鑰。
• nodeId (字符串, 可選): 特定節點的 ID。
• depth (數字, 可選): 遍歷節點樹的深度級別。
• extractCssProperties (布爾值, 可選): 是否提取每個節點的詳細 CSS 屬性（默認: true）。

設計令牌生成器 (generate_design_tokens)

該工具能從 Figma 文件中生成設計令牌，並以指定格式導出。

參數:

• fileKey (字符串): 需要處理的 Figma 文件密鑰。
• nodeId (字符串, 可選): 特定節點的 ID。
• depth (數字, 可選): 遍歷節點樹的深度級別。
• format (字符串, 可選): 設計令牌的輸出格式（選項: "css", "scss", "ts", "json"，默認: "css"）。
• outputPath (字符串, 可選): 保存設計令牌的文件路徑。
• prefix (字符串, 可選): 變量名稱的可選前綴（例如: "my-app-"）。

🔧 配置

環境變量

• FIGMA_API_KEY: 您的 Figma API 訪問令牌（必需）
• PORT: 服務器運行的端口（默認: 3333）

命令行參數

• --version: 顯示版本號
• --figma-api-key: 您的 Figma API 訪問令牌
• --port: 服務器運行的端口
• --stdio: 以命令模式運行服務器，而不是默認的 HTTP/SSE 模式
• --help: 顯示幫助菜單

💻 使用示例

連接到 Cursor

啟動服務器

> npx figma-developer-mcp --figma-api-key=<您的 Figma API 令牌>
# 初始化 Figma MCP 服務器在 HTTP 模式下，端口 3333...
# HTTP 服務器監聽於端口 3333
# SSE 終點可用地址: http://localhost:3333/sse
# 消息終點可用地址: http://localhost:3333/messages

將 Cursor 連接到 MCP 服務器

一旦服務器啟動，將 Cursor 連接到 MCP 服務器 在 Cursor 的設置中，位於功能選項卡下。

連接成功後，在開始之前確認 Cursor 顯示有效的連接狀態。如果顯示綠色點且工具可見，則表示正常工作！

開始使用 Composer 處理您的 Figma 設計

一旦 MCP 服務器連接成功，只要 Composer 處於代理模式，您就可以開始在 Cursor 的 Composer 中使用工具。

將鏈接到 Figma 文件的鏈接拖動到 Composer 中，並讓 Cursor 對其執行操作，會自動觸發 get_figma_data 工具。

大多數 Figma 文件都非常龐大，因此您可能需要鏈接到文件中的特定幀或組。通過選擇單個元素後按 CMD + L 可以複製該元素的鏈接。您也可以在右鍵菜單中找到此選項：

一旦擁有一個指定元素的鏈接，您可以將其拖動到 Composer 中，並讓 Cursor 對其執行操作。

檢查響應

為了更輕鬆地檢查來自 MCP 服務器的響應，您可以運行 inspect 命令，啟動 @modelcontextprotocol/inspector 網頁 UI 來觸發工具調用和查看響應：

pnpm inspect
# > figma-mcp@0.1.7 inspect
# > pnpx @modelcontextprotocol/inspector
#
# 開始 MCP 檢查器...
# 代理服務器在端口 3333 上監聽...
#
# 🔍 MCP 檢查器已啟動並運行於 http://localhost:5174

訪問 http://localhost:5174 查看工具調用和響應。

基礎用法

示例 1: 獲取 Figma 文件信息

curl --header "Content-Type: application/json" \
     --request POST \
     --data '{"fileKey":"your_figma_file_key","nodeId":"your_node_id"}' \
     http://localhost:3333/api/get_figma_data

示例 2: 生成設計令牌

curl --header "Content-Type: application/json" \
     --request POST \
     --data '{"fileKey":"your_figma_file_key","nodeId":"your_node_id","depth":2,"format":"scss","outputPath":"./tokens.scss","prefix":"my-app-"}' \
     http://localhost:3333/api/generate_design_tokens

⚠️ 注意事項

⚠️ 重要提示

• 確保服務器運行在正確的端口，並且網絡配置允許外部訪問。
• 使用有效的 Figma API 令牌以獲取完整的功能支持。
• 處理大文件時，可能會出現性能問題，建議優化數據提取和處理邏輯。

📚 詳細文檔

如需更詳細的信息，請參考 Figma MCP 服務器文檔。