Figma Check designs 上線:交付前自動比對 design system,抓出每一處 drift 一鍵修正
設計檔案會一點一點長歪。Check designs 把守規矩從人工抽查變成系統自己會舉手——比對 design system、標出 drift、一鍵修正。
Figma 在 6 月 4 日把「守規矩」這件事交給了工具。Check designs 會拿你的設計稿去比對 design system,標出每一處偏離,並在面板右側直接給出對應的修正建議,一鍵套用。它能在你工作時即時抓 drift,也能在交付前跑一輪完整的 QA pass,讓每個檔案都對齊系統。
過去這件事一直靠人。要嘛一個資深設計師在 handoff 前逐一翻檔案,要嘛裝個 plugin、記得跑、再讀一份報告。前者吃人力又不穩定,後者仰賴自律。Check designs 把這道關卡內建進畫布本身——系統第一次有能力替自己舉手。

Check designs 開啟後分四類掃描,附圖把第一類講得很清楚。左欄列出檔案裡實際用到的值——FFFFFF、FFA556、一個叫 Periwinkle 的自訂色;右欄是系統裡該對應的那一個——_bg/bg-default、bg/warning/pressed、bg/brand/tertiary,能對上的直接標成 Match。它不只告訴你「這裡有問題」,它告訴你「這裡應該換成哪一個」。
第二類是無障礙對比,抓出沒過 WCAG 的配色並建議合規替代色,把以往要另外跑的 a11y 檢查併進同一道流程。第三類與第四類處理的是 library 層級的衛生問題:來自未訂閱 library 的 token 與元件、以及已經 detach、跟來源失聯的元件,都會被一一標記。這四類加起來,幾乎涵蓋了一個檔案會偏離系統的所有主要路徑。
真正的轉變在時機。以前的設計系統合規檢查是「事後」的——做完一輪、交付前才翻,問題往往堆到最後一刻才爆。Check designs 把這道檢查拆成兩種節奏:你可以邊做邊抓 drift,讓偏離在它出現的當下就被標記;也可以在 handoff 前跑一次完整 QA pass,確保送出去的版本乾淨。
附圖底部那行 Update 20 colors across 33 items 配上藍色的 Apply 20 按鈕,藏著整個功能的重點。它把所有同類修正打包成一個動作——看到問題、框出範圍、一次套用,中間省掉了手動逐筆替換的苦工。
或裝 plugin、記得跑、讀報告
修正靠手動逐筆替換
→ 吃人力、不穩定、容易漏
交付前一次跑完 QA pass
修正打包成 Apply 一鍵套用
→ 即時、內建、修正成本壓到最低
token 推廣的最後一哩永遠卡在 adoption。你發了一套 variables,但團隊有沒有用、用得對不對,過去沒有便宜的方法量。Check designs 等於給 design system 配了一個隨身稽核員,讓「這個檔案有多貼近系統」這件原本模糊的事,變成可以即時看見、即時收斂的數字。
供應上有個門檻要先講清楚:Check designs 目前只開放給 Organization 與 Enterprise 方案。先吃到的是那些已經有成熟 design system、最痛於維護成本的中大型團隊;個人與小團隊要享受到,得等方案下放。這個切法本身也透露了 Figma 的判斷——Figma 想先接住的是規模化協作的痛,單人作業的痛它這一步還沒打算碰。
過去十年 Figma 把「畫設計」做到極致。這兩年方向明顯轉了向——agent 幫你生、grid 幫你排版、Check designs 幫你校稿。當畫圖本身愈來愈快、能畫的人愈來愈多,能不能讓一個檔案在好幾雙手經過之後還維持一致,反而成了團隊真正的競爭力。Check designs 押的就是這一注。