中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：Design Tokens對于產品設計來說是個十分有用的工具和方法，本篇文章作者詳細介紹了Design Tokens在設計系統中的意義與應用，講述了其優勢以及具體的使用方法，一起來學習一下吧。

一、什么是 Design Tokens

Design Tokens 并不是一個新概念，它是一種設計師和開發共同使用的工作思維和方法。Tokens 的本意是“令牌 /指令”，與 Design 連起來可以被理解為“設計變量”。

如下圖，我們可以分別將 button 的背景色、文字色、文字屬性定義成 Token，用代碼化的語言，將組件的每一部分屬性進行有規律的代碼化命名。

大家應該都對設計系統有一定的了解（關于組件庫和設計系統的相關概念可以閱讀：B

端組件設計及工作經驗系列文章），盡管我們可以通過設計規范、組件庫、素材庫等手段，對設計和開發的流程進行提效，但實際上卻經常遇到令人頭疼的細節問題，比如：

• 開發所用的字號 / 顏色 / 間距等細節和設計稿不一樣；
• 設計師根據新的業務需求設計了一張組件庫中沒有的卡片，但不確定卡片的背景和邊框應該用哪個顏色；
• 產品新增了暗黑模式，設計和開發都面臨巨大的工作量；
• 老板用了已上線的產品，覺得主題色的藍色太重，想換主題色為淺藍色。

以上這些問題，其實都可以通過 Token 進行優化解決。Design Tokens 相當于將設計組件進一步拆解，使其原子化，將組件的每一種屬性都轉變為一個前端變量。

可以說，Token 本質上就是找到了組件、屬性和代碼之間的對應關系，統一了樣式和前端語言，使組件和設計系統可以被快速管理。

二、Design Tokens 有哪些優勢

Design Tokens 在設計系統中相當于一種正確且唯一的設計決定，在使用時有四大優勢：

1. 設計語義更易理解；
2. 設計產出更加一致；
3. 設計成果更準還原；
4. 設計改進更易維護。

1. 設計語義 更易理解

每一個組件中的復雜屬性都可以被 Token 進行語義化的描述，幫助設計師和開發建立“畫面感”。

舉個例子：#495FDF 這個顏色，按照設計系統中的命名方式，它可能會被叫做 Blue 60。而當我們通過Token語義的方式讓它達到組件級別的精度時，它會被叫做：color-button-border-focused。設計師和開發在使用時，就能迅速了解到這個顏色應用在哪里：

2. 設計產出更加一致

在實際設計過程中，一款產品通常會有不同的設計師參與產出設計稿。對于不熟悉設計規范的設計師，經常會有這樣的困惑：“組件庫的組件不全，我新設計的卡片，背景色應該使用設計系統中的哪一個紅色？Red50 還是 Red60？”。

這時如果我們給卡片背景色定義一個 Token，不同設計師根據 Token來選擇顏色，在卡片背景色上使用的顏色就一定是唯一的，這就能確保不同設計師產出設計稿的一致性。

3. 設計成果更準還原

當設計師在驗收開發內容時，往往會花很多時間去檢查開發結果與設計稿的一致性。使用 Token 就能確保設計稿被高效、準確地還原。

舉個例子，在不使用 Token 的情況下，開發使用的是一個硬代碼的模式，當輸入不正確的色彩代碼的時候，系統無從判斷這個顏色是否使用正確，也就不會報錯。

而在使用了 Token 之后，如果開發引用了錯誤的或根本不存的色值時，系統就會給出報錯提示，開發由此得以自行檢驗，設計師的驗收成本也會大幅降低：

4. 設計改進更易維護

設計的變更和迭代將變得更加輕松。舉個例子，你的產品需要更新主題色，如果沒有 Token，對于設計和開發來說將會是極大的工作量，需要一個個組件修改，還很容易漏掉或混淆一些細節。

但如果用 Token，開發只需重新輸入每一個Token對應的新色值，就可以做到產品全局的顏色更換，不需要一個個組件的排查和更改，省時、高效、準確。

三、如何使用 Design Tokens

1. Token 的命名方式

關于 Token 的命名，不同的公司、團隊、產品有不同的定義方式，但都遵循一定的邏輯和規則，且設計和前端要達成信息同步。這種命名的思路和給組件命名很相似，都需要先對組件的屬性進行分類和整理。

我們可以從組件系統中的核心元素入手，將整個組件系統拆解出“形、色、字、構、質”這幾個大的方面，并依照不同的類別、元件、屬性、等級和狀態，對 Token 進行命名上的規范定義：

舉個例子，下圖中的 button，它的背景色 Token 使用上圖中的命名方式，從左到右分別是它的類別、元件、屬性、等級、狀態，所以這個 button 的背景色所對應的 Token 就是：color-button-background-primary-nomal：

有了這樣一個系統性的命名規則之后，我們就可以以表格的形式，將設計系統中所有涉及到 Token 的元素特征都整理出來，作為設計和開發拉通提效的基準：

2. Token 的應用方式

通常設計和開發是需要使用一套完整的 Token 列表來實現信息對齊。

如果你的團隊在使用 Figma 作為設計協同工具，也可以使用插件：Figma Tokens。設計師將整理好的 Token 文檔導入到這個插件中，而開發可以利用這個插件高效生成Token 對應的JSON 文件，直接復制用于編寫代碼，這樣就可以很好的保證設計與開發協作的一致性和準確率：

作者：元堯；公眾號：長弓小子；

本文由@ 元堯 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。