Figma MCP：功能與設定方式

Figma MCP 是一個連接器，讓 AI 助理能直接讀取你的 Figma 檔案：框架、圖層、元件、間距、色彩樣式和文字，而不是從你貼上的螢幕截圖中猜測。它建構於 MCP 之上；MCP 是 Anthropic 發布的開放標準，讓助理能透過單一共通介面與外部工具通訊。Figma 提供官方伺服器，社群也建立了數個其他伺服器。設定方式是在你的 AI 用戶端加入一小段設定，並授權存取你的 Figma 帳戶；根據你編輯設定檔的熟悉程度，可能需要十多分鐘到一個下午。如果這句話聽起來已經像是糟糕的一個下午，請繼續往下看，本頁後面有更簡單的做法。

Figma MCP 到底是什麼？

MCP 是一項標準，而不是產品。它定義了 AI 助理如何向外部系統請求資訊，以及該系統如何回應。任何支援這項標準的工具都稱為 MCP 伺服器，而伺服器其實就像轉接器：一端與 Figma 通訊，另一端則以 Claude 已經理解的格式與 Claude 通訊。

所以，「Figma MCP」是指位於你的助理與設計檔案之間的伺服器。它啟動後，Claude 不再依賴扁平的圖片，而是開始根據結構運作。它能看出按鈕是元件實例、內距是 16 而不是 15，也能看出文字樣式名稱是 內文/一般 而不是「比較小的灰色那個」。

Figma 有一個針對設計轉程式碼工作流程的官方伺服器，也有透過 Figma 公開 API 讀取檔案的社群實作。兩者在驗證方式以及能公開檔案內容的程度上有所不同，但從 Claude 的角度來看，它們看起來都一樣：當你的請求需要時，Claude 可以呼叫的一系列工具。如果你想先了解更完整的背景，我們在 什麼是 MCP，以及它為何存在 一文中，以淺白的英文進行了解說。

Figma MCP 實際上能讓 Claude 做什麼？

有趣的地方不在於「Claude 能看見你的檔案」，而在於哪些工作不再需要手動完成。

• 將選取的框架轉換成符合檔案的前端程式碼。不是根據圖片做出的粗略近似，而是直接採用設計本身的間距、層級結構和元件名稱。你仍然需要審查，但不用再重新輸入數值。
• 從檔案中擷取設計代碼。色彩樣式、字級比例、間距級距、圓角半徑，並以你的程式碼庫所使用的格式匯出為變數。
• 針對檔案本身的系統進行稽核。找出哪些圖層使用硬編碼的十六進位色碼，而不是樣式；哪些框架使用其他地方都不存在的間距值；哪些元件被解除連結後又悄悄編輯過。
• 撰寫交接備註和規格。根據實際畫框，而不是憑記憶，描述各種狀態、邊界情況、空白狀態，以及發生錯誤時的處理方式。
• 在情境中檢視 UX 文案。依照流程順序讀取每個字串，這樣你就能發現同一個動作被用了三種不同的說法。
• 回答大型檔案相關的問題。這個元件在哪裡使用？這個分支變更了什麼？哪些畫面仍在引用舊標誌。

所有這些工具背後的模式都是一樣的：Figma MCP 消除了設計與後續所有工作之間的複製貼上步驟。這確實很實用，但這也是它全部的效益。它不會替你做設計決策。

如何設定 Figma MCP 伺服器？

不同伺服器和用戶端的具體設定各不相同，而且變動頻繁，照抄部落格文章中的指令，很可能會浪費你二十分鐘。流程的架構是穩定的，所以請先了解這個架構。

1. 選擇伺服器。如果你的目標是在編輯器中將設計轉換為程式碼，請先從官方 Figma 伺服器開始。如果你需要在不執行桌面應用程式的情況下，透過 API 讀取檔案，則可以看看社群伺服器。兩者都列在公開的 MCP 伺服器目錄中。
2. 處理存取權限。官方工具通常會使用你已登入的 Figma 工作階段，並在應用程式內提供啟用設定。社群伺服器通常會要求你在 Figma 帳戶設定中產生個人存取權杖。請把這個權杖當成密碼：它可以讀取你能讀取的所有內容。
3. 將伺服器加入用戶端的 MCP 設定。Claude Desktop、Claude Code 和大多數支援 AI 的編輯器，都會讀取一個列出可用伺服器的設定檔，其中包含啟動各伺服器的指令，以及它所需的任何憑證。你只需新增一個項目。
4. 重新啟動用戶端。幾乎每一則「無法運作」的回報，都是因為修改設定後從未重新啟動用戶端。
5. 確認連線。你的用戶端會顯示已連線的伺服器，以及每個伺服器提供的工具。如果工具清單已經出現，就代表連線設定完成。
6. 給它一些可供查看的內容。大多數工作流程都預期你先在 Figma 中選取一個畫框，或貼上該畫框的連結，然後提出問題。Claude 只會讀取你指定的內容。

