Figma MCP 要錢嗎？免費帳號能用嗎？

能用，但次數很少。官方文件寫，免費的 Starter 方案一個月最多 20 次工具呼叫；付費方案的 View、Collab 座位也是一個月 20 次；要 Dev 或 Full 座位才是每天 200 次起，Enterprise 每天 600 次。Professional 方案的 Dev 座位，定價頁選年繳時顯示每月 12 美元，Full 座位 16 美元（10 月 14 日看的）。

Figma MCP 的遠端版和桌面版差在哪？

遠端版放在 Figma 那邊，網址是 https://mcp.figma.com/mcp，不用裝桌面 App，要用 Figma 帳號登入，功能最完整，官方強烈建議用這個。桌面版要開 Figma 桌面 App、在 Dev Mode 裡啟用，跑在你電腦的 http://127.0.0.1:3845/mcp，可以直接用你在 Figma 裡選取的圖層；寫入畫布、把網頁畫面抓進 Figma 這些工具，官方的清單標示只有遠端版有。

加了 Figma MCP，Claude Code 卻說沒有 Figma 的工具？

多半是還沒登入。我實測不登入時，Claude Code 回報這台伺服器的狀態是 needs-auth，Figma 的工具一個都沒有，問它也只回「沒有」。打 /mcp，選 figma，選 Authenticate，在跳出來的瀏覽器按 Allow Access，回到 Claude Code 看到連線成功就好了。

Figma MCP 產生的程式碼會用我專案裡的元件嗎？

預設產出的是 React 加 Tailwind，可以在提示裡要它改成 Vue、純 HTML 加 CSS 或 iOS，或指定用某個資料夾裡的元件。官方建議設定 Code Connect，把 Figma 的元件對到你程式裡的元件，產生的程式碼會盡量重用它們。產出的品質我沒有實測。

Figma MCP 教學：讓 AI 讀設計稿寫程式，Claude Code 怎麼接、免費版能用幾次

設計師在 Figma 畫好畫面，工程師要照著做成網頁。以前的做法是打開 Dev Mode，一個一個看間距、顏色、字級，再自己寫。現在很多人用 Claude Code 或 Cursor 寫程式，自然會想：能不能把 Figma 的連結直接丟給 AI，讓它自己去看？

Figma MCP 就是做這件事的。它是 Figma 官方的 MCP 伺服器，接上之後，AI 工具多了一組跟 Figma 有關的工具，可以讀設計稿，也能反過來在 Figma 裡畫東西。

這篇照 Figma 的官方文件整理：它能做什麼、遠端版和桌面版怎麼接、各方案能用幾次。先說清楚：我沒有 Figma 帳號，登入之後的部分全部依官方文件；我實際做的只有一件事，就是不登入直接連上去，看 Claude Code 會停在哪一步。MCP 本身是什麼，在 MCP 是什麼。

Figma MCP 能做什麼

它的工具分兩個方向。

第一個方向是從設計到程式。你在 Figma 裡複製某個 frame 或圖層的連結，請 AI「照這個連結的設計做出來」。官方文件特別說明，AI 不會真的去打開那個網址，它是從連結裡取出圖層的編號（node-id），再向 Figma 要這一塊的設計資訊。

這一類最主要的工具叫 get_design_context，預設產出 React 加 Tailwind 的程式碼，你可以在提示裡要它改成 Vue、純 HTML 加 CSS 或 iOS，也可以叫它用你專案裡某個資料夾的元件。設計很大的時候，官方建議先用 get_metadata，它只回圖層的編號、名稱、類型、位置和大小，讓 AI 先看清楚結構，再挑一小塊要完整的資訊。另外還有截圖的 get_screenshot，以及拿出顏色、間距、字型這些變數的 get_variable_defs。

第二個方向是從程式到設計，官方叫「寫入畫布」。AI 可以在 Figma 裡建立和修改 frame、元件、變數、auto layout，或在 FigJam 白板上貼便利貼、拉連接線。通用的寫入工具叫 use_figma；generate_diagram 可以用一句話或 Mermaid 語法在 FigJam 生成流程圖、甘特圖、ERD；在部分用戶端，還能把你正在跑的網頁畫面抓進 Figma，變成可以編輯的設計圖層。

官方的工具清單裡，讀取類有 18 個、寫入類有 12 個，另外還有 Weave 的一系列工具和一個產生規則檔的提示。不用全部記，平常會碰到的就是上面那幾個。

遠端版和桌面版

Figma MCP 有兩種接法，官方的立場很明確：強烈建議用遠端版。

遠端版放在 Figma 那邊，網址是 https://mcp.figma.com/mcp，不用裝 Figma 桌面 App，接上之後要用你的 Figma 帳號登入授權。功能最完整，寫入畫布、把網頁畫面抓進 Figma、查目前登入帳號的 whoami，在工具清單上都標成只有遠端版有。

桌面版跑在 Figma 桌面 App 裡。打開一個 Design 檔，切到 Dev Mode（快捷鍵 Shift+D），在檢查面板的 MCP server 區塊按 Enable desktop MCP server，它就會在你電腦的 http://127.0.0.1:3845/mcp 開一個伺服器。桌面版多一種用法：在 Figma 裡選取一個 frame，直接跟 AI 說「做出我目前選的這個」，不用貼連結。

還有一個限制兩種都適用：只有列在 Figma MCP Catalog 上的用戶端能連，例如 VS Code、Cursor、Claude Code、Codex。想接其他用戶端的開發者，要先排候補名單。

Claude Code 怎麼接

官方建議裝 Claude Code 的 Figma 外掛（plugin），裡面包含 MCP 的設定和幾個常用流程的 Skills：

claude plugin install \
  figma@claude-plugins-official

也可以只加 MCP 伺服器：

