使用者介面設計課程講義

Unit 07．設計系統 ＼ Design System ＋ Variables

把「風格」變成可以
重複使用的規則SYSTEM

情緒板決定了長相，設計系統 把它拆成能重複使用的代幣。

拾器的情緒板已經定出主色、輔色、字體，但畫面越做越多，同一個顏色打不同色碼、同一個按鈕長得不一樣的問題就會開始出現。這一關把情緒板的成果拆解成色彩、字體、間距、元件四類「設計代幣 Design Tokens」，整理成一份團隊都能查、都能沿用的設計系統；後半段進到 Figma 真正的 Variables 功能，學怎麼用「模式 Mode」讓同一份設計系統同時支援 Light／Dark，甚至未來的多品牌切換。

0類設計代幣：色彩、字體、間距、元件
0種模式，同一套 Variables 直接切換
0份設計系統，貫穿拾器接下來所有畫面

內容整理於 2026 年 9 月．中國科大視傳系｜使用者介面設計

拾
拾器 Pick It 這一關要決定：怎麼讓風格可以重複使用
01設計系統是什麼 02色彩代幣 03文字與間距 04元件與狀態 05Figma Variables 06模式切換
這堂課怎麼上 設計系統最怕「每頁各自為政」——每一關先定義一種代幣（色彩、字體、間距、元件），到 05 關才正式碰 Figma Variables 這個真正的產品功能，把前面定義好的代幣變成可以綁定、可以切換模式的變數；06 關再用一個可以實際切換的 Light／Dark 範例，驗證整套系統是不是真的能重複使用。
怎麼下指令，AI 才聽得懂 延續同一個對話串——先承接情緒板定出的主色輔色，指令依序講「先拆代幣」「再定義語意色」「最後建 Variables 跟 Mode」，一步一步疊加，AI 才會給出彼此對得上、不會語意色跟色碼互相矛盾的建議。
STAGE 01

設計系統是什麼，
為什麼情緒板不夠

什麼是設計系統？Design System（設計系統）是一套「規則＋元件＋文件＋原則」的集合：規則定義色彩、字體、間距這些最小單位；元件是用規則組出來、可以重複使用的按鈕、輸入框、卡片；文件說明怎麼用、什麼時候用；原則則是背後共同的設計語言。情緒板決定「長什麼樣子」，設計系統決定「怎麼把長相拆成可以一直重複使用的規則」。

跟情緒板、風格指南（Style Guide）差在哪？三者常被搞混：情緒板是氛圍拼貼，用來「決定方向」；風格指南通常只列出色票、字體這類靜態規範，是一份「參考文件」；設計系統則更進一步，把規範做成「可以直接套用的元件庫」，改一個代幣，所有用到它的畫面就一起更新——這正是後面 Figma Variables 要解決的問題。

為什麼一定要做？沒有設計系統，每個人心裡的「主色」色碼可能都不一樣，改版時要一頁一頁手動修改；有了設計系統，色彩、字體、間距都變成「代幣 Token」，只要維護代幣本身，套用它的所有畫面就會一起同步，也讓團隊有共同的語言可以溝通「這裡該用哪一個代幣」。

參考資料
操作提醒下面 02～04 關會依序把情緒板的成果拆成色彩、文字／間距、元件三類代幣；05～06 關再進到 Figma 真正的 Variables 功能，把這些代幣變成可以切換模式的變數。

承接拾器對話串．Figma Agent 已經記得情緒板定出的主色輔色

Figma Agent
拾器的情緒板做完了：主色鼠尾草綠、輔色大地棕、中性色米杏，標題字體是 Chiron GoRound TC。接下來畫面會越做越多，我想先把這些定出來的東西整理成一套設計系統，不要每頁都重新手動套色。
收到，情緒板的三個顏色跟字體我都記得。整理設計系統會分幾步：先把顏色拆成「基礎色票 Primitive」跟「語意色 Semantic」兩層，再定出文字階層跟間距階層，接著整理按鈕、輸入框這類元件的變異跟狀態，最後用 Figma 的 Variables 功能，把這些代幣變成真的可以在畫面上綁定、甚至切換 Light／Dark 模式的變數。

