Figma MCP：功能與設定方式

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

實際上，Figma MCP 是什麼？

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

所以，「Figma MCP」是連接你的助理與設計檔案的伺服器的簡稱。啟動後，Claude 不再只根據扁平圖片工作，而是開始依據結構工作。它能看出按鈕是元件實例、內距是 16 而不是 15，還能看出文字樣式名稱是 body/regular 而不是「那個比較小的灰色版本」。

Figma 有一個專為設計轉程式碼工作流程打造的官方伺服器，也有透過 Figma 公開 API 讀取檔案的社群實作。它們在驗證方式以及能提供檔案多少內容方面有所不同，但從 Claude 的角度來看，它們看起來都一樣：當你的要求需要時，Claude 可以呼叫的一系列可用工具。如果你想先了解更廣泛的背景，我們在 MCP 是什麼，以及它為何存在 上撰寫了一篇白話解說。

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

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

• 將選取的框架轉換成與檔案相符的前端程式碼。不是從圖片粗略推測，而是直接取用設計本身的間距、層級結構與元件名稱。你仍然需要審查程式碼，也不必再重新輸入數值。
• 從檔案中提取設計 Token。色彩樣式、字級比例、間距級距、圓角半徑，並依照你的程式碼庫所使用的格式匯出為變數。
• 依據檔案自身的系統進行稽核。哪些圖層使用了硬編碼的十六進位色碼，而不是樣式；哪些框架使用了其他地方都不存在的間距值；哪些元件被分離後悄悄編輯過。
• 撰寫交接備註和規格。根據實際畫面框架，而不是憑記憶，描述各種狀態、例外情況、空白狀態，以及發生錯誤時的處理方式。
• 在情境中檢查 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 存取之後能做得多好。這是兩個不同的問題，而大多數設計團隊遇到的是第二個問題，而不是第一個。

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

設計師，而不是連接器

Denholm - UX/UI 產品設計師 AI Skill

免費

這個 Skill

流程、狀態、層級與互動邏輯，以產品設計師會採用的方式進行評論：這個畫面的用途是什麼、缺少什麼、使用者出錯時會怎麼做。貼上畫面或描述畫面即可，不需要連接器。

查看 Denholm →

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

針對 Token 和元件的部分

Vashti - 設計系統架構師 AI Skill

$29

這個 Skill

Token 命名、元件 API、變體結構，以及某個項目何時值得納入系統的規則。這正是位於 Figma 連接器交給你的原始資料之上的判斷層。

查看 Vashti →

在開始設計任何東西之前

Melisande - UX 研究員 AI Skill

免費

這個 Skill

研究計畫、非誘導式訪談腳本，以及將逐字稿轉化為團隊能採取行動的研究發現的方法。目前也免費，讓你能以低成本測試 Skills 是否真的會改變輸出。

查看 Melisande →

免費收藏中共有 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，還需要設計 Skill 嗎？

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