Figma × AI 直通程式碼

這一頁寫給主力使用 Figma 的設計師：你不需要改變工具、不需要改變設計習慣，變化發生在交接這一環——從「匯出標註圖給前端肉眼翻譯」升級為「AI 直接讀取你的設計檔案生成程式碼」。這是 Figma 官方與 Claude（Anthropic 的 AI）在 2026 年初正式打通的雙向整合，已是業界公開的主流工作流程。

全景：一條雙向環路

傳統鏈路是單向有損的：設計稿 → 標註 / 切圖 → 前端解讀 → 程式碼。打通後的鏈路是雙向環路：

时序图渲染中…

兩個方向各解決一個老大難：

正向（design-to-code）：AI 編碼工具讀到的是設計檔案的結構化資料——圖層階層、自動佈局約束、變數綁定——而不是一張點陣圖。生成的程式碼引用的就是你定義的間距和 token，「前端量像素量出 15px 而你畫的是 16px」這類翻譯損耗從機制上消失。
反向（code-to-canvas）：開發到一半的真實介面（本地開發環境或線上頁面），可以整頁擷取送回 Figma，變成原生可編輯圖層，還支援多畫面依序擷取保留流程脈絡。設計師直接在畫布上改變體、加批註、探索方案——不用再對著截圖提意見、等開發改完再看。

實踐這條環路的團隊回報的效果：首版程式碼還原度顯著提升，設計⇄開發的回饋週期從數天縮短到數小時，兩個角色從依序等待變成並行迭代。

對設計師意味著什麼

具體到日常工作，你會感受到三個變化：

交付物就是 Figma 檔案本身。不用再做標註稿、切圖包；把設計檔案（或某個 frame 的連結）給到前端，AI 從源頭讀取。你在檔案裡用的 Auto Layout、元件實例、變數綁定，都會成為程式碼生成的依據——設計檔案越規範，生成的程式碼越準（這也讓「規範作圖」第一次有了立竿見影的回報）。
你的評審陣地還是 Figma。開發中的介面被送回畫布後，你在最熟悉的環境裡做視覺走查、改稿探索，改完前端再經同一條環路取回。
設計系統的一致性由機器守護。swift-web 的語意 token 對應到 Figma 側就是 Variables（變數集合）：顏色、圓角、間距綁定變數後，AI 生成程式碼時會映射回同名的程式碼 token。換品牌、調色盤時改變數值，稿與碼同步換裝。

swift-web 資源在 Figma 側的形態

資源	形態	狀態
語意 token	Figma Variables 集合（含明暗兩套模式），與程式碼側 token 清單同名對應	建設中
元件庫	swift-web 元件的 Figma 元件庫（以 20 張形態卡片為藍本）	建設中——將藉助 code-to-canvas 把框架元件的真實渲染態推入 Figma 整理成庫，而非手動重畫
元件↔程式碼映射	Figma Code Connect：把 Figma 元件與真實程式碼元件掛鉤，AI 生成程式碼時直接複用 `SwButton` 等框架元件而不是重新造輪子	規劃中（依賴 Figma 方案支援）

資源建設期間，Figma 軌的 design-to-code 已經完全可用：即使沒有現成元件庫，AI 也能從任意 Figma 稿讀取結構生成程式碼；我們已在實際業務專案中用這條鏈路完成過整頁還原。元件庫與 Variables 就位後，生成程式碼的元件複用率和 token 命中率會進一步提高。

前端側怎麼接（給工程師的部分）

設計師可以跳過本節。前端在 Claude Code 中安裝 Figma 官方插件即可：

claude plugin install figma@claude-plugins-official

安裝後重啟 Claude Code，在 /plugin 面板完成 Figma 帳號授權（建議 remote 版本，桌面版僅面向特定企業場景且需要 Dev Mode）。插件提供的 MCP 工具涵蓋：讀取設計上下文（元件 / 變數 / 佈局 / FigJam / Make 資源）、按選取的 frame 生成程式碼、Code Connect 對齊真實元件、把介面寫回畫布。

日常用法：拿到設計師給的 frame 連結後，在 Claude Code 裡直接說「按這個 Figma 稿實作頁面，用 swift-web 元件和語意 token」；反向則是「把目前頁面發到 Figma」。結合本站元件文件與開發規範，生成結果落在框架約定內。

順路一望：AI 還能在 Figma 裡做什麼

Figma Make（Figma 自家 AI）：從一段描述生成可互動原型，結果可以複製回設計畫布繼續加工——適合快速探索方向。
對話式改稿：社群生態裡已有讓 AI 直接讀取、分析乃至修改 Figma 原生圖層的工具，能力仍在快速演進。

這些與 swift-web 體系不衝突——它們解決「稿子怎麼來」，我們的體系解決「稿子怎麼變成上線程式碼」。如果你對「用對話直接出稿」這個方向感興趣，下一頁的 Claude Design 是目前把這件事和設計系統結合得最深的工具。