語意顏色 token

拿一個 經核准的基本顏色或品牌顏色,然後在最終匯出步驟之前將其對應到產品 UI、文件或行銷的語義 token 名稱。

此頁面位於角色顏色看起來大多可信之後。它用於命名和映射,而不是用於第一個無障礙傳遞或最終的原始 token 匯出。

其他語言 日本語 | English | 繁體中文 | 繁體中文(香港)

如何使用

  1. 從已經足夠適合可訪問的角色顏色的基色開始。
  2. 選擇與移交目標相符的命名預設:產品 UI、文件/內容或行銷/CTA。
  3. 首先查看語義 token 圖,如果命名層看起來足夠清晰可以匯出,則複製 CSS 或 JSON 區塊。

從角色顏色轉換為語意名稱

此頁面填補了“角色顏色看起來可以接受”和“工程切換需要命名語義 token”之間的空白。

在匯出之前將角色顏色對應到語義 token 名稱。

輕語意 token
黑暗語義 token
CSS 變數
JSON

如何在附近的頁面之間進行選擇

使用 無障礙色票 當角色色彩還在動的時候。使用 顏色 token 預覽 當下一個工作是最後一個 UI 確認。使用 顏色 token 審核 當集合仍然需要清理時。使用 顏色 token 差異 當您需要比較前後。在完成這些步驟之後,當剩下的問題是如何將角色命名為語義 token 時,請使用此頁面 元件顏色 token 或決賽 顏色 token 匯出 切換。

常見問題解答

這個頁面會產生什麼?

它將一種經核准的基色轉換為產品 UI、內容/文件或行銷/CTA 預設的語意 token 圖,然後輸出 CSS 變數和 JSON。

我什麼時候應該使用它而不是無障礙色票?

當角色顏色仍在移動時,請使用可存取的色票。在這些角色顏色看起來已經可信並且下一個工作是將它們命名為語義 token 後使用此頁面。

我什麼時候應該使用它而不是顏色 token 匯出?

當您想要最終的角色 token 切換時,請使用顏色 token 匯出。當仍需要澄清語義命名和映射時,請先使用此頁面。

這會取代設計系統審查嗎?

不。它是用於命名和移交的輕量級映射輔助工具,不能取代更廣泛的產品或品牌審查。