Site icon May's Notes

Cursor Talk To Figma MCP 使用教程

cover

一、設置MCP Server

1.首先 clone cursor-talk-to-figma-mcp 到本地

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

2.cd cursor-talk-to-figma-mcp 進入專案目錄

3.cursor . 使用 cursor 開啟專案

4.安裝 bun

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

5.配置專案環境 bun setup

6.啟動 WebSocket, 預設port為3055 bun socket

7.新增 TalkToFigma 到 MCP Server bunx cursor-talk-to-figma-mcp,並將它設為 Enabled,顯示綠燈代表成功啟用。

這一步也可以手動設置,手動設置方式:Cursor setting -> MCP -> Add new global MCP

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": [
        "cursor-talk-to-figma-mcp@latest"
      ]
    }
  }
}

    二、在Figma中導入插件

    1.到官網下載 Figma 桌面版

    2.新增 Design -> Plugins -> Development -> Import plugin from manifest…

    3.選擇剛剛 clone 下來的專案 cursor-talk-to-figma-mcp/src/cursor_mcp_plugin/manifest.json

    4.點擊後會啟動 plugin,並且彈出連接畫面,下方會顯示 channel id,在 Cursor 使用 talk to figma, channel [Channel ID] 指令來連接。

      完整操作流程

      1.使用 bun socket 啟動 WebSocket

      2.確保 MCP Server TalkToFigma 是 Enabled 狀態

      3.打開 Figma 並運行 Cursor Talk To Figma plugin (連接視窗必須保持開啟,不能關閉)

        4.在 Cursor 中按下 Command+I 打開 Chat,輸入指令talk to figma, channel [Channel ID]連接 Figma,就可以開始讓 Cursor 幫你執行各種 Figma 操作了。

          問題匯總

          出現 Please join a channel to start chatting 或者 Sending message to client: undefined

          Cursor Settings > MCP > 點擊 TalkToFigma 右邊的鉛筆,將 command 和 args 路徑都改成絕對路徑

          {
            "mcpServers": {
              "TalkToFigma": {
                "command": "/Users/<username>/.bun/bin/bun",
                "args": [
                  "/Users/<username>/Projects/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"
                ]
              }
            }
          }

          TalkToFigma 前面顯示綠燈才代表有成功啟用。

          在終端輸入 which bun 可獲取 bun 的絕對路徑

          Exit mobile version