# **如何使用 AI 快速進行切版(Figma)**

### **推薦工具：Cursor**
### **使用方式**

#### **1. 申請 Figma Access Tokens**
- 參考 [Figma access-tokens](https://www.figma.com/developers/api#access-tokens) 步驟申請。

#### **2. 安裝並啟動 Figma MCP Server**
- 到 [專案 Repo](https://github.com/GLips/Figma-Context-MCP) Clone 專案到本地環境。
- 下指令啟動 **MCP Server**

npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

#### **3. 新增 Cursor MCP Server**
- 開啟 Cursor 點擊右上角設定 -> 打開MCP -> 點擊 Add new MCP server
- 輸入 Name (設好分辨的名字) -> 選擇 Type : sse -> 輸入上面啟動 Figma MCP Server 的 endpoint (下方提供懶人複製) -> 點擊 Add

http://localhost:3333/sse


完成畫面

#### **3. 複製 Figma 設計稿連結**
- 開啟 Figma 設計稿 -> 選擇區塊 -> 滑鼠右鍵 -> Copy/Paste as -> Copy link to Selection


#### **4. 使用 Cursor Agent Mode生成程式碼**
- 回到 **Cursor** 中打開 Chat Agent Mode(快捷鍵：Command ⌘ + I)
- 貼上 Figma 設計稿連結 -> 下Prompt描述要使用的框架、工具需求後送出

#### **5. Prompt 調整或直接進行開發**
- 依照個人評估決定是否繼續下Prompt調整，若大部分 UI 都符合設計稿可以直接進行程式碼微調

## **效果對比**
設計稿

最終成果