這串對話從 ui06 延續過來，設計系統會建立在情緒板已經定出的色彩與字體之上

STAGE 02

Step 1．色彩代幣：
Primitive 拆成 Semantic

色彩代幣通常分兩層：Primitive 基礎色票是最原始的色碼（例如 green-500 #6B8F71），只描述顏色本身，不描述用途；Semantic 語意色則描述「這個顏色要用在哪裡」（例如 color/brand/primary），背後指向某一個 Primitive。畫面上永遠只綁定語意色——之後想換主色，只要改語意色指向的 Primitive，所有畫面就會一起變。

拾器的三個情緒板色彩，分別對應到主要語意色：鼠尾草綠是主色（brand/primary），大地棕是輔色（brand/secondary），米杏是畫面底色（surface）。這一關再額外補上文字色跟三個回饋色（成功／警示／錯誤），讓色彩代幣涵蓋日常畫面會用到的所有情境。

Figma Agent 輔助
操作提醒點下面每一個語意色的按鈕，右邊會高亮對應的 Primitive 色票，並在下方顯示這個語意色實際的使用情境。

互動練習．點語意色，看它對應哪一個 Primitive 色票

#6B8F71
brand/primary→ green-500
#9C7A54
brand/secondary→ brown-500
#FAF6EF
surface/base→ cream-50
#F3EBDD
surface/raised→ cream-100
#3B2F26
text/primary→ ink-900
#4F6B54
feedback/success→ green-700
#C99A3E
feedback/warning→ amber-500
#C0503B
feedback/danger→ red-500

即時產出

「color/brand/primary」＝ Primitive green-500（#6B8F71，鼠尾草綠）——最常用的主色，用在主要按鈕、開關、強調文字。

Figma Agent
把情緒板的三個顏色，拆成 Primitive 色票跟語意色兩層，再幫我補三個回饋色（成功、警示、錯誤），飽和度要跟原本三色一致，不要用太搶眼的大紅大綠。
已經拆成兩層：Primitive 是 green-500、brown-500、cream-50、cream-100、ink-900，語意色則是 brand/primary、brand/secondary、surface/base、surface/raised、text/primary，各自指向對應的 Primitive。三個回饋色也配好了：success 用比主色更深的綠、warning 用低飽和琥珀色、danger 用磚紅色，飽和度都跟原本三色一致。

這八個語意色，05 關會直接建成 Figma Variables

STAGE 03

Step 2．文字階層與
8px 間距系統

字體代幣不是只選一個字型，而是定出一組「文字階層 Type Scale」：每一級固定字級、字重、行高，畫面上的每個文字都對應某一級，而不是每次都手動調整像素。拾器延續情緒板選定的字體：標題用 Chiron GoRound TC（圓潤親和），內文用 Noto Sans TC（穩定好讀）。

間距同樣需要系統化：多數設計系統用 8px 為基礎單位（也有團隊用 4px），所有留白、間距都是基礎單位的倍數，例如 8、16、24、32、48px，畫面排起來才會有一致的節奏感，也方便跟開發溝通「這裡的間距是 spacing-3」而不是「大概 22px 左右」。

參考資料
操作提醒點右邊分頁切換「文字階層」與「間距階層」，看拾器目前定出的完整代幣表。

互動練習．切換分頁，看文字與間距代幣表

代幣字級／行高字重用途示範
text/h132 / 40px900頁面主標題拾器
text/h224 / 32px800區塊標題拾器
text/h320 / 28px700卡片標題拾器
text/body16 / 26px400內文段落拾器
text/small13 / 20px500輔助文字、標籤拾器
text/caption11 / 16px500時間戳、版權說明拾器
Figma Agent
延續情緒板選的字體，幫我定一組文字階層，H1 到說明文字都要有；間距用 8px 為基礎單位，幫我列出從最小到最大常用的幾個級距，再補兩個圓角代幣。
文字階層定了六級：h1（32px／900）到 caption（11px／500），標題延續 Chiron GoRound TC，內文用 Noto Sans TC。間距用 8px 為基礎，列了 4～48px 共六級（spacing-1 到 spacing-6）；圓角補了 radius/sm（8px，用在輸入框）跟 radius/lg（20px，用在卡片跟大按鈕，也是全站目前在用的圓角值）。

