💡

Workflow

Workflow

顏色系統的建立流程與應用方式。

How to build the color system?

如何產生顏色系統?

設計師經過內部討論與規劃後,將 Palettes 和 Semantic Colors 整理至主要的共用資料中,各平台開發者和設計師按照設計文件同步寫入程式與設計工具(Figma)。

image

工程師僅需供應 Semantic Color,即可依照系統設定的主題色 (Light/Dark Mode) 自動產生對應的顯示顏色,不需額外提供不同模式所需的顏色數值。

提供語意後自動顯示對應顏色
提供語意後自動顯示對應顏色

How to Provide UI Spec

如何提供設計規格

  1. 設計師在設計工具 Figma 中建立 Semantic Color System
  2. image
  3. 設計時,在物件上套用 Semantic Color System
  4. image
  5. 工程師在 Figma 點擊該物件後,查看 Inspect 中的 Colors 欄位所顯示的字串即為 Semantic color name
  6. image