Figma 到程式碼的 AI 友善交付流程：從設計稿到上線一條龍

過去 Figma 到程式碼是「設計師交圖、工程師手刻」的線性流程，單個頁面 3-5 天工時。AI 工具（v0、Anima、Builder.io、Cursor）改變了這個流程——Figma 直接產出 React/Vue code，工程師只需審核。

但前提是 Figma 設計稿要 AI 友善，背後也需要一套對齊的 AI 友善設計系統與 Token 命名。本篇是完整的 AI 交付流程指南。

AI 友善 Figma 設計四原則

原則 1：命名規範

錯誤示範：

❌ Group 1
❌ Rectangle 32
❌ Frame 5
❌ 未命名圖層

正確命名：

✅ Page/Homepage
   ├─ Section/Hero
   │   ├─ Component/Button/Primary
   │   ├─ Text/Heading/H1
   │   └─ Image/Hero-Banner
   └─ Section/FeaturedProducts

規則：

• 用斜線分層（Page / Section / Component）
• 用 PascalCase
• 含類別前綴（Button、Input、Card、Section）
• 不要用「Group 1」「Frame 5」

原則 2：Auto Layout 取代絕對定位

❌ 絕對定位（AI 看不懂）
- Rectangle 100×40 at (50, 100)
- Text at (60, 110)

✅ Auto Layout（AI 直接轉 Flexbox）
- Frame: Auto Layout, horizontal, gap=8
  ├─ Icon: 24×24
  └─ Text: auto

所有區塊都用 Auto Layout，AI 工具直接轉成 CSS Flexbox / Grid。

原則 3：Component 與 Variants

把重複出現的元件（Button、Card、Input）建為 Component：

Component: Button
├─ Variant: Primary | Secondary | Ghost
├─ State: Default | Hover | Disabled
└─ Size: SM | MD | LG

設計師之後改 Component，所有實例自動更新。AI 工具看到 Component 會產出 React <Button variant="primary" />。

原則 4：Design Token 整合

用 Figma Tokens 外掛 把顏色、字型、間距變成 token：

{
  "color": {
    "primary": { "value": "#3B82F6" },
    "danger": { "value": "#FCA5A5" }
  },
  "spacing": {
    "tight": { "value": "8" },
    "loose": { "value": "24" }
  }
}

匯出 JSON 後可同步到 code repo。AI 產出的 code 會用 var(--color-primary) 而非 hex 色碼。

AI 工具實戰流程

工具 1：v0（Vercel）

1. 在 Figma 選定要轉的 Frame
2. 複製 Figma URL 到 v0
3. v0 自動產出 React + Tailwind code
4. 在 v0 內互動微調
5. 複製 code 到專案
6. 工程師整合 API 與互動邏輯

單個頁面從 Figma 到可上線 code：30-60 分鐘。

工具 2：Anima

1. Figma 安裝 Anima 外掛
2. 選定 Frame → 一鍵匯出
3. 產出 HTML / React / Vue / Tailwind
4. 下載到本地專案
5. 整合與測試

優點：保留更多視覺細節。缺點：互動邏輯較少。

工具 3：Builder.io

1. Figma 設計做 Auto Layout 與 Component
2. 用 Builder.io Figma Plugin 匯出
3. 自動轉 React / Vue / Angular code
4. 整合到 Builder.io CMS（可選）

優點：與 Builder CMS 整合，可視覺編輯內容。

工具 4：Cursor + 截圖

1. Figma 截圖 Frame
2. 貼到 Cursor 對話框
3. 用 prompt：「依此設計用 React + Tailwind 實作」
4. Cursor 產出 code
5. 在 Cursor 內持續優化

優點：最彈性，可處理複雜邏輯。缺點：依 Cursor 版本品質波動。

建議流程：v0 + Cursor 組合

[設計階段]
Figma 設計（AI 友善規範）

[轉換階段]
↓
v0 產出視覺 code（30-60 分鐘）
↓
[整合階段]
Cursor 整合 API 與互動邏輯（1-2 小時）
↓
[審核階段]
工程師審核（30 分鐘）
設計師對照 Figma（30 分鐘）
↓
[上線]

單個複雜頁面總時間：3-4 小時（vs 純手工 3-5 天）。

元伸實戰數據

近 6 個月的設計到程式碼專案：

時間省 5-8 倍，品質持平或略優（AI 自動產 a11y 與 RWD 較完整）。對於需要長期演進的 客製化系統開發 專案，這個效率差距會逐年累積為顯著競爭力。

不要犯的 5 個錯誤

• ❌ 不用 Auto Layout：AI 產 code 是絕對定位，不可上線
• ❌ 命名隨便：「Group 1」「Frame 5」AI 不知道是什麼
• ❌ 重複元件不建 Component：每個 Button 都是獨立圖層
• ❌ AI 產出直接上線：缺少審核 = bug 風險
• ❌ 以為 AI 取代設計師：AI 是工具，設計師是品質把關

結語：AI 改變設計工作流，但不取代設計師

「人類定義系統，AI 加速執行」——這是 AI 時代的設計工作分工。

元伸科技在 客製化網站設計 服務中，Figma AI 友善規範是設計交付物的一部分——讓客戶內部 / 外部工程團隊都能用 AI 工具加速 code 產出。這是 2026 年起的設計標準，更全面的方法論可參考 AI 設計到 Code 完整實踐指南。