claude mcp add --transport http \
  figma https://mcp.figma.com/mcp

這樣加，預設只在目前這個專案有效；想每個專案都能用，再加上 --scope user。

加完之後重開 Claude Code，打 /mcp，選 figma，選 Authenticate，瀏覽器會跳到 Figma 讓你按 Allow Access。回到 Claude Code 看到 Authentication successful. Connected to figma，就接好了。

用桌面版的話，網址換成你電腦上的：

claude mcp add --transport http \
  figma-desktop \
  http://127.0.0.1:3845/mcp

其他工具：Codex 是 codex mcp add figma --url https://mcp.figma.com/mcp，加完會要你登入；Cursor 和 VS Code 官方都有一鍵安裝的連結。官方文件提醒，VS Code 要你的帳號開了 GitHub Copilot 才能用 MCP。Claude Code 加 MCP 伺服器的基本操作，像是 scope 是什麼、/mcp 上的各種狀態，在 Claude Code MCP 是什麼。

實測：不登入連上去，會停在哪裡

我沒有 Figma 帳號，所以沒辦法示範讀設計稿。我做的是另一件事：照上面的網址連過去，但不登入，看每一層回什麼。

先不經過 AI。我用 curl 照 MCP 的規格，送出連線時的第一個請求（初始化）。伺服器回 HTTP 401，內容只有一個字 Unauthorized。重點在回應的標頭：它寫了要用什麼方式登入、去哪裡登入，授權伺服器是 api.figma.com，要的權限叫 mcp:connect。這是 MCP 規格裡標準的做法，Claude Code 這類用戶端看到這個標頭，就知道要帶你去走登入流程。

標頭裡還有一個小地方：它允許用戶端讀取 X-Figma-Plan-Tier、X-Figma-Rate-Limit-Type、X-Figma-Upgrade-Link 和 Retry-After 這幾個標頭。從名稱看，次數用完的時候，它會告訴你是哪個方案、撞到哪一種上限、去哪裡升級、多久之後再試。這是我從名稱推的，我沒有實際撞到上限。

接著換 Claude Code。我用非互動模式，只接這一台 Figma MCP（設定檔只在那一次有效，沒有改到我自己的設定），問它：

你現在可以用哪些 figma 的工具？只列名稱，沒有就說沒有。

啟動時，Claude Code 回報這台伺服器的狀態是 needs-auth，也就是需要登入；它拿到的 Figma 工具是 0 個。回答只有兩個字：「沒有。」花了 3.4 秒。

這個結果很平淡，但能幫你排除一種常見的狀況：加完 Figma MCP，叫 AI 去讀設計稿，它卻好像什麼都沒做，或自己猜了一個畫面出來。這時先打 /mcp 看狀態。還是需要登入的話，AI 手上根本沒有 Figma 的工具，不可能讀到你的設計稿。

各方案能用幾次

這是 Figma MCP 最容易卡住的地方。免費帳號也能用，但次數跟你的方案和座位有關。以下是官方文件和定價頁 10 月 14 日的寫法。

免費的 Starter 方案，不管什麼座位，一個月最多 20 次。

付費方案要看座位。View、Collab 座位一樣是一個月 20 次；Dev 或 Full 座位才改成按天算：Professional 每天 200 次、每分鐘 10 次，Organization 每天 200 次、每分鐘 15 次，Enterprise 每天 600 次、每分鐘 20 次。教育方案跟 Professional 的 Dev、Full 座位一樣。

算的是 AI 呼叫工具的次數，不是你問了幾句。照工具的設計，AI 做一個畫面可能先看結構、再拿設計資訊、再截圖，一個要求就可能用掉好幾次。限制只算從 Figma 讀資料的工具，官方列出不算次數的有 add_code_connect_map、create_new_file、whoami，把網頁畫面抓進 Figma 的 generate_figma_design 也不算。官方也寫了保留調整的權利。

價格方面，Professional 方案的 Dev 座位，定價頁選年繳時顯示每月 12 美元，Full 座位 16 美元；定價頁也把 MCP 伺服器列在 Professional 的主要功能裡。所以只是想試試看，免費帳號的 20 次夠你接上、試幾個畫面；要天天拿來寫程式，就得有 Dev 或 Full 座位。

用之前要知道的

它只讀得到你本來就有權限的檔案。連結要是 Figma Design、FigJam 或 Figma Make 的檔案；遇到權限錯誤，官方建議跑 whoami，看登入的是哪個 email、在哪些方案、是什麼座位。

產出的程式碼要配合你的專案。預設的 React 加 Tailwind 不一定是你在用的，官方建議用 Code Connect 把 Figma 的元件對到你程式裡的元件，或在專案裡放一份規則檔，讓 AI 每次照著做；伺服器本身就提供一個產生規則檔的提示，叫 create_design_system_rules。

寫入類的工具會動到你的 Figma 檔。官方文件寫，它照你的座位權限做，新檔案建在草稿裡，改既有的檔案要有編輯權限。

公司有用 Okta 的話，官方文件寫可以透過 Okta 的 Cross App Access，讓成員登入一次之後，Claude 就能用 Figma MCP，不用每個人再授權一次；目前只支援 Claude。

這篇沒有測的

登入之後的所有事情：讀設計稿、產生程式碼、寫入畫布、把網頁畫面抓進 Figma。我沒有 Figma 帳號。

桌面版、Claude Code 的 Figma 外掛加 Skills 的裝法，以及次數用完時實際會看到什麼。

其他熱門的 MCP 伺服器，我有實際跑過的：讓 AI 自己開瀏覽器的 Playwright MCP、拿這個網站量速度和跑 Lighthouse 的 Chrome DevTools MCP，以及讓 AI 回答前先查最新官方文件的 Context7。