第一次嘗試時，有兩件事很容易讓人卡住。透過 Figma 桌面應用程式運作的伺服器，需要開啟應用程式並載入檔案，所以如果你把它關掉，就不會有任何反應。而且大多數伺服器都偏重讀取：它們更擅長告訴你檔案裡有什麼，而不是修改檔案。

Figma MCP 有哪些實際限制？

在你花掉整個下午之前，這點值得先知道。

• 你需要支援 MCP 的用戶端。這可以是桌面應用程式、編輯器或終端機。免費方案中的瀏覽器聊天視窗無法做到。
• 實務上，存取權不是全部就是沒有。個人 Token 通常可以存取你的帳戶能存取的每個檔案。如果你的帳戶位於共用組織中，請在產生 Token 前先考慮這一點。
• 內容移動時就會失效。API 會變更，伺服器會重寫，客戶端更新也可能改變設定格式。任何建立在其上的內容都需要偶爾維護。
• 大型檔案會消耗上下文。一個包含 400 個圖層的畫面會產生大量結構化資料。指定單一畫面運作良好，但指定整個檔案通常不行。
• 混亂的檔案會產生混亂的輸出。如果你的圖層名稱是 Frame 217，而且一半的樣式都已脫離連結，產生的程式碼也會繼承這些問題。連接器會讀取現有內容，不會替你整理。
• 它提供存取權，而不是判斷力。Claude 現在可以看見你的設計了。但它是否會像資深設計師一樣評估該設計，則是完全獨立的問題，而那才是下一步值得解決的問題。

如果 MCP 的設定超出你的需求呢？

這裡有個區分能省下你大量時間。MCP 控制 Claude 能存取的內容。至於 Claude 取得這些內容後能運作得多好，MCP 完全沒有說明。這是兩個不同的問題，而多數設計團隊遇到的是後者，不是前者。

如果你真正想要的是讓 Claude 提供一份完善的設計評析、研究計畫，或是設計系統架構師會核准的元件 API，那麼你根本不需要連接器。你需要的是讓 Claude 以該專業人士的方式工作。這就是 Skill 檔案的作用：一份只需上傳一次的簡短 Markdown 文件，賦予 Claude 一個角色、一套方法，以及一項輸出標準。安裝大約需要三分鐘，任何方案都能使用，無論是否搭配 MCP。以下幾項設計 Skill 目前免費，你可以先測試這個想法，再決定是否花費任何費用。

實務上最有效的搭配：MCP 負責讀取，Skill 負責思考。Claude 從你的檔案中擷取實際值，接著套用方法處理，而不是臨時即興發揮。

免費合集 中總共有 32 個免費 Skills，而更完整的設計系列則位於創意、內容與設計 Skills。如果你想逐步了解安裝流程，請參閱如何安裝 Claude Skill。

Figma MCP：常見問題

Figma MCP 免費嗎？

這項協定是開放標準，而伺服器本身通常可以免費安裝。你需要的是一個能存取檔案的 Figma 帳戶，以及支援 MCP 的 AI 用戶端。有些 AI 用戶端需要付費方案才能使用值得採用這項功能的相關功能，因此費用主要落在用戶端，而不是連接器上。

Claude 能透過 MCP 編輯我的 Figma 檔案嗎？

除非你選擇的特定伺服器另有說明，否則請先假設不行。這些連接器大多是為讀取而設計：擷取結構、數值和內容。寫入權限較少見，也更不穩定；你應該在複製檔案上測試，而不是直接在正式工作檔案上測試。

Figma MCP 能與 Claude Code 搭配使用嗎？

需要，因為 Claude Code 一般支援 MCP 伺服器，這正是它成為設計轉程式碼工作熱門搭配的原因。它會在一側讀取畫面框架，在另一側撰寫元件，而且是在同一個工作階段中完成。Claude Desktop 和大多數具備 AI 功能的編輯器也是如此。

如果我已經設定好 Figma MCP，還需要設計 Skills 嗎？

它們回答的是不同的問題。MCP 決定 Claude 能看見什麼；Skills 決定 Claude 如何處理它看見的內容，這也是為什麼兩者可以疊加，而不是互相競爭。我們在 Claude Skills 與 MCP 中直接比較了這兩種方法。