Cursor + Figma MCP = Self page builder
請先到這邊建立自己的 Token
https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens
Settings > Security tab > Personal access tokens section, then click Generate new token.
這個就是你的 Token 請妥善保留。
node.js 環境請安裝建立好,
npx figma-developer-mcp --figma-api-key=<KEY>
啟動正確就會看到如下的畫面資訊
Configuration:
- FIGMA_API_KEY: ****G9Uy (source: cli)
- PORT: 3333 (source: default)
Initializing Figma MCP Server in HTTP mode on port 3333...
HTTP server listening on port 3333
SSE endpoint available at http://localhost:3333/sse
Message endpoint available at http://localhost:3333/messages
Cursor
回到 cursor 在右上角設定的地方,找一下 MCP 的位置, 如果不想要使用 global 設定,也可以在自己的專案設定
.cursor/mcp.json
裡面設定一下
{
"mcpServers": {
"Figma MCP": {
"url": "http://localhost:3333/sse",
}
}
}
設定完之後,就可以回到 Cursor setting 裡面,按下
Figma MCP -> enable
如果沒有看到 Figma MCP 的項目,表示你並沒有將上面的這個 json 設定完成,或者設定完了你並沒有儲存,記得要儲存。
如果再不行,請整個 Cursor 退出重開。
如果成功接上了,你可以看到, Figma MCP 是呈現『綠燈』的狀態 而 termail 應該會顯示 New SSE connection established 這樣的資訊。
如果有顯示表示正確成功了。
接著可以找一個 figma 檔案進行試試看建立一個前端的頁面試試看,在終端機應該會顯示這樣的資訊 ...
Fetching all layers of node 1008-23466 from file xxxxxxxxx at depth: all layers Calling https://api.figma.com/v1/files/xxxxxxxx/nodes?ids=xxxxxx
如果有這類的資訊,才表示 Cursor 真正有跟 Figma 是有進行確認串接,並且兩邊有進行溝通。
這樣切版才會漂亮。
如此一來請好好享受你的前端人生,慢走!
留言
張貼留言