• MCP 設定範例：Figma
• 取得 Figma API key
• MCP detail in Cursor
• Figma MCP 實際使用範例

上一篇文章中，我們提到了 MCP 是一個可以讓我們的 AI 夥伴和其他軟體溝通的轉接頭，今天我們要來看看在 Cursor 上要怎麼安裝 MCP。

切版好夥伴：Figma

在前端開發中，切版是和寫程式同樣重要的工作。而目前主流的切版畫面來源是 Figma，以前的切版方式就是開著 Figma 和 Web 比較，然後一點一點把樣式填到畫面上。但現在 AI 這麼厲害，應該要可以幫我切版吧！

請根據這個圖片幫我切版

一開始我會在 Figma 上把要切的圖片複製起來，直接貼給 Cursor，請他幫我按照圖片切。但這種做法有時候切出來的 css 會和 Figma 上規範的不太一樣，這時候 Figma MCP 就派上用場了。

MCP 安裝：以 Figma MCP 為例

我選擇的是 Figma Context MCP 這個專案。在 Getting Started 的區塊中可以看到分別有 Mac & Windows 的設定內容：

根據你的裝置複製好這段內容，就可以回到 Cursor，打開 MCP 的設定。如果找不到的話，可以先按下 F1 並輸入 MCP：

或是透過右上角齒輪，選擇 MCP & Integrations 的選項：

接著點下 Add Custom MCP 的按鈕，會看到 Cursor 自動在專案的 .cursor 資料夾底下建立了一個 mcp.json 的設定檔案：

這時候把我們剛剛複製起來的那段文字貼到這裡：

現在還差最後一步，就是取得 figma 的 token，填入 figma-api-key 的地方。這個 key 要怎麼取得呢？

取得 Figma API Key

首先需要註冊一個帳號來進入 figma。進入之後可以在 figma 畫面左上角找到自己的頭像後按下去，再點選 Settings：

接著在彈出來的視窗中，選擇 Security 的 tab，找到畫面中間的 Generate new token 後按下去：

接著輸入好記得名稱，並選擇你要開啟的權限。種類有點多，詳細的說明可以參考官方文件，如果實在不知道怎麼選的話建議全開就好：

按下 Generate token 後就會產生 token 了。要記得先複製好，這個 token 一旦離開這個頁面後就不會再次出現了：

接著把剛剛的 token 拿到 Cursor 上的 mcp.json 上，把 YOUR-KEY 替換成你剛剛拿到的 key：

這時候檢查一下這裡的狀態是不是亮綠燈，如果是的話，就可以在 Chat 中使用 MCP 囉！

安裝好了！然後呢？

在剛剛的圖片中，有一個 2 tools enabled 的小字，點開來後會長這樣：

這裡會告訴你這個 MCP 的詳細資訊，包含名稱、用什麼設定來加入的，以及最重要的，他有提供哪些指令可以使用。以 Figma 這個 MCP 來說，他有提供 get_figma_data 和 download_figma_images 這兩個工具。把滑鼠移到上方後會出現詳細的說明：

要怎麼使用？

Cursor 會在你提問的時候根據你提供的訊息自動判斷需不需要使用 MCP 的功能。舉個例子：

當我附上 Figma 的網址後，他就會判斷出需要讀取 Figma，因此向我提出請求。

可以看到他在讀取檔案之後，確實有把一些 css 的內容讀取出來：

這是切完後的樣子，左邊是 Cursor 實作的結果，右邊是我 Figma 原始的檔案：

可以看到雖然有些地方仍然需要進行調整，但在大方向上切的樣子是差不多的。如果是工作上有全新的切版需求，用這樣的方式串接 Figma 能夠得到很大的幫助，只要後續自己微調，甚至繼續叫 Cursor 幫忙調整就好。

今天的分享中我們提到了要怎麼安裝 Figma MCP。其實不只是 Figma，大多數的 MCP 都可以透過這種方式進行安裝：

1. Google 關鍵字 + MCP + github
2. 找到你想安裝的 MCP
3. 搜尋他要怎麼加入 MCP 的設定，可以透過關鍵字 mcpServers 找到
4. 把內容複製回 Cursor 的 mcp.json 檢查狀態

到今天為止，Cursor 的介紹算是告一段落了。接下來我會介紹我到目前為止最愛的 pair 夥伴：Claude Code，以及一些我不能沒有的使用技巧。

你有什麼特別想知道的 Claude Code pair 小撇步嗎？歡迎留言跟我分享喔。我們明天見 👋