跳到主要內容區塊

跨越設計與程式的鴻溝–Design Tokens(一)

                                                 Photo by Balázs Kétyi on Unsplash

 

我覺得這個顏色太淺了,可能需要調整一下~
好的,沒問題!

 

 

於是你在設計系統中開始尋找使用到這個顏色的所有元件,然後一個一個修改,改完一個檔案還有另一個,好不容易改完了卻在測試的時候發現還有幾個地方沒有改到⋯⋯天阿~瘋掉!!!

這樣令人抓狂的場景不只有在設計的時候會發生,當我們交付設計稿之後的開發階段,工程師也有可能面對相同的問題,這樣毫無效率的修改方式,不僅花費了設計師們大把的時間,也很容易讓我們設計出的產品在不同的平台上有不一致的表現。

好,那該怎麼辦呢?今天我們就要來介紹 Design Tokens 的這個概念,幫助大家進行有效的溝通,讓設計開發流程更加順利。

 

Design token 是什麼?

 

Design token 的中文有很多種說法,可以翻譯成設計令牌設計權杖、或是設計變量,但我們覺得上述用語不是很容易理解,最終我們選擇了設計標籤來稱呼。

設計標籤是一種幫助設計師和開發人員能進行有效溝通的代碼化語言,透過將數值(例如色碼、字體、間距等)編寫至設計標籤中,建立統一的代碼化語言,讓組件和設計系統可以被快速的管理,並有效的運用至 UI 設計中。

 

                         如同你會製作很多標籤去標註物品類別,讓你和他人都很好找到物品。

                                              Design token就差不多是這樣的概念。

                                            Photo by Bruno Martins on Unsplash

 

舉例來說,為了保持統一性,一個顏色可能會被用在品牌旗下的許多產品中,當我們需要去更改這個顏色時,如果沒有使用設計標籤,就會需要一個一個去整,在溝通上也會比較不方便(因為你不會在講話的時候用十六進位來表示顏色:”給我來點#E8DEF8”……)。

 

                                                     Image from: Material Design 3

 

但如果你使用了設計標籤,就只需要更改對應的標籤內容即可。以Figma工具為例,在建立與更改完設計標籤之後,可以直接輸出成JSON檔案,就能更新至設計系統,並應用在各個產品、裝置上。

 

Image from: Communicating design system decisions with design tokens — Lukas Oppermann Live

 

設計標籤的使用也能有效的幫助開發人員,利用設計標籤來取代數值,不僅可以減少錯誤輸入色碼,開發時也能夠使用 IDE 的自動提示來選擇現有的設計標籤,輸入錯誤時也能更有效率的除錯。