Framelink Figma MCP

功能介紹

Framelink Figma MCP 伺服器是一個專為 AI 程式碼工具（例如 Cursor）設計的橋接工具，它讓您的代理（agent）能夠直接存取 Figma 設計檔案，並將其轉譯為程式碼。這比單純貼上螢幕截圖等方式更準確、更高效。

透過 MCP（Model Context Protocol）伺服器，Cursor 能從 Figma 取得簡化後的設計元數據，例如版面配置與樣式，並生成對應的程式碼。這不僅大幅提升 AI 模型的準確度，也提升了回應的關聯性與品質。

• 一次性完成設計實作：可直接在任意框架中生成可用 UI 元件。
• 無需手動轉譯設計：省去工程師對設計稿「讀圖寫碼」的時間。
• 多語言支援：支援 English、韓文、日文、簡體中文等語系。
• MIT 授權：自由使用與修改。
• 社群支援：可加入 Discord 討論、追蹤 Twitter。

設定及安裝

步驟一：取得 Figma 存取權杖（Access Token）

在開始使用 MCP 前，您需要先產生一組 Figma API 權杖：

1. 開啟 Figma 首頁，點選左上角個人頭像，選擇「Settings」。
2. 點選「Security」分頁。
3. 捲動到「Personal access tokens」區塊，點選「Generate new token」。
4. 為此權杖命名，並確保您啟用「File content」與「Dev resources」的讀取權限。
5. 點選「Generate token」，將出現的 token 儲存下來。

詳細教學可參考 Figma Access Token 說明

步驟二：在 IDE 中加入 Framelink Figma MCP 設定

大多數現代 IDE 都支援以 JSON 格式設定 MCP 伺服器。以下提供適用於 macOS/Linux 與 Windows 的設定範例：

macOS / Linux

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}

Windows

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}

記得將 "YOUR-KEY" 替換為您剛才產生的 Figma API token。

步驟三：實作您的第一個設計

複製 Figma 框架或群組的連結

由於 Figma 設計檔案的資料量龐大，MCP 伺服器會自動壓縮資料，減少約 90%。即便如此，建議您一次實作「一個區塊」，確保輸出品質最佳。

在 Figma 中：

1. 右鍵點選您要實作的 Frame 或 Group。
2. 選擇「Copy/Paste as → Copy link to selection」。

在 IDE 中貼上連結並發送請求

將上述連結貼到 IDE 的對話介面中（如 Cursor 的 Agent 模式），輸入簡單請求：

實作這個 Figma frame。

系統會呼叫 MCP 的 get_figma_data 函式，取得設計資料並自動產出對應的程式碼。

補充上下文說明（如：使用目的、期望技術堆疊等）有助於提升輸出品質。

最佳實踐指南

雖然 MCP 伺服器能大幅簡化從設計到程式碼的轉換流程，但 Figma 的檔案結構與命名方式仍會直接影響 AI 的理解效果。

請遵循以下設計原則：

• 使用 Auto Layout（自動排版）：
  MCP 尚未完全支援浮動（floating）或絕對定位（absolute positioning）元素，使用 Auto Layout 可讓排版更清楚易讀。
• 為 Frame 與 Group 命名：
  有意義的命名可幫助 AI 建立語意上的對應，避免出現一堆 div-123 或 group-456 的結構。
• 專業小技巧：
  Figma 內建 AI 命名工具可快速為元件自動命名，請善加利用！

在編輯器中的操作技巧

即使 MCP 幫你處理了設計資料的轉換，你仍需提供足夠的上下文，才能讓 AI 模型生成最符合需求的程式碼。

編輯器端的提示最佳化方式：

• 說明你在使用什麼技術堆疊：
  讓 AI 知道是否要使用 Tailwind CSS、React、Vue 等。
• 引用程式碼中的關鍵檔案：
  例如：「請依照 Button.tsx 的風格來實作這個 UI」，有助於維持一致性。
• 除了貼 Figma 連結，也加上文字描述：
  描述這個區塊的功能、使用者互動方式、期望行為等，可提升準確性。
• 管理上下文大小：
  與其貼整份 Figma 檔案，建議只貼 Frame 或 Group 的連結，避免 AI 過載無關資訊。

應用建議總結