使用者介面設計課程講義
設計系統＋Figma 變數
改一次，全部跟著變
把情緒板的顏色與字體，變成有名字的變數和可以重複使用的元件。用拾器 17 頁設計系統和讀菇 UI Kit 兩個案例看懂，再一步一步在 Figma 建出自己的 Variables。
開始之前：先看 11 分鐘影片
設計系統聽起來很抽象，其實就是「把顏色、字級、間距取好名字，做成可以重複使用的變數和元件」。這個單元也把 ui03 時來不及講的 Figma 變數（Variables）一步一步補完。
設計系統 × Figma 變數（11 分鐘）
點右邊的章節，影片會直接跳到那一段；字幕已經在畫面上。
30 秒看懂
設計系統＝一盒樂高
先規定積木的顏色和尺寸（變數），再做好零件（元件），畫面就是用零件組出來的。
改一次，全部跟著變
做到第 10 頁主色還是同一個綠；要換品牌色、做深色模式，只改一個地方。
Figma Variables
Primitive（原始色）→ Semantic（用途）→ 綁到元件。下面 04 章有 8 步驟圖解。
學習路線：4 段，照順序走
兩個案例的 Figma 檔（可複製來研究）
想在自己的 Figma 裡研究？登入 Figma → 打開上面的連結 → 左上角檔名旁的 ⌄ → Duplicate to your drafts，就有一份自己的副本可以點開變數、元件來看。
設計系統是什麼：改一次，全部跟著變
先玩一下：左邊的手機每個顏色都是「寫死」的色碼，右邊綁了變數。點上面的顏色，比比看兩邊各要改幾次。
沒有設計系統色碼寫死
已經改了 0 次，還有地方沒換到……
有設計系統綁 color/brand/primary
只改了 0 次，整個 App 一起換
左邊每點一次只改得到一個地方（就像一頁一頁手動改）；右邊所有用到「品牌主色」的地方同時更新，連圓角也能一起調。
五層結構：畫面是「組」出來的
由下往上蓋。點每一層看拾器怎麼做。
情緒板、風格指南、設計系統，差在哪？
決定方向
氛圍拼貼：這個 App 應該給人什麼感覺。
列出規格
色票、字體清單：看得到，但還不能直接用。
直接拿來用
變數＋元件＋使用說明：拉進畫面就能用，改了會同步。
拾器 Pick It：17 頁設計系統導覽
拾器把整套設計系統整理在同一個 Figma 頁面，共 17 頁。不用背，只要知道每一頁在回答什麼問題。左邊點頁碼，右邊看「重點」和「換成你的主題要做什麼」。
不用做到 17 頁。拾器是完整示範；你的作業只要做「基礎＋變數＋1 個元件＋1 個畫面」（見 07 章），等於這裡的 02、03、04、05、08、12。
Token 三層：原始值 → 用途 → 元件
Token（設計變數）就是「有名字的值」。拾器分三層：Primitive 只描述長相，Semantic 描述用途，Component 再指向 Semantic。點下面任一列，看它用在手機的哪裡；再改改看 Primitive 的顏色。
green/900只有色碼color/brand/primary描述用途button/primary/background用在哪個元件| Semantic（畫面用這個） | 指向 Primitive | 色碼 | 用在哪 |
|---|---|---|---|
color/brand/primary | ⌘ green/900 | #173F3A | 品牌、主要按鈕、選取中 |
color/brand/secondary | ⌘ terracotta/500 | #C97950 | 價格、重點提示 |
color/background/default | ⌘ paper/100 | #F4F0E7 | App 背景 |
color/surface/default | ⌘ white | #FFFFFF | 卡片、輸入框、導覽列 |
color/text/primary | ⌘ neutral/900 | #2C3431 | 主要文字 |
color/text/secondary | ⌘ neutral/700 | #5F6B66 | 次要文字、說明 |
color/border/default | ⌘ neutral/300 | #D5DBD6 | 邊框、分隔線 |
命名原則：寫用途，不要寫長相
color/text/primary button/primary/background spacing/16 radius/medium
用 / 分層（Figma 會自動變資料夾）；換主題後名字依然正確。
深綠色文字 首頁按鈕橘 灰線2-final Color 2
看顏色取名，改版後就名不符實；沒分層、中英混雜也很難找。
拾器的命名公式：類別／角色／屬性／狀態，例如 color/text/secondary、button/primary/background。Light／Dark 切換時，名字不變，只換它指向哪個 Primitive。
Figma 變數：8 步驟建立第一組 Variables
ui03 的變數工作坊來不及講，這裡一步一步補完。左邊選步驟，中間是 Figma 畫面示意（黃框是要點的地方），右邊是操作說明。每做完一步就打勾，瀏覽器會記住進度。
畫面為示意，按鈕位置以你使用的 Figma 版本為準；功能名稱（Local variables、Create collection、Create alias、Mode）與官方一致。
做完了嗎？三個方法檢查
看 Fill 有沒有名字
出現變數名稱標籤才算綁定；只看到色碼就是寫死的。
畫面只套語意變數
不要直接套 green/900，要套 color/brand/primary。
改一次 Primitive
所有畫面一起變色，就成功了。
變數和樣式（Styles）怎麼選？
| 要做的事 | 用什麼 | 原因 |
|---|---|---|
| 品牌色、文字色、背景色 | Color 變數 | 要能切 Light／Dark、換品牌 |
| 間距、圓角、元件高度 | Number 變數 | 可以綁到 Auto layout 的 gap、padding、corner radius |
| 標題、內文等文字設定 | Text Style（字級、行高可再綁 Number 變數） | 文字樣式包含字體、字重、行高，一次套用最方便 |
| 陰影、模糊 | Effect Style | 效果目前用樣式管理 |
| 漸層、圖片填色 | Color Style | 變數只能存單一顏色 |
元件與狀態：一個按鈕，不只一種樣子
元件做好之後，還要先想好它所有可能的狀態。在 Figma 裡，這些狀態是同一個元件的 Variant，用屬性切換。下面組組看拾器的按鈕，注意名稱和綁定的變數怎麼跟著變。
狀態不能只靠顏色。錯誤要有文字說明、處理中要有圖示，色弱的使用者才看得懂。
在 Figma 做按鈕元件
- 先做一個 Default 按鈕
用 Auto layout 包文字，Fill 綁
color/brand/primary、圓角綁radius/medium，按 ⌘/Ctrl＋⌥/Alt＋K 建立元件。 - 加 Variant
右側面板 ＋ Add variant，複製出 Pressed、Disabled，改它們的變數（例如 Disabled 用
color/surface/disabled）。 - 屬性命名
屬性用 Type／Size／State，值用 Primary、Large、Default……圖層名稱就會是
Type=Primary, Size=Large, State=Default。 - 畫面上用「實例」
從 Assets 拉出來的是實例（Instance）；之後改元件本體，所有實例一起更新。不要直接複製貼上圖層。
讀菇：同一套方法，換一組 Token
讀菇（野外毒菇識別 App）的 Brand Foundations 有 11 個顏色變數：moss 苔蘚綠、alert 警示紅、caution 警告黃、bone 骨白、ink 墨黑。下面同一組元件，切換三組 Token 看看——最後一組可以換成你的期中主題顏色。
讀菇的語意對應為教學示意（依 Brand Foundations 的色票與 UI Kit 用色整理）。元件結構完全一樣，只換變數的值，就變成另一個品牌。
讀菇的 Figma 板子
Brand Foundations
11 個顏色變數（@color/moss-900 #1B211C……）、6 個綁變數的文字樣式（Noto Serif TC 標題＋Noto Sans TC 內文）、Primary／Secondary 按鈕、2px 線性圖示。
UI Kit
圖示系統、按鈕系統（Default／Active／Disabled、Ghost、Icon），以及 6 個共用區塊：毒性分類標籤、風險等級徽章、分類篩選標籤、物種卡片、安全提醒提示條、空狀態。
線框稿 ＋ 設計系統 ＝ 精稿
拖曳中間的把手，左邊是灰階線框稿，右邊是套上設計系統的精稿。版面和流程幾乎一樣——期中的線框稿，就是精稿的骨架。
線框稿精稿
線框稿精稿本週作業：用你的期中主題，做一套迷你設計系統
把 ui06 情緒板定出的顏色與字體，變成 Figma 裡真的可以用的變數和元件。完成後放進作業檔，期末的 Mockup 精稿就直接用這一套。
省力做法：用 06 章「我的期中主題」先試配色，按「複製我的 Token 清單」，照著在 Figma 建 Semantic 變數就好。
相關連結
拾器設計系統 17 頁、讀菇 Brand Foundations／UI Kit 取自課程 Figma 示範檔；Figma Variables 介面以官方版本為準，可能隨時間調整。內容整理於 2026 年 10 月。