設計
準備給開發者可上手的設計交接
可實作的設計包:行為清楚、資產可重用、無障礙要求明確,並有共同解消歧義的路徑。
流程
照這個順序做。
- 與產品與工程確認已核准的使用者流程、範圍、回應式狀態、元件盤點、內容與驗收準則。
- 清理並結構化設計檔:命名畫框、元件、變體、權杖、圖層與狀態標記,區分定稿與探索稿。
- 標明版面行為、中斷點、間距、字型、色彩權杖、互動狀態,以及載入、空白、錯誤、成功與權限狀態。
- 註記無障礙要求,含語意意圖、閱讀與焦點順序、鍵盤行為、標籤、宣告、對比與減少動態。
- 提供最佳化素材、內容來源、原型、相關設計系統連結與已知技術限制;避免不必要重畫系統元件。
- 與工程走讀交接、把問題與決策記在同一紀錄、支援實作檢查,並把建置結果對照驗收準則。
先準備
貓會向你要的輸入。
- 已核准設計檔與使用者流程
- 設計系統或權杖來源
- 技術限制與目標平台
- 工程負責人與驗收準則
路由器 + 一份 playbook
先路由。只選一份。
Cat Paw 每次任務只載入一份 playbook,不合併多份。先走這個路由器;其餘路徑是此 workflow 可檢查的候選。
- 路由器:
design-pack skills/design/ui-skills/create-design-md/SKILL.mdskills/design/ui-skills/baseline-ui/SKILL.md
界線
界線跟著提示一起走。
- 不要把探索畫框當成已核准的實作目標。
- 使用權杖與來源素材,不要要求開發者從像素取樣數值。
- 把決策記在共用成品中,避免口頭釐清遺失。
完成代表
一個可核對的終點。
工程能辨識每個必要狀態、素材、權杖、行為與無障礙期望;未決問題有負責人;已實作建置已對照約定驗收準則審查。
來源
這個流程從哪來。
- www.figma.com/blog/the-designers-handbook-for-developer-handoff/
- help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode
- help.figma.com/hc/en-us/articles/35063862380311-Accessibility-at-Figma
來源確立 workflow 的模式。若有 Reddit 或社群貼文,視為實務軼事,不是普遍事實。