UI Diff Checker

About this plugin

UI Diff Checker 幫助設計師驗證前端實作是否與 Figma 設計稿一致，不再需要逐像素手動比對。🔍 功能說明選取任一 Figma Frame，在前端測試環境執行一段小程式，即可取得差異報告，自動標示字體、顏色、圓角等不一致之處。✅ 檢查項目・字體樣式（字級 + 字重）— 例如「應為 Bold 16px，目前是 Medium 14px」・文字顏色 — 附色塊預覽，設計稿與前端並排對比・按鈕圓角🚀 使用方式1. 在 Figma 選取 Frame，點擊「擷取選取的 Frame」2. 複製產生的程式碼，貼到瀏覽器 DevTools Console 執行3. 將執行結果貼回 Plugin 輸入框4. 取得差異報告，直接發給工程師💬 一鍵產出工程師修改清單自動產出格式化的修改建議，含具體 CSS 數值，不需要來回解釋哪裡不對。🛡 忽略已知差異可將刻意設計的差異（例如後台主題色覆蓋）標記為忽略，避免每次都出現在報告裡。專為與前端工程師密切合作的 UI 設計師所打造，加速設計驗收的溝通流程。