跨越設計與程式的鴻溝 — Design Tokens

更新於 發佈於 閱讀時間約 9 分鐘
raw-image
我覺得這個顏色太淺了,可能需要調整一下~
好的,沒問題!

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

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

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

Design token 是什麼?

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

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

raw-image

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

raw-image

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

raw-image

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

raw-image

如何建立 Design token?

目前設計標籤還沒有一個統一的格式能夠遵循,日前 W3C Design Token Community Group 在 2022 Figma schema 中便提出了初步的命名架構建議,另外 Google 在 Material Design 3 中也有提供他們對於設計標籤的建立指南。

Design token 的架構

想要建立一套比較完整的設計標籤,就必須包含他的名稱、數值、還有他的類別。

raw-image

當然你也可以加上關於這個標籤的描述,以便其他夥伴(協同作業者)更好的理解與使用。

raw-image
raw-image

同樣的名字可能會被用在很多的物件上,這個時候我們就能將設計標籤分組,可以依據品牌、類別、使用方式等等來進行分組。

raw-image

隨著群組的不同,每個標籤的路徑也會不同,這樣的架構能為設計標籤產生出一個獨一無二的名字。

raw-image

在設計標籤中還有一個很重要的概念,那就是 Aliases(別名)。同樣的數值可能會被用在許多不同的元件上,使用別名可以幫助你在需要更改單一元件的內容時,不會更動到其他也使用這個內容的元件,如下圖所示,你只需要調整箭頭所指的方向就好了。

raw-image

這樣的架構在設計不同模式的時候非常好用,舉例來說,當你想設計夜間模式的時候,只需要改變元件設計標籤所指的參考標籤,除了能讓設計開發流程變得更簡單,也能夠更有效的管理整個設計系統。

raw-image
raw-image

在Google的Material Design當中,是將設計標籤分為 ReferenceSystem、和 Component 三種類型,並對三個類型之間的層級關係提供近一步說明。

raw-image

我們也可以將不同的設計標籤組合為一個排版組合,因為同樣的數值可能會被運用在多種元件之中。舉例來說,標題一和標題二使用相同的字型,當我們想要更改字型的時候,只需要修改標籤內容即可。

raw-image

Design token 的命名步驟(以 Material Design 為例)

Step 1. 將數值轉換為最基礎的 token — Reference tokens
Reference token 包含了設計系統中可用的所有樣式選項,有時候會稱作 global token。將數值轉換為 Reference token 能夠幫助我們更好的去管理設計系統中所使用到的樣式與數值。

raw-image

Step 2. 定義 token 的實際屬性 — System tokens
System token 是語意化的 token,他定義了設計標籤的實際屬性,通過語意化的命名,定義了設計標籤的使用場景。在命名的時候,可以避免使用會和程式碼互相衝突的文字,舉例來說 type 在技術端能夠被解釋為很多意思,所以在命名的時候應該盡量避免使用。

raw-image

Step 3. 將 token 指定給元件 — Component tokens
以元件為單位去限定設計標籤的使用。一個 System token 可以應用在很多個元件上,但是當我們想要更改其中一個元件的顏色時該怎麼辦?Component token 將語意化的 System tokens 劃分為更細的群組,方便大家能夠更靈活的使用設計標籤。

raw-image

Figma plugin工具 — Figma tokens

raw-image

Figma tokens這個插件能夠協助設計師管理顏色、文本樣式以及其他屬性;你可以利用這個插件來進行簡單的顏色、文本樣式管理,也可以用他來搭建多個設計系統,包含參考、比例數值。

這邊我們用間距來舉例,你可以在 Figma token 中定義間距的數值,並將他應用在使用 auto-layout 的群組中。

raw-image

也可以使用參考設計標籤,在數值輸入的部分 Figma token 支援數學式,所以你可以將間距設定為 {spacing.base}*2

raw-image

在建立好設計標籤之後,可以直接將他應用至設計稿中。

raw-image

我們也可以在插件中直接預覽 json 格式下的設計標籤。

raw-image

另外,Figma token 這個插件也能夠直接導出 JSON 檔案,方便我們在不同的 Figma 檔案中快速地進行沿用,因為有時候一個專案中會有很多不同的平台分別使用不同的檔案,這個功能便能夠幫助我們維持設計的一致性,真的非常的方便!(來自同事 Mila 的推薦

結論

雖然建立 Design token 是一個浩大的工程,但是當我們建立好設計標籤時,他便能夠幫助我們更有效的運用與管理設計系統,除了能在 Figma 的檔案之間快速地沿用之外,在開發端也只需要下指令便能快速地更新至整個專案,大大的提升開發流程,也能夠讓設計與開發端的溝通更為順利。

我們認為,一個具有競爭力的UI設計師,不僅僅只專注在美學設計,更是要在開始設計的Day 1 就進行設計元件的系統化、模組化。因此,我們非常鼓勵設計師們都動手試試看,親身體驗 Design token的先苦後甘。

附註

本文參考以下文章與介紹影片:

Figma Tokens | Figma Community
Figma Community plugin - Gives you the ability to use Design Tokens that can be used for a whole range of design…www.figma.com

Design Tokens
Design tokens are the visual design atoms of the design system - specifically, they are named entities that store…www.lightningdesignsystem.com

Design tokens - Material Design 3
Tokens store style values like colors and fonts so the same values are used across designs, code, tools, and platforms.m3.material.io

UI 设计 Design Token 系列教学 02:Token 的 3 个层级 新像素_哔哩哔哩_bilibili
本期视频文档:https://www.yuque.com/docs/share/d61b026a-8981-4909-a5b0-bda0bf0b35e0?#Design Token…www.bilibili.com

註:本文為Able實習生 Cheryl Fang 撰寫, Steven Yeh 編輯。

留言
avatar-img
留言分享你的想法!
avatar-img
ABLE 的沙龍
678會員
20內容數
Able Studio 以人為本,相信設計應該是人們使用的,而不是為設計而設計的,因此我們致力於創造美觀、易用、有意義的設計。我們希望能透過文章的分享,讓更多人認識到 UI/UX 的重要性,你的閱讀對我們來說將會是最大的支持。
ABLE 的沙龍的其他內容
2023/06/12
前言 在第二篇文章中,我們更明確的瞭解空間性設計的眼、手操作搭配,接下來本文章進入到UI介面的設計解析,本篇將詳細介紹空間性設計中的使用者介面核心原則。 Design spatial user interfaces 本篇將首先討論如何設計清晰易讀的App icon,以及設計時要考慮的UI基礎和設計原
Thumbnail
2023/06/12
前言 在第二篇文章中,我們更明確的瞭解空間性設計的眼、手操作搭配,接下來本文章進入到UI介面的設計解析,本篇將詳細介紹空間性設計中的使用者介面核心原則。 Design spatial user interfaces 本篇將首先討論如何設計清晰易讀的App icon,以及設計時要考慮的UI基礎和設計原
Thumbnail
2023/06/11
前言 如果你閱讀完本系列的第一篇文章,必定會對於Apple Vision Pro的產品更感興趣。本篇文章中,我們將介紹在空間性設計中,是怎麼樣進行互動的。 Design for spatial input 空間性設計的操作,除了用手以外,來多了眼睛作為操作工具。另外聲音(語音)也會是一個操作媒介。當
Thumbnail
2023/06/11
前言 如果你閱讀完本系列的第一篇文章,必定會對於Apple Vision Pro的產品更感興趣。本篇文章中,我們將介紹在空間性設計中,是怎麼樣進行互動的。 Design for spatial input 空間性設計的操作,除了用手以外,來多了眼睛作為操作工具。另外聲音(語音)也會是一個操作媒介。當
Thumbnail
2023/06/11
睽違8年,2023 年 6 月 5 日的WWDC蘋果開發者大會上,Tim Cook再次啟動了one more thing,這次介紹的產品為Apple Vision Pro — Apple 第一部空間運算設備。 在當天的Keynote speech中,Apple用了40分鐘來介紹Vision Pro
Thumbnail
2023/06/11
睽違8年,2023 年 6 月 5 日的WWDC蘋果開發者大會上,Tim Cook再次啟動了one more thing,這次介紹的產品為Apple Vision Pro — Apple 第一部空間運算設備。 在當天的Keynote speech中,Apple用了40分鐘來介紹Vision Pro
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
替產業做設計 有人要我談程式設計,那我就稍微談一下。我從事的大都是產業的工作,所以我們也從如何替產業做設計來談起。基本上,每個產業都會有自己的作業流程,大同小異。但是基礎來做都是一樣的,都會有客戶、物料、產品、供應商、員工等資料。不同的是,由於企業型態的不同,他們每個人有不同的作業流程。這個作業流
Thumbnail
替產業做設計 有人要我談程式設計,那我就稍微談一下。我從事的大都是產業的工作,所以我們也從如何替產業做設計來談起。基本上,每個產業都會有自己的作業流程,大同小異。但是基礎來做都是一樣的,都會有客戶、物料、產品、供應商、員工等資料。不同的是,由於企業型態的不同,他們每個人有不同的作業流程。這個作業流
Thumbnail
以往寫網頁經常使用到 Google Fonts 裡的 Material Icons 服務,但大多都是直接引入預設設定,最多就是在官方提供的簡易編輯器做一些 icon 樣式填滿、線框的調整而已,仔細看了官方文件之後,才發現原來還有一些設定可以做調整,使用上更加彈性,因此寫了這篇文章記錄下來。
Thumbnail
以往寫網頁經常使用到 Google Fonts 裡的 Material Icons 服務,但大多都是直接引入預設設定,最多就是在官方提供的簡易編輯器做一些 icon 樣式填滿、線框的調整而已,仔細看了官方文件之後,才發現原來還有一些設定可以做調整,使用上更加彈性,因此寫了這篇文章記錄下來。
Thumbnail
現今這個信息爆炸的時代,我們需要一個好的筆記工具來幫助我們管理和整理資訊,而Notion 就是一個非常好用的筆記工具。不過,單調的黑白文字,總讓人覺得索然無味,那麼我們該如何讓Notion更加生動呢?快一起看下去,只要兩個步驟就可以讓你在 Notion 打造出類紙膠帶 or 重點註記的文字樣式!!!
Thumbnail
現今這個信息爆炸的時代,我們需要一個好的筆記工具來幫助我們管理和整理資訊,而Notion 就是一個非常好用的筆記工具。不過,單調的黑白文字,總讓人覺得索然無味,那麼我們該如何讓Notion更加生動呢?快一起看下去,只要兩個步驟就可以讓你在 Notion 打造出類紙膠帶 or 重點註記的文字樣式!!!
Thumbnail
I find the color way too light, we need to adjust it. Ok, no problem. So we find the components fit the design and adjust it manually over and over ag
Thumbnail
I find the color way too light, we need to adjust it. Ok, no problem. So we find the components fit the design and adjust it manually over and over ag
Thumbnail
我覺得這個顏色太淺了,可能需要調整一下~ 好的,沒問題! 於是你在設計系統中開始尋找使用到這個顏色的所有元件,然後一個一個修改,改完一個檔案還有另一個,好不容易改完了卻在測試的時候發現還有幾個地方沒有改到⋯⋯天阿~瘋掉!!! 這樣令人抓狂的場景不只有在設計的時候會發生,當我們交付設計稿之後的開發階段
Thumbnail
我覺得這個顏色太淺了,可能需要調整一下~ 好的,沒問題! 於是你在設計系統中開始尋找使用到這個顏色的所有元件,然後一個一個修改,改完一個檔案還有另一個,好不容易改完了卻在測試的時候發現還有幾個地方沒有改到⋯⋯天阿~瘋掉!!! 這樣令人抓狂的場景不只有在設計的時候會發生,當我們交付設計稿之後的開發階段
Thumbnail
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色,一直以來開發上都是在找好適合的顏色後,使用 Sass 將色票紀錄到變數再做使用,不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...
Thumbnail
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色,一直以來開發上都是在找好適合的顏色後,使用 Sass 將色票紀錄到變數再做使用,不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...
Thumbnail
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
Thumbnail
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
Thumbnail
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
Thumbnail
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
Thumbnail
在youtube上找尋前端的小專案來練習,就發現了這個不是很難,又可以讓我練習怎麼把javascript用在網頁裡的專案,於是就跟者影片做了一遍。當然,比起前一個寫遊戲的影片來說,可以說是輕鬆很多。
Thumbnail
在youtube上找尋前端的小專案來練習,就發現了這個不是很難,又可以讓我練習怎麼把javascript用在網頁裡的專案,於是就跟者影片做了一遍。當然,比起前一個寫遊戲的影片來說,可以說是輕鬆很多。
Thumbnail
問了問身邊的同事:「把你的Java Code改成用C的源碼風格呈現的話,你會因此就難以理解同一份程式嗎?」,或是反過來:「若同事的源碼和你的Domain完全不同,但和你的源碼風格一致,你會因此覺得這份源碼比較容易理解嗎?」 我真的都得到肯定的答案,雖然有點難以理解…
Thumbnail
問了問身邊的同事:「把你的Java Code改成用C的源碼風格呈現的話,你會因此就難以理解同一份程式嗎?」,或是反過來:「若同事的源碼和你的Domain完全不同,但和你的源碼風格一致,你會因此覺得這份源碼比較容易理解嗎?」 我真的都得到肯定的答案,雖然有點難以理解…
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News