這些代幣，04 關會直接套進按鈕跟輸入框元件

STAGE 04

Step 3．元件的
變異與狀態

元件是代幣真正被組裝起來的地方。同一個按鈕通常有幾種變異 Variant（例如 Primary／Secondary／Ghost，代表重要程度不同），每種變異又有幾種狀態 State（Default／Hover／Disabled，代表使用者當下的互動情形）。在 Figma 裡，這通常用「Component Set」搭配 Variant 屬性管理，而不是為每個組合各畫一個獨立元件。

下面的按鈕都是用 02、03 關定出的色彩與間距代幣組出來的，不是另外選色——點右邊的狀態按鈕，看同一組變異在不同狀態下，套用的到底是哪個代幣。

你的產出
操作提醒正式製作時，記得同時定義輸入框、標籤這類常用元件的變異與狀態，不是只有按鈕。

互動練習．切換狀態，看三種按鈕變異的代幣套用

主要動作Primary
次要動作Secondary
文字按鈕Ghost

即時產出

Default．Primary 套用 color/brand/primary 當底色、text/primary 反白當文字；Secondary 只用 color/brand/secondary 當邊框；Ghost 沒有底色，只有 text/primary 文字。

Figma Agent
幫按鈕定三種變異：Primary、Secondary、Ghost，每種都要有 Default、Hover、Disabled 三種狀態，顏色都要用剛剛定好的語意色，不要另外挑新顏色。
三種變異都只用 02 關定的語意色：Primary 底色是 brand/primary，Hover 時疊一層更深的 green-700（跟 feedback/success 共用同一個 Primitive，維持色相一致），Disabled 則把不透明度降到 40%；Secondary 跟 Ghost 的邏輯相同，只是換成邊框或純文字呈現，狀態切換時改的都是既有代幣的深淺或透明度，沒有新增任何色碼。

同一組代幣，套出三種變異、九種狀態組合，這就是設計系統「重複使用」的意義

STAGE 05

Figma Variables 是什麼：
比 Style 更進一步

前面 02～04 關定出的代幣，目前還只是「講好的規則」；Figma 的 Variables（變數）功能，才是真正把這些代幣做成 Figma 檔案裡可以綁定、可以運算、可以切換的物件。跟舊版的 Style（色彩樣式、文字樣式）比起來，Variables 多了三個關鍵能力：可以有多個模式 Mode（同一個變數在 Light／Dark 下給不同值）、可以互相參照 Alias（語意變數指向 Primitive 變數）、也能綁定更多屬性（不只是顏色，圓角、間距、甚至圖層的顯示與否都可以）。

Variables 用 Collection（集合）組織：拾器可以建兩個集合——「Primitives」放最原始的色票、數字；「Semantic」放語意變數，每一個都用 Alias 指向 Primitives 集合裡對應的變數，架構正好對應到 02 關拆的兩層色彩代幣。

參考資料
操作提醒Figma 官方畫面與功能名稱可能隨版本調整，實際操作以當下 Figma 介面為準。

Figma Variables．四種類型與典型用途

Color 色彩變數 例如 color/brand/primary，可以綁定到 Fill、Stroke。
Number 數字變數 例如 spacing-3、radius/lg，可以綁定圓角、間距、Auto Layout 的 Gap。
String 文字變數 例如按鈕文案的多語系版本，切換模式就換一種語言。
Boolean 布林變數 例如某個圖層要不要顯示，常用在同一元件切換「有／無徽章」。

示意．Semantic 變數如何 Alias 參照 Primitives 集合

Semantic（Collection: Semantic） alias → Primitive（Collection: Primitives）
brand/primary→green-500 #6B8F71
surface/raised→cream-100 #F3EBDD
text/primary→ink-900 #3B2F26
feedback/danger→red-500 #C0503B
Figma Agent
把 02 關拆好的 Primitive 跟 Semantic 色彩代幣，對應到 Figma Variables 該怎麼建：要幾個 Collection？語意變數怎麼指向 Primitive？
建議兩個 Collection：「Primitives」放 green-500、brown-500、cream-50、cream-100、ink-900 這類原始色票，型別都是 Color；「Semantic」放 brand/primary、surface/base、text/primary 這類語意變數，每一個都不直接填色碼，而是用 Alias 選取 Primitives 集合裡對應的變數。畫面上的圖層永遠只綁定 Semantic 變數，之後要換色，改 Primitives 裡的值就好，所有 Alias 到它的地方會一起更新。

