Figma Check designs 上線:交付前自動比對 design system,抓出每一處 drift 一鍵修正

設計檔案會一點一點長歪。Check designs 把守規矩從人工抽查變成系統自己會舉手——比對 design system、標出 drift、一鍵修正。

Figma Check designs 面板,比對設計稿與 design system
設計檔案會偷偷地、一點一點地長歪。趕一版時手刻的顏色、改 prototype 時貼進來的斷線元件、合作久了沒同步的 library——每一處單看都無害,加總起來就是交付那天設計師和工程師對不上的根源。
RELEASE NOTES · FIGMA · JUN 4, 2026
Check designs: catch what's off, ship what's right
Figma Design · figma.com/release-notes
§ INTRO

Figma 在 6 月 4 日把「守規矩」這件事交給了工具。Check designs 會拿你的設計稿去比對 design system,標出每一處偏離,並在面板右側直接給出對應的修正建議,一鍵套用。它能在你工作時即時抓 drift,也能在交付前跑一輪完整的 QA pass,讓每個檔案都對齊系統。

過去這件事一直靠人。要嘛一個資深設計師在 handoff 前逐一翻檔案,要嘛裝個 plugin、記得跑、再讀一份報告。前者吃人力又不穩定,後者仰賴自律。Check designs 把這道關卡內建進畫布本身——系統第一次有能力替自己舉手。

RELEASE NOTES · CHECK DESIGNS 掃描的四件事
01
變數與樣式
抓出寫死的顏色、文字、圓角、間距,對應回正確的 design token
02
無障礙對比
標出對比度不足的配色,換成 WCAG 2.0 AA / AAA 合規色
03
Library 不符
標出來自未訂閱 library 的 token 與元件
04
Detach 偵測
標出已跟來源 library 斷開的元件
Figma Check designs 面板:左側是檔案中的硬值,右側是 design system 中對應的 token,底部一鍵 Apply
Check designs 面板:左欄是檔案裡的硬值,右欄是系統裡該用的 token,底部「Apply 20」把修正打包成一次點擊。圖/Figma
01 / 03
它到底在看什麼

Check designs 開啟後分四類掃描,附圖把第一類講得很清楚。左欄列出檔案裡實際用到的值——FFFFFFFFA556、一個叫 Periwinkle 的自訂色;右欄是系統裡該對應的那一個——_bg/bg-defaultbg/warning/pressedbg/brand/tertiary,能對上的直接標成 Match。它不只告訴你「這裡有問題」,它告訴你「這裡應該換成哪一個」。

第二類是無障礙對比,抓出沒過 WCAG 的配色並建議合規替代色,把以往要另外跑的 a11y 檢查併進同一道流程。第三類與第四類處理的是 library 層級的衛生問題:來自未訂閱 library 的 token 與元件、以及已經 detach、跟來源失聯的元件,都會被一一標記。這四類加起來,幾乎涵蓋了一個檔案會偏離系統的所有主要路徑。

INSIGHT
design system 的真正難題從來在維護端。建一套 token 不難,難的是三個月後檔案還守不守得住。Check designs 把合規從人工抽查變成系統自己會即時舉手——這是它比任何 plugin 都關鍵的地方。
02 / 03
它改變的是 QA 發生的時間點

真正的轉變在時機。以前的設計系統合規檢查是「事後」的——做完一輪、交付前才翻,問題往往堆到最後一刻才爆。Check designs 把這道檢查拆成兩種節奏:你可以邊做邊抓 drift,讓偏離在它出現的當下就被標記;也可以在 handoff 前跑一次完整 QA pass,確保送出去的版本乾淨。

附圖底部那行 Update 20 colors across 33 items 配上藍色的 Apply 20 按鈕,藏著整個功能的重點。它把所有同類修正打包成一個動作——看到問題、框出範圍、一次套用,中間省掉了手動逐筆替換的苦工。

UPDATE · QA 的兩種做法
過去
資深設計師交付前逐一翻檔
或裝 plugin、記得跑、讀報告
修正靠手動逐筆替換
→ 吃人力、不穩定、容易漏
Check designs
邊做邊抓 drift
交付前一次跑完 QA pass
修正打包成 Apply 一鍵套用
→ 即時、內建、修正成本壓到最低
INSIGHT
工具標出問題不稀奇,難的是讓修正的成本低到你願意當下就改。Apply 全選套用,把「知道哪裡錯」和「真的把它改好」之間的距離壓成一次點擊——這一步比偵測本身更能決定團隊到底會不會用它。
03 / 03
對 design system 工作者的意義

token 推廣的最後一哩永遠卡在 adoption。你發了一套 variables,但團隊有沒有用、用得對不對,過去沒有便宜的方法量。Check designs 等於給 design system 配了一個隨身稽核員,讓「這個檔案有多貼近系統」這件原本模糊的事,變成可以即時看見、即時收斂的數字。

供應上有個門檻要先講清楚:Check designs 目前只開放給 Organization 與 Enterprise 方案。先吃到的是那些已經有成熟 design system、最痛於維護成本的中大型團隊;個人與小團隊要享受到,得等方案下放。這個切法本身也透露了 Figma 的判斷——Figma 想先接住的是規模化協作的痛,單人作業的痛它這一步還沒打算碰。

§ OUTRO

過去十年 Figma 把「畫設計」做到極致。這兩年方向明顯轉了向——agent 幫你生、grid 幫你排版、Check designs 幫你校稿。當畫圖本身愈來愈快、能畫的人愈來愈多,能不能讓一個檔案在好幾雙手經過之後還維持一致,反而成了團隊真正的競爭力。Check designs 押的就是這一注。

"Catch drift as you work, run a QA pass before handoff, and keep every file aligned to your design system."
— Figma Release Notes
KEY POINTS
Check designs 比對設計稿與 design system,標出偏離並提供一鍵 Apply 修正
四類偵測:變數/樣式、無障礙對比、Library 不符、detach 元件
QA 從人工抽查 / 手動 plugin 變成「邊做邊抓 + 交付前跑完」
目前僅開放 Organization 與 Enterprise 方案
🎓 FIGMA 全攻略
Check designs 要發揮效益,前提是你的 design system 本身夠扎實。
從 component、variables 到 design tokens 的實戰組合,把系統的底層邏輯一次練起來——工具才接得住。
Figma 全攻略 →