小時候工作的夢想，就是希望能出一張嘴寫程式，這個夢想因為 AI 的問世得以實現。長大後，也希望可以出一張嘴做設計 XXD，尤其是要能應付業主的：「這邊大一點、那邊高一點，我要簡單又華麗的效果…」等一堆令人無語的需求。

現在，透過 MCP Server，「出一張嘴做設計」的夢想真的成真了，設計師們，快解放你們的雙手吧，再也不用 7pupu 的存一堆同名設計稿 + 後綴編號惹 QAQ

今天要介紹的 Figma MCP Server，能讓我們輸入指令後，讓 Figma 自動做出想要的設計，以下是範例效果：

有興趣想了解的朋友，可以跟著我一步一步的設定，希望大家都能靠一張嘴做出理想中的設計。

設定 Figma MCP Server

▼ 1. 首先請至 GitHub clone 專案 Cursor Talk to Figma MCP

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp

▼ 2. 安裝 bun 套件管理工具

curl -fsSL https://bun.sh/install | bash

一定要安裝 bun 嗎？

沒有安裝 bun 也沒關係，一樣可以使用 npm run server (但前提是要自行修改 mcp.json 的 command 設定)，我自己剛好有在用 bun，也蠻推薦大家使用看看，執行速度比 npm 快很多，也相對輕巧。

▼ 3. 加入 mcp.json 設定檔，參數裡的 path/to 要改成你實際 clone git 專案的位置

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bun",
      "args": [
        "/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"
      ]
    }
  }
}

2025.03.28 更新：

使用後如果出現「連接超時」或在終端機看到「Sending message to client: undefined」等訊息，請參閱文末的問與答，我有提供解法。

Figma MCP 推薦放在 Global MCP Server

Cursor 最近推出的0.47版本，增加了一個功能：Global MCP Server



▼ 使用者可以從 MCP 選單中新增 Global 的 MCP Server，這個Server 會儲存在隱藏的 .user.cursor 資料夾裡，成為全域設定。



建議大家把 Figma 的 mcp.json 放在 .user.cursor 資料夾中，使其變成全域的 MCP，好處是所有專案都可以共用 Global 的 MCP Server Tool，無需再為每個專案進行單獨的設定。

▼ 4. 啟動 WebSocket 伺服器

bun run src/socket.ts

▼ 成功啟動的話，會回傳 port

AD

匯入 Figma Plugin

重要提醒

一定要使用 Figma 的 APP 才能設定 Plugin，網頁版是不能用的唷！
我在這邊卡關了五分鐘… 😂，翻了官方文件才看到這段說明 XXD。

如果沒有下載 Figma APP，可以從 Figma 的官網下載 ➡️：https://www.figma.com/downloads/

▼ 打開 Figma APP 後，選擇左上角的 Figma Icon，點選「Plugins」➡️「Development」➡️「Import plugin from manifest…」

▼ 檔案位置選擇 cursor-talk-to-figma-mcp/src/cursor_mcp_plugin/manifest.json，cursor-talk-to-figma-mcp 就是剛剛 clone 的 GitHub Project

如果設定都正確，Figma APP 會自動啟動 Plugin，並跳出設定畫面。

▼ 畫面中有 WebSocket 的 Port 還有 channel ID，我們等等透過 MCP 連接 Figma 時會用到這組 channel ID，在使用期間請勿關閉 Plugin 的視窗，以免 channel ID 失效

讓 AI 自動設計 UI

▼ 回到 Cursor 編輯器，可以像我這邊分割視窗，一半是 Figma APP，一半是 Cursor Editor APP

▼ 在確定 Figma MCP Servers 啟動的情況下，可以開始下達指令開始讓 Figma 幫你設計 UI 啦。如果沒有正常啟動，可以按右邊的重新整理圖示，或是先 disable 再 enable server

▼ 我的做法是直接將 channel ID 給他，讓他自動連接，成功後他會告訴你已連接，並且讀出當前的 page 資料

talk fo figma , channel id: {你的 channel id}

再來就可以愉快地叫他設計 UI 啦！

▼ 以下是我錄的實際操作影片，從連接 Figma 到請他設計自動記帳 APP 的 UI，過程中沒有快轉，產生了 3 張 APP 稿大約 10 分鐘

如果內崁的影片無法讀取，可以點我直接打開 Youtube 連結，或者留言回報給我，感謝 😀

▼ 產生完初版也可以再跟他對話，請他微調修改

如何，是不是非常簡單呢 XXD

問與答

Q1.
我有開啟 Figma Channel 連結，但是在 Cursor 輸入 figma channel id 卻出現超時連結、connect error、Please join a channel to start chatting ... 等錯誤，或終端機有出現 Sending message to client: undefined 的錯誤訊息，該怎麼處理？

A1.

問題發生的原因，可能是 cursor 找不到 bun 的執行檔案，解決方法是將 ~/.cursor/mcp.json 設定的 command: "bun" 改用絕對路徑，而不僅是指令 "bun"

1. 首先，輸入以下指令找到你的 bun 安裝路徑： 

which bun

我的 bun 是透過 Homebrew 安裝的，所以我回傳的結果是 /opt/homebrew/bin/bun，如果你是透過 curl 或其他方式安裝，執行檔的位置可能是 /Users/你的名字/.bun/bin/bun，結果不同是正常的喔。

2. 更新 ~/.cursor/mcp.json，例如我的是長這樣 (path/to 要改成你實際資料夾的位置，要用絕對路徑)

"TalkToFigma": {
  "command": "/opt/homebrew/bin/bun",
  "args": [
    "path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"
  ]
},

這邊差別只在 command 從 bun 改成了絕對路徑 (/opt/homebrew/bin/bun)，正常來說 args 不用修改

存檔後，請依序執行以下動作：

  1. 完全關閉 Cursor
  2. 重新開啟 Cursor
  3. 重啟伺服器 (bun socket)
  4. 此時 MCP Server 就能正常運作了

▼ 以下是實測的內容截圖

Q2.
我重啟伺服器 (bun socket) 出現類似以下的錯誤，該怎麼處理？

$ bun run src/socket.ts
34 |       }
35 |     });
36 |   };
37 | }
38 | 
39 | const server = Bun.serve({
                        ^
error: Failed to start server. Is port 3055 in use?
 syscall: "listen",
   errno: 0,
    code: "EADDRINUSE"

      at /Users/USERNAME/cursor-talk-to-figma-mcp/src/socket.ts:39:20

Bun v1.2.2 (macOS arm64)
error: script "socket" exited with code 1

A2.

▼ 這個錯誤表示 port 3055 沒有正常關閉，你可以先查看 3055 port 有被哪些執行程序佔用

lsof -i :3055

▼ 從回傳結果得知，是 process 1283 在佔用資源，所以我們要把它砍掉

▼ 輸入指令後再重新跑一次 bun socket 應該就能正常使用了

# 例：kill 1283
kill {PID}

小結

透過這個工具，設計師不再需要手動調整繁瑣的設計需求，設定的過程也非常簡單，包括從 GitHub clone 專案、安裝 bun 套件管理工具、配置 mcp.json 檔案、啟動 WebSocket 伺服器，並在 Figma APP 中匯入 Plugin。

這些步驟完成後，我們就可以在 Figma 中透過 MCP Servers 指令設計 UI，大大提高設計效率，也讓設計過程變得更加直觀與簡單，大家一起來玩玩看吧～。

有任何問題，都歡迎留言討論唷！