Figma 把 code-backed screens 帶回畫布:設計稿會重新成為產品的共同語言嗎?

Figma 新增將程式畫面帶回畫布並綁定 variables 的能力。當正式產品介面可被重新編輯,設計系統與維護流程也需要新的審核方式。

以模組化色塊與連接線呈現設計系統連結程式碼的 editorial 生成插畫

Figma 在 7 月的更新中,讓從 Figma Make、MCP 或網頁擷取而來的程式畫面回到畫布時,可自動綁定檔案既有的顏色、字體與間距 variables。它處理的不是單純匯入畫面,而是產品實作與設計規則如何重新接上。

不是把畫面貼回來,而是把決策帶回來

過去正式產品通常只能以截圖、連結或開發環境存在於設計檔之外。若介面能以可編輯圖層回到畫布,設計師可直接看見實作後的結構,並在同一個地方討論下一輪改動。

自動綁定 variables 的意義在於,畫面不必停留在一串硬編碼數值;它有機會重新連到團隊的 token 與元件語言。這讓既有產品、原型和 AI 產生的方向比較容易放進同一套規則檢視。

自動綁定不等於自動正確

相近的顏色、字級或間距不必然代表相同的語意。若工具只依外觀配對,警示色、次要文字或特殊狀態仍可能被綁到不適合的 token。

因此團隊需要把匯入後的檢查視為正式步驟:確認元件角色、狀態、無障礙對比與 responsive 行為。AI 可以減少重建畫面的時間,但不能替代語意判斷。

設計檔的角色正在改變

這類工作流讓設計檔更像產品決策的維護層,而不只是開發前的交付物。它能保留程式畫面作為討論材料,也能讓新的設計調整回到有系統的規則中。

更值得追問的是:哪些變更能由工具同步,哪些變更必須由人確認?先把這條界線說清楚,才能讓速度真正轉化為更可靠的產品品質。

延伸閱讀

韓國設計 AI wellness robots 走進首爾 DDP:公共設計真正要設計的是信任感 AI × UI 設計 Figma 設計 agent 開放 skills 與 connectors:AI 的品質開始取決於團隊留下什麼脈絡