這組 Collection 架構，06 關會直接拿來加上 Light／Dark 兩個 Mode

STAGE 06

Modes：同一份設計，
換了模式就換了樣子

Variables 最強的地方是模式 Mode：同一個 Collection 底下可以建立多個模式（最常見是 Light／Dark，也可以是不同品牌、不同語系），每個模式給同一批變數不同的值，但畫面上的圖層完全不用重畫、也不用複製一份——只要切換 Mode，整個畫面就跟著換。

實際操作時，Mode 可以在 Figma 檔案裡手動切換做設計檢查，也可以在 Prototype 的互動設定裡，讓使用者點一個開關就即時切換模式，很適合用來做「深色模式切換」這類真實功能的原型。右邊示範同一張拾器物品卡片，切換 Light／Dark 時，背後綁定的語意變數解析出了不同的色碼。

Figma Agent 輔助
操作提醒點右邊的切換開關，同一張卡片會即時換色，下面的解析結果也會跟著更新——這就是「畫面不用重畫，只是換了模式」的實際效果。

互動練習．切換 Light／Dark，看語意變數解析出的色碼

Semantic Collection．目前模式
木作工具箱
二手木工工具箱 成色良好．鄰近校區可面交
我要領取 收藏

即時解析

Light 模式：surface/raised → cream-100 #F3EBDD．text/primary → ink-900 #3B2F26．brand/primary → green-500 #6B8F71。

Figma Agent
在 Semantic 這個 Collection 裡加一個 Dark 模式：卡片底色、文字顏色都要反過來，但主色鼠尾草綠不要變太多，讓使用者還是認得出這是拾器。
已經加好 Dark 模式：surface/raised 從米杏 #F3EBDD 換成深棕黑 #2A231D，text/primary 從深咖啡 #3B2F26 換成米杏 #F3EBDD（跟 Light 模式的底色互換，維持對比度），brand/primary 維持鼠尾草綠、只是稍微提高一點明度到 #7FA184，在深色背景上才看得清楚。畫面上的圖層完全沒有動，只是 Semantic 變數在 Dark 模式下解析出不同的值。

這就是 Variables 跟舊版 Style 最大的差別：一套變數，兩種（甚至更多）解析結果

課後作業與下一步

把拾器的操作方式，換成你自己期中案例的產品，走一次「情緒板 → 設計系統 → Variables」的流程

本週交付項目

  1. 依你的期中題目，把情緒板的主色／輔色／中性色拆成 Primitive 色票（至少 5 階）跟至少 5 個語意色（brand/primary、surface/base、text/primary、feedback/success、feedback/danger）。
  2. 定出文字階層（至少 H1／H2／內文／說明文字 4 級）與 8px 間距階層（至少 4 段），並補上 2 個圓角代幣。
  3. 挑 1 個元件（按鈕或輸入框），畫出至少 2 種變異 × 3 種狀態（Default／Hover／Disabled），顏色都要來自已經定義好的語意色。
  4. 在 Figma 建立兩個 Variable Collection：一個放 Primitive，一個放 Semantic（用 Alias 綁定 Primitive），並在 Semantic Collection 裡新增 Light／Dark 兩個 Mode。
  5. 挑一個畫面，把顏色全部換成綁定 Semantic 變數，實際切換 Mode，確認兩種模式都能正常顯示、對比度足夠。
ui06．風格設定｜情緒板 Moodboard回顧主色輔色與字體的由來← ui08．Mockup 精稿下一個教學單元→

從情緒板的主色輔色出發，拆成 Primitive／Semantic 兩層色彩代幣，加上文字、間距、元件規範，最後用 Figma 真正的 Variables 功能，建立可切換 Light／Dark 模式的設計系統；設計系統的基本架構整理自課程既有教材，Variables 操作介面與功能名稱以 Figma 官方版本為準，可能隨時間調整。內容整理於 2026 年 9 月。