跨越設計與程式的鴻溝 — Design Tokens
更新於 發佈於 閱讀時間約 8 分鐘
我覺得這個顏色太淺了，可能需要調整一下～
好的，沒問題！
於是你在設計系統中開始尋找使用到這個顏色的所有元件，然後一個一個修改，改完一個檔案還有另一個，好不容易改完了卻在測試的時候發現還有幾個地方沒有改到⋯⋯天阿～瘋掉！！！
這樣令人抓狂的場景不只有在設計的時候會發生，當我們交付設計稿之後的開發階段，工程師也有可能面對相同的問題，這樣毫無效率的修改方式，不僅花費了設計師們大把的時間，也很容易讓我們設計出的產品在不同的平台上有不一致的表現。
好，那該怎麼辦呢？今天我們就要來介紹 Design Tokens 的這個概念，幫助大家進行有效的溝通，讓設計開發流程更加順利。
Design token 是什麼？
Design token 的中文有很多種說法，可以翻譯成設計令牌、設計權杖、或是設計變量，但我們覺得上述用語不是很容易理解，最終我們選擇了設計標籤來稱呼。
設計標籤是一種幫助設計師和開發人員能進行有效溝通的代碼化語言，透過將數值（例如色碼、字體、間距等）編寫至設計標籤中，建立統一的代碼化語言，讓組件和設計系統可以被快速的管理，並有效的運用至 UI 設計中。
舉例來說，為了保持統一性，一個顏色可能會被用在品牌旗下的許多產品中，當我們需要去更改這個顏色時，如果沒有使用設計標籤，就會需要一個一個去整，在溝通上也會比較不方便（因為你不會在講話的時候用十六進位來表示顏色：”給我來點#E8DEF8”……）。
但如果你使用了設計標籤，就只需要更改對應的標籤內容即可。以Figma工具為例，在建立與更改完設計標籤之後，可以直接輸出成JSON檔案，就能更新至設計系統，並應用在各個產品、裝置上。
設計標籤的使用也能有效的幫助開發人員，利用設計標籤來取代數值，不僅可以減少錯誤輸入色碼，開發時也能夠使用 IDE 的自動提示來選擇現有的設計標籤，輸入錯誤時也能更有效率的除錯。
如何建立 Design token?
目前設計標籤還沒有一個統一的格式能夠遵循，日前 W3C Design Token Community Group 在 2022 Figma schema 中便提出了初步的命名架構建議，另外 Google 在 Material Design 3 中也有提供他們對於設計標籤的建立指南。
Design token 的架構
想要建立一套比較完整的設計標籤，就必須包含他的名稱、數值、還有他的類別。
當然你也可以加上關於這個標籤的描述，以便其他夥伴（協同作業者）更好的理解與使用。
同樣的名字可能會被用在很多的物件上，這個時候我們就能將設計標籤分組，可以依據品牌、類別、使用方式等等來進行分組。
隨著群組的不同，每個標籤的路徑也會不同，這樣的架構能為設計標籤產生出一個獨一無二的名字。
在設計標籤中還有一個很重要的概念，那就是 Aliases（別名）。同樣的數值可能會被用在許多不同的元件上，使用別名可以幫助你在需要更改單一元件的內容時，不會更動到其他也使用這個內容的元件，如下圖所示，你只需要調整箭頭所指的方向就好了。
這樣的架構在設計不同模式的時候非常好用，舉例來說，當你想設計夜間模式的時候，只需要改變元件設計標籤所指的參考標籤，除了能讓設計開發流程變得更簡單，也能夠更有效的管理整個設計系統。
在Google的Material Design當中，是將設計標籤分為 Reference、System、和 Component 三種類型，並對三個類型之間的層級關係提供近一步說明。
我們也可以將不同的設計標籤組合為一個排版組合，因為同樣的數值可能會被運用在多種元件之中。舉例來說，標題一和標題二使用相同的字型，當我們想要更改字型的時候，只需要修改標籤內容即可。
Design token 的命名步驟（以 Material Design 為例）
Step 1. 將數值轉換為最基礎的 token — Reference tokens
Reference token 包含了設計系統中可用的所有樣式選項，有時候會稱作 global token。將數值轉換為 Reference token 能夠幫助我們更好的去管理設計系統中所使用到的樣式與數值。
Reference token 包含了設計系統中可用的所有樣式選項，有時候會稱作 global token。將數值轉換為 Reference token 能夠幫助我們更好的去管理設計系統中所使用到的樣式與數值。
Step 2. 定義 token 的實際屬性 — System tokens
System token 是語意化的 token，他定義了設計標籤的實際屬性，通過語意化的命名，定義了設計標籤的使用場景。在命名的時候，可以避免使用會和程式碼互相衝突的文字，舉例來說 type 在技術端能夠被解釋為很多意思，所以在命名的時候應該盡量避免使用。
System token 是語意化的 token，他定義了設計標籤的實際屬性，通過語意化的命名，定義了設計標籤的使用場景。在命名的時候，可以避免使用會和程式碼互相衝突的文字，舉例來說 type 在技術端能夠被解釋為很多意思，所以在命名的時候應該盡量避免使用。
Step 3. 將 token 指定給元件 — Component tokens
以元件為單位去限定設計標籤的使用。一個 System token 可以應用在很多個元件上，但是當我們想要更改其中一個元件的顏色時該怎麼辦？Component token 將語意化的 System tokens 劃分為更細的群組，方便大家能夠更靈活的使用設計標籤。
以元件為單位去限定設計標籤的使用。一個 System token 可以應用在很多個元件上，但是當我們想要更改其中一個元件的顏色時該怎麼辦？Component token 將語意化的 System tokens 劃分為更細的群組，方便大家能夠更靈活的使用設計標籤。
Figma plugin工具 — Figma tokens
Figma tokens這個插件能夠協助設計師管理顏色、文本樣式以及其他屬性；你可以利用這個插件來進行簡單的顏色、文本樣式管理，也可以用他來搭建多個設計系統，包含參考、比例數值。
這邊我們用間距來舉例，你可以在 Figma token 中定義間距的數值，並將他應用在使用 auto-layout 的群組中。
也可以使用參考設計標籤，在數值輸入的部分 Figma token 支援數學式，所以你可以將間距設定為 {spacing.base}*2
在建立好設計標籤之後，可以直接將他應用至設計稿中。
我們也可以在插件中直接預覽 json 格式下的設計標籤。
另外，Figma token 這個插件也能夠直接導出 JSON 檔案，方便我們在不同的 Figma 檔案中快速地進行沿用，因為有時候一個專案中會有很多不同的平台分別使用不同的檔案，這個功能便能夠幫助我們維持設計的一致性，真的非常的方便！（來自同事 Mila 的推薦）
結論
雖然建立 Design token 是一個浩大的工程，但是當我們建立好設計標籤時，他便能夠幫助我們更有效的運用與管理設計系統，除了能在 Figma 的檔案之間快速地沿用之外，在開發端也只需要下指令便能快速地更新至整個專案，大大的提升開發流程，也能夠讓設計與開發端的溝通更為順利。
我們認為，一個具有競爭力的UI設計師，不僅僅只專注在美學設計，更是要在開始設計的Day 1 就進行設計元件的系統化、模組化。因此，我們非常鼓勵設計師們都動手試試看，親身體驗 Design token的先苦後甘。
附註
本文參考以下文章與介紹影片：
679會員
20內容數
Able Studio 以人為本，相信設計應該是人們使用的，而不是為設計而設計的，因此我們致力於創造美觀、易用、有意義的設計。我們希望能透過文章的分享，讓更多人認識到 UI/UX 的重要性，你的閱讀對我們來說將會是最大的支持。
留言0
查看全部
你可能也想看
Google News 追蹤
提問的內容越是清晰，強者、聰明人越能在短時間內做判斷、給出精準的建議，他們會對你產生「好印象」，認定你是「積極」的人，有機會、好人脈會不自覺地想引薦給你
排版微系列調專門分享如何透過一些調整讓設計與排版更好看，並且每張設計都會說明為何調整的原因，以及原本設計可能有的問題。
如果你是設計初學者那這份內容會很適合你，因為會很細節的去講解排版原因，如果你看完喜歡，我每月會有三篇微調詳解固定分享給訂閱會員，歡迎訂閱。
在工作或創作中，有時候我們會陷入想不出好點子的困境。這篇文章裡介紹瞭如何透過系統化的發想流程，在大量的爛點子中挖掘真正有潛力的點子。從點子的創意公式到建立個人的點子庫，作者分享了多種從垃圾中找出好點子的方法。
引言：
相信各位有興趣於設計的朋友，也會經常苦惱於毫無靈感的時候。但只要運用以下幾種方法，相信會令大家茅塞頓開，靈感湧現。
1. 研究和理解目標受眾：
研究和理解目標受眾是設計師成功的關鍵之一。透過深入了解目標受眾的偏好、需求、價值觀和使用習慣，設計師能夠創建出更具吸引力和有效的設計方案。
對於設計師來說，理解並應用正確的顏色模型變得越來越重要。本篇要分享給各位的是，如何使用Canva工具來校對CMYK顏色，這不僅是設計的基礎元素之一，更是溝通與表達創意的關鍵。然而，很多人可能會困惑為什麼他們在屏幕上看到的顏色與印刷出來的顏色常常不符。這主要是因為螢幕（RGB顏色模型）和印刷設備（CM
在數位設計的世界裡，細節決定成敗，而「疊印」與「去底色」就是這個世界裡的兩個重要概念。 對每位設計師來說，理解並正確應用這兩個概念，是將設計作品從好到優的關鍵一步。 今天，我們就來深入探討這兩個概念，以及它們在現代設計中的應用與挑戰。
解密疊印
在設計完稿文件時，「疊印」這個概念至關重要。它
排版微系列調專門分享如何透過一些調整讓設計與排版更好看，並且每張設計都會說明為何調整的原因，以及原本設計可能有的問題。
如果你是設計初學者那這份內容會很適合你，因為會很細節的去講解排版原因，如果你看完喜歡，我每月會有三篇微調詳解固定分享給訂閱會員，歡迎訂閱。
以下內容會說明每個設計調整的原因跟
替產業做設計
有人要我談程式設計，那我就稍微談一下。我從事的大都是產業的工作，所以我們也從如何替產業做設計來談起。基本上，每個產業都會有自己的作業流程，大同小異。但是基礎來做都是一樣的，都會有客戶、物料、產品、供應商、員工等資料。不同的是，由於企業型態的不同，他們每個人有不同的作業流程。這個作業流
在數位設計的世界中，我們總是被色彩所包圍，而其中一個關鍵的元素就是色彩描述檔（又稱：描述檔、ICC色彩描述檔）。
它是一個將印表機、螢幕等裝置具備的色域資訊數值化的檔案唷！或許你也曾經思考過，當我們看到[R:0/G:0/B:255]或是[C:100%/M:100%/Y:0%]這樣的數值時，心中
文案設計是一種重要的視覺傳達技巧，透過文字、圖形、色彩等元素的搭配，傳達出品牌或產品的訊息。其中，色彩是文案設計中不可或缺的元素，它可以影響人們的視覺感受、情緒和心理。學會利用色彩在文案設計中，可以讓你的設計更加吸引人，一眼就被看見。以下將介紹7種常見顏色在文案設計中的魔力，以及它們適合用在哪裡
提問的內容越是清晰，強者、聰明人越能在短時間內做判斷、給出精準的建議，他們會對你產生「好印象」，認定你是「積極」的人，有機會、好人脈會不自覺地想引薦給你
排版微系列調專門分享如何透過一些調整讓設計與排版更好看，並且每張設計都會說明為何調整的原因，以及原本設計可能有的問題。
如果你是設計初學者那這份內容會很適合你，因為會很細節的去講解排版原因，如果你看完喜歡，我每月會有三篇微調詳解固定分享給訂閱會員，歡迎訂閱。
在工作或創作中，有時候我們會陷入想不出好點子的困境。這篇文章裡介紹瞭如何透過系統化的發想流程，在大量的爛點子中挖掘真正有潛力的點子。從點子的創意公式到建立個人的點子庫，作者分享了多種從垃圾中找出好點子的方法。
引言：
相信各位有興趣於設計的朋友，也會經常苦惱於毫無靈感的時候。但只要運用以下幾種方法，相信會令大家茅塞頓開，靈感湧現。
1. 研究和理解目標受眾：
研究和理解目標受眾是設計師成功的關鍵之一。透過深入了解目標受眾的偏好、需求、價值觀和使用習慣，設計師能夠創建出更具吸引力和有效的設計方案。
對於設計師來說，理解並應用正確的顏色模型變得越來越重要。本篇要分享給各位的是，如何使用Canva工具來校對CMYK顏色，這不僅是設計的基礎元素之一，更是溝通與表達創意的關鍵。然而，很多人可能會困惑為什麼他們在屏幕上看到的顏色與印刷出來的顏色常常不符。這主要是因為螢幕（RGB顏色模型）和印刷設備（CM
在數位設計的世界裡，細節決定成敗，而「疊印」與「去底色」就是這個世界裡的兩個重要概念。 對每位設計師來說，理解並正確應用這兩個概念，是將設計作品從好到優的關鍵一步。 今天，我們就來深入探討這兩個概念，以及它們在現代設計中的應用與挑戰。
解密疊印
在設計完稿文件時，「疊印」這個概念至關重要。它
排版微系列調專門分享如何透過一些調整讓設計與排版更好看，並且每張設計都會說明為何調整的原因，以及原本設計可能有的問題。
如果你是設計初學者那這份內容會很適合你，因為會很細節的去講解排版原因，如果你看完喜歡，我每月會有三篇微調詳解固定分享給訂閱會員，歡迎訂閱。
以下內容會說明每個設計調整的原因跟
替產業做設計
有人要我談程式設計，那我就稍微談一下。我從事的大都是產業的工作，所以我們也從如何替產業做設計來談起。基本上，每個產業都會有自己的作業流程，大同小異。但是基礎來做都是一樣的，都會有客戶、物料、產品、供應商、員工等資料。不同的是，由於企業型態的不同，他們每個人有不同的作業流程。這個作業流
在數位設計的世界中，我們總是被色彩所包圍，而其中一個關鍵的元素就是色彩描述檔（又稱：描述檔、ICC色彩描述檔）。
它是一個將印表機、螢幕等裝置具備的色域資訊數值化的檔案唷！或許你也曾經思考過，當我們看到[R:0/G:0/B:255]或是[C:100%/M:100%/Y:0%]這樣的數值時，心中
文案設計是一種重要的視覺傳達技巧，透過文字、圖形、色彩等元素的搭配，傳達出品牌或產品的訊息。其中，色彩是文案設計中不可或缺的元素，它可以影響人們的視覺感受、情緒和心理。學會利用色彩在文案設計中，可以讓你的設計更加吸引人，一眼就被看見。以下將介紹7種常見顏色在文案設計中的魔力，以及它們適合用在哪裡