作者： 凹凸曼 - 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 =https://www.cnblogs.com/o2team/p/> {
// 這里可以根據自己的需求進行資料處理
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），不定時推送文章：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/2408.html
標籤：JavaScript
上一篇：JavaScript 資料型別