design tokens —— 設計和開發碰撞的火花
作者： 凹凸曼 - TT
前言
在前端的開發的過程中，和前端合作最緊密的職位應該就是設計師了。在業務流程中，設計師將自己的互動稿、視覺稿以 1px 以內誤差的期望交給開發者。但在這個過程中有幾個不方便的地方：
-
設計稿可拆解為佈局、圖案、文字、顏色等。其中佈局、文字以及顏色這三者的樣式編碼需要花費前端開發者大量的時間。雖說近幾年隨著藍湖等設計協同工作平臺的誕生，可以在平臺上獲取到部分 css 程式碼，但是依然不能滿足 web、iOS、Android 等多平臺的情況；
-
設計稿的更新無法及時在開發者的程式碼中體現，一是因為開發首先需要拿到新的設計稿，再根據標註甚至肉眼判斷區別後更新程式碼；另一方面，設計稿中看似簡單的改動可能導致較大範圍的程式碼改動，例如字型大小等。
為了解決上述的問題，完善設計和開發之間的協作流程，Design Tokens 應運而生。
什麼是 Design Tokens
在瞭解 Design Tokens 之前，需要先了解一下 Design System （即設計系統）的概念。這個概念在設計和開發的溝通流程中已經流行許久，在團隊設計體系工程化的過程中不可或缺。
A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.
設計系統能夠保證專案中設計稿與開發程式碼的一致——設計師將設計稿件中的內容元件化，在這個系統中上傳每個元件的樣式、文字屬性、顏色色值等。而開發者可以通過這個系統獲取自己需要的元件內容。但是這樣僅僅是實現了一個協作平臺，那麼如何解決前文提到的兩個問題呢？
Design Tokens 就是解決問題的核心。
Design tokens are the visual design atoms of the design system.
Design Tokens 統一了樣式屬性和前端語言，把每種屬性都當成是一個前端變數。
舉個例子，將一種顏色色值傳到系統中，然後轉換成 token ，前端就可以直接取這個變數使用。即使是色值被修改，當變數名不變時，對整體程式碼是毫無影響的，開發者要做的僅僅是重新匯入一份 token。
其中 token 的語言型別可以是 css、scss、yml 等。
如何開發 Design Tokens
在已知 Design Tokens 本質是一種變數的情況下，我們需要做的就是將顏色色值和文字屬性變成對應的變數。
其中文字屬性有比較特別的地方，它除了要把 font-family、font-size 等轉換成變數之外，還需要將這些變數集合在一個 mixin 裡面，方便整體使用。
所以我們需要完成的事情有如下四步，獲取屬性、生成變數、生成 mixin 、輸出結果。其中獲取屬性不用多說，直接從資料庫中拿到色值和文字的資料，然後分別寫入 json 檔案儲存即可。
1.生成變數
我們轉換的變數型別有 css、scss、less、stylus、json、yaml、Android、iOS 八種，其中 css、scss、less、stylus、Android 這五種通過 Theo 庫來實現，其餘為程式碼手動實現。
Theo
先來介紹一下 Theo,一個能夠對樣式進行 transform 和 format，隨後輸出對應變數的庫。它的實現原理大致為，先將 json 檔案中的值進行處理——色值處理為 rgb 或者 rgba，其餘樣式屬性的數值進行單位統一。隨後將處理過的值依據一定規則寫入一個新的物件中。這個物件就是 Design Tokens。
直接上程式碼：
static async formatWebOrtAndroid (type: string) {
const res = await theo
.convert({
transform: {
// 這裡是型別，可以是 web或者是 android
type: 'web',
file: path.resolve(__dirname, 'data.json'),
},
format: {
// 這裡是需要輸出的變數語言型別，css、scss、less、stylus、Android 等
type,
}
})
.then(data => {
// 這裡可以根據自己的需求進行資料處理
return data
})
.catch(error => console.log(`Something went wrong: ${error}`))
return res
}
自定義方法
其餘的 json、yaml、iOS 這三種需要我們手動實現。json 和 yaml 的實現非常簡單，只需要稍微處理一下資料為我們需要的格式，然後寫入 json 或者 yaml 檔案即可。
iOS 略微複雜，它支援 Objective-c 和 Swift 兩種型別的語言，所以要分別處理這兩種語言。
-
Objective-c 需要分為 .h 和 .m 兩個檔案，對色值進行如下處理：
// 先將變數名稱寫入 let colorsH += `- (UIColor *)${colorName};\n` // 處理對應的變數名稱下的色值 let colorsM += `- (UIColor *)${colorName} { return [UIColor colorWithRed:(${red})/255 green:(${green})/255 blue:(${blue})/255 alpha:(${alpha})];}\n\n` // 處理首尾 colorsH = `@interface UIColor (Colors)\n\n${colorsH}\n@end` colorsM = `#import "designTokenColor.h"\n\n@implementation UIColor (Colors)\n\n${colorsM}\n@end\n` -
Swift 的處理方法類似，直接上程式碼：
// 先將變數名稱寫入，並處理色值 let colorsSwift += `class func ${colorName}() -> UIColor{\n return UIColor( red: (${red})/255, green: (${green})/255, blue: (${blue})/255, alpha: (${alpha}) );}\n\n` colorsSwift = `import UIKit;\n\nextension UIColor{\n\n${colorsSwift}\n}\n`
其實上述的自定義方法也可以直接定義在 Theo 中，因為 Theo 支援註冊自定義 transform 事件以及自定義 format 事件，並且可以對獲取到的資料進行二次處理。
2.生成 mixin
mixin 是 scss 中的名稱，其實就是變數的集合，能夠使得一系列屬效能夠被整體應用。由於 Theo 沒有提供對應方法，所以我們這邊採用手動生成的方式。目前只針對我們需要使用的文字屬性進行了構建。
我們在第一步時已經生成了所有屬性的變數，所以在構建 mixin 時只需將對應變數組合在一起即可，工作量並不大。但是由於需要構建的語言型別較多，針對不同語言要輸出不同格式，所以依然寫了部分相似程式碼。
以下為不同語言下的內容生成程式碼：
-
css
--aotu: { font-family: var(--aotu-font-family); font-size: var(--aotu-font-size); font-style: var(--aotu-font-style); font-weight: var(--aotu-font-weight); letter-spacing: var(--aotu-letter-spacing); line-height: var(--aotu-line-height); opacity: var(--aotu-opacity); text-align: var(--aotu-text-align); color: var(--aotu-text-color); text-decoration: var(--aotu-text-decoration); text-transform: var(--aotu-text-transform); }; -
scss
@mixin aotu () { font-family: $aotu-font-family; font-size: $aotu-font-size; font-style: $aotu-font-style; font-weight: $aotu-font-weight; letter-spacing: $aotu-letter-spacing; line-height: $aotu-line-height; opacity: $aotu-opacity; text-align: $aotu-text-align; color: $aotu-text-color; text-decoration: $aotu-text-decoration; text-transform: $aotu-text-transform; } -
less
.aotu () { font-family: @aotu-font-family; font-size: @aotu-font-size; font-style: @aotu-font-style; font-weight: @aotu-font-weight; letter-spacing: @aotu-letter-spacing; line-height: @aotu-line-height; opacity: @aotu-opacity; text-align: @aotu-text-align; color: @aotu-text-color; text-decoration: @aotu-text-decoration; text-transform: @aotu-text-transform; } -
Android
// 這裡採用的是一個物件，這個物件中包含了各種數值 <style name=${aotu.name}> <item name="android:fontFamily">${aotu.fontFamily}</item> <item name="android:textSize">${aotu.fontSize}</item> <item name="android:letterSpacing">${aotu.letterSpacing}</item> <item name="android:lineHeight">${aotu.lineHeight}</item> <item name="android:textStyle">${aotu.fontStyle}</item> <item name="android:textFontWeight">${aotu.fontWeight}</item> <item name="android:gravity">${aotu.textAlign}</item> <item name="android:textAllCaps">${aotu.textTransform === 'uppercase'}</item> <item name="android:alpha">${aotu.opacity}</item> <item name="android:textColor">${aotu.color}</item> </style>
至此，Design Tokens 的生成已經完成。
3.輸出結果
我們將輸出的各種語言結果儲存在不同檔案中，上傳到伺服器，將內容和獲取連結返回給使用者。使用者可以直接通過連結下載檔案進行使用，也可手動複製內容到自己的專案中進行使用。當設計師改變設計稿時，他們需要重新上傳元件內容，Design Tokens 的內容也會隨之改變。而對於開發者來說，只需要重新匯入一個新的連結，就可以直接完成大量程式碼的更新，大大提升了設計師以及開發者的效率，減少了開發者的重複工作，降低了雙方溝通成本和版本迭代成本。
Design Tokens 應用
Design Tokens 已經被應用在凹凸的工作流中。
一個專案開啟的時候，需要先在內部夸克平臺建立一個專案，專案成員包括設計師與前端開發。隨後設計師使用夸克平臺提供的 Sketch 外掛將專案中需要的色值和本文樣式都儲存到專案中。以下為外掛中展示效果：
設計師完成上述步驟後，開發者進入夸克平臺，在對應專案中可檢視色值和文字樣式。其中可以看到每個屬性對應的變數名，並且可以對變數名作出修改。
所有的 Design Tokens 會集中展示在單獨頁面中，其中包括了下載連結，開發者直接通過連結下載內容，然後應用到自己的專案程式碼中即可。
總結
Design System 可能會是將來設計師與開發者合作的一種模式，目前相應的應用還不是非常廣泛。並且一些小專案中，大家更傾向於口頭交流、檔案交流等，而不是花時間先去構建一個設計系統。但是隨著公司或者部門專案擴張，積累變多，一個完善的設計系統以及高效的溝通平臺將會是必須的。Design System 以及 Design Tokens 給我們帶來了新的方式和新的可能，我們將會繼續探索它。
歡迎關注凹凸實驗室部落格：aotu.io
或者關注凹凸實驗室公眾號（AOTULabs），不定時推送文章：