使用者介面設計課程講義
Figma 基本功能練習：
組件、樣式、變數
Unit 02 你已經用 Frame 畫出第一個登入頁。這一單元要讓它「做得快、改得動」：換上真實素材、把重複的東西做成組件、把顏色字體存成樣式，最後用變數一鍵換膚，並串成可以播放的 Prototype。
學習路線：5 段、15 章，一段一段來
這一單元內容比較多，所以分成 5 段。每一段都照同一個節奏：① 看說明 → ② 在頁面上的模擬器動手 → ③ 打開真實 Figma 練習檔做一次。每一章結尾都有「下一章」按鈕，讀完的章節會自動打勾。
樣式與實戰
存成色彩／文字樣式，組出三個畫面並連成原型。
學會：登入→註冊→Chat 可以點
每一章都這樣學
先懂這章要做什麼
每章開頭的大標與說明，告訴你這章的目的與完成品。
在模擬器動手
介面模擬器、組件解剖台、變數工作坊都能直接操作，不用安裝任何東西。
到真實 Figma 做一次
模擬器只是練手感，最後一定要在真的 Figma 做出來；模擬器沒有的工具（鋼筆、留言…）也請直接到 Figma 試。
認識 Figma 介面：工具、面板與基本操作
動手之前，先花 10 分鐘認識「操作台」。這一章不是看圖說故事——下面有一個可以真的操作的 Figma 迷你模擬器：先逐區導覽，再完成 8 個小任務（畫 Frame、畫矩形、改色、改名、複製…），做完你就已經會 Figma 的基本功。
建議學習順序：① 在「認識介面」點 6 個圖釘，知道每個區域是做什麼的 → ② 切到「動手練習」完成 8 個任務 → ③ 用工具圖鑑與基本操作速查補強 → ④ 用快速鍵挑戰練手感。全部都不用安裝任何東西。
Figma 迷你模擬器：導覽＋動手練習
版面仿照 Figma 新介面（UI3）：左＝Pages／Layers、中＝畫布＋底部工具列、右＝Design 面板。
① 按下鍵盤 F ② 在這裡拖曳畫出 Frame
或按右上角「載入範例登入頁」直接觀察
動手任務 0 / 8
先點一下畫布讓它取得焦點，再用快速鍵或工具列操作。完成會自動打勾。
這是教學用的簡化模擬器，不是完整的 Figma（沒有 Auto layout、鋼筆、組件等）。但操作邏輯與真實 Figma 一致，熟悉後直接打開 Figma 就能照做。手機請用手指點選與拖曳，快速鍵只在鍵盤裝置可用。
工具圖鑑：每個工具什麼時候用？
點選工具看說明；有「試用」按鈕的工具可以直接帶到上方模擬器操作。
右側 Design 面板，由上到下看一遍
Position／Layout：位置與尺寸（X、Y、W、H）
X、Y 是物件左上角相對於它所在 Frame 左上角的位置；W、H 是寬高。對齊按鈕（左、中、右、上、中、下）會依「選取範圍」或「所在 Frame」對齊。Frame 還會多出 Clip content（超出範圍是否裁切）與 Auto layout（自動排版，Shift+A）。
Appearance：透明度與圓角
Opacity 控制整個物件的透明度（連同裡面的內容）；Corner radius 控制圓角，輸入 9999 可以做出膠囊形按鈕。想只改單一角落，可以點右側「獨立圓角」圖示。
Fill／Stroke：填色與邊框
Fill 可以是純色、漸層、圖片或影片；一個物件可以疊很多層 Fill。Stroke 是邊框，可設定位置（內、中、外）與粗細。文字的「顏色」其實就是它的 Fill。四個點的圖標能套用樣式（Styles）或變數（Variables）。
Effects／Export：效果與輸出
Effects 有 Drop shadow（陰影）、Inner shadow、Layer blur（模糊）、Background blur（毛玻璃）。Export 可以把選取的物件或 Frame 輸出成 PNG、JPG、SVG、PDF，並設定 1x、2x、3x。
沒有選取任何物件時，右邊顯示什麼？
會顯示頁面背景色、Local variables 入口、已建立的樣式與匯出設定。想改整頁背景、打開變數面板，都要先「點空白處取消選取」。
基本操作速查：6 組一定要會的動作
快速鍵速查表＋反應挑戰
左邊查表（可篩選、搜尋），右邊玩 10 題反應挑戰——先點一下黑色框，再按鍵盤。
學習建議：不用一次背完。先記熟 V F R O T 與 Ctrl／⌘＋D，其餘用到再查；每週多記 2–3 個，一個月後操作速度會明顯提升。
認識 Frame：所有畫面的第一步
在 Figma 裡，任何一個畫面都是從「Frame（框架）」開始。Frame 就像一張畫布，決定你要設計的載體尺寸——手機、平板、網頁畫面都靠 Frame 先框出範圍，之後畫的所有物件都放在框架裡。
已經有 Figma Agent 了，為什麼還要練基本功？AI 生成的畫面，底層還是由 Frame、組件、樣式、變數組成。看不懂這些，AI 做出來的畫面你只能整個重做，沒辦法微調某個按鈕的圓角、換掉某一組配色，也很難精準描述「我要的是哪一種效果」。基本功越熟，下指令越精準；AI 出錯或跑版時，也才有能力自己動手修。
按下快速鍵 F，或在工具列點選 Frame 工具，就能在畫布上拉出一個 Frame；右側面板還能直接選擇 iPhone、Android 等預設尺寸。
建立 Frame 的三種做法：自定義尺寸（快速鍵 F）、選擇預設裝置尺寸，或直接用現有元素建立 Frame。
小技巧：先框出 Frame，再開始畫裡面的內容——這是新手最容易跳過、卻最重要的第一步；之後要輸出圖片、設定 Prototype 互動，都是以 Frame 為單位。
延伸補充：Frame 的「約束條件」Constraints
當 Frame 大小改變（例如同一份設計要適應不同手機尺寸）時，「約束條件（Constraints）」決定框架裡的物件要怎麼跟著調整位置與大小——靠左、靠右、置中，還是等比例縮放。這個單元先不會用到，之後做「響應式」畫面時會很有幫助，先留個印象即可。
複習：Unit 02 的 16 步驟登入頁（已練過可跳過）
這是上一單元 Figma 基本功能練習 01｜APP 登入介面設計 的流程；還沒做完的同學，先跟著影片與截圖完成，下一關會在這個登入頁上繼續做。
延伸畫面練習：幫登入頁換上真實素材
從這一關開始改用官方練習檔繼續做——把手繪的狀態列換成 Figma Community 裡的真實 iOS 狀態列素材，讓畫面更貼近實際 App。「找現成資源、複製貼上」是之後做任何 App 介面都會用到的基本功。
本單元的完成品：登入頁會多出真實的狀態列，並延伸出註冊頁、Chat 頁與底部選單，作為接下來組件與樣式練習的基礎。
跟著做：4 個步驟
動手做：試著在 Community 搜尋別的關鍵字（例如 icon、illustration），感受「不用從零畫」也能快速找到堪用素材的效率。
建立組件（Creating Components）
建立組件時，你會得到一個「主組件（Main component，畫面上顯示為紫色）」，以及從它衍生、可以擺在各頁面的「物件（Instance）」。之後對主組件的任何修改，都會自動同步到所有物件上，不用一頁一頁手動改。
什麼要做成組件？判斷原則很簡單——這個東西「會不會用第二次」。狀態列、按鈕、輸入框、頭像框、底部選單的 icon……會重複出現、之後可能要一起修改的，就做成組件；只出現一次的背景插畫就不需要。
互動模擬：改一次主組件，所有物件跟著變
先改主組件的顏色、圓角或文字，看三個 Instance 同步更新；再只改「註冊頁」的文字，看它變成覆寫。
四種建立組件的方式（效果完全相同）
右鍵 → Create component
在選取的物件上按右鍵，選擇「Create component」，最直覺、初學者最推薦。
Draw 模式的圖樣按鈕
在 Draw 模式下，點選物件旁彈出的「Create component」圖樣按鈕（四個圓角的紫色圖示）。
右側屬性邊欄
在右側屬性邊欄最上方找到建立組件的圖樣按鈕並點擊。
快捷鍵
Mac：⌥ Option＋⌘ Command＋K；Windows：Ctrl＋Alt＋K。
命名小技巧：用斜線「／」分類，例如「狀態列／淺色」「按鈕／主要」，Figma 會在左側 Assets 面板依「／」前的名稱自動建立資料夾，組件一多也找得到。
跟著做：5 個步驟
物件（Instance）跟主組件的關係：從 Assets 拖出來、或用 Ctrl／⌘＋Alt＋B 從既有組件複製出來的都叫 Instance，圖層圖示是空心紫色菱形。可以個別修改 Instance 的文字、圖片這類「例外」；但整體結構（圓角、間距）要改，就回去改主組件，所有物件才會一起更新。
動手做：把貼上的狀態列建立成組件，用「分類／名稱」命名（例如「狀態列／淺色」）；之後每一頁需要狀態列，直接從 Assets 面板拖進去。
組件與 Variant 工作坊：主組件、實體、變體、屬性
上一章你已經看過「改一次主組件、所有物件跟著變」。這一章用一個獨立的模擬器把組件完整玩一遍，分成三個模式：① 主組件與實體（覆寫、重置、解除）、② Variant 變體（Type × Size × State）、③ 組件屬性（Boolean／Text／Instance swap）。每個模式都有任務，做完就會用了。
組件是什麼？意義、功能、應用
意義：一次定義，到處使用
組件是「可重複使用的設計零件」。你只畫一次原稿（主組件），之後在各頁面放的都是它的副本（實體）。就像印章的模具：模具只有一個，蓋出來的章很多顆，模具改了，章就跟著更新。
功能：同步、彈性、可整理
① 同步更新：改主組件，所有實體一起變。② 局部覆寫：每個實體可改文字、顏色而不破壞連結。③ 變體與屬性：同一個組件做出多種版本與開關。④ 集中管理：全部放在 Assets 面板，團隊共用。
應用：只要「重複」就值得做
按鈕、輸入框、卡片、導覽列、列表項目、對話氣泡、標籤……凡是同一個東西會出現 2 次以上，就考慮做成組件。它也是「設計系統」與工程師「前端元件」的對應基礎。
為什麼要學？沒有組件時，按鈕圓角想從 8 改成 12，要逐顆修改；有組件時只改 1 次。畫面越多，差距越大，也越不容易「這頁的按鈕跟那頁長得不一樣」。設計師團隊與工程師之間，也靠組件名稱溝通（例如 Button / Primary / Large）。
幾個容易混淆的概念，一次比較
| 概念 | 是什麼 | 什麼時候用 | 例子 |
|---|---|---|---|
| Component 組件 | 可重複使用的設計零件（主組件）。 | 同一個結構會重複出現。 | Button、Input |
| Instance 實體 | 從主組件放出來的副本，跟著主組件更新。 | 在頁面上實際使用組件時。 | 登入頁上的「登入」按鈕 |
| Override 覆寫 | 實體上改的局部內容（文字、顏色、圖示）。 | 每個實體需要少量差異時。 | 按鈕文字：登入／註冊 |
| Variant 變體 | 同一組件的多種版本，放在 Component set。 | 差異是「完整的另一種外觀」：大小、類型、狀態。 | Primary／Secondary、S／M／L、Default／Disabled |
| Component property 組件屬性 | 主組件暴露給實體的開關與欄位：Boolean、Text、Instance swap。 | 差異是「有／沒有」、「文字不同」、「換圖示」。 | 顯示圖示、Label、圖示替換 |
| Detach 解除 | 切斷實體與主組件的連結，變回普通圖層。 | 真的需要大幅改結構、且不想影響主組件時。 | 一次性的特殊按鈕（盡量少用） |
常見應用：5 種組件這樣做
選一種組件：左邊是它在畫面上的樣子（按「顯示結構圖」看每個部位的名稱），中間是圖層、右邊是像 Figma 一樣的屬性面板。動手改改看，下方會告訴你這個改動在 Figma 裡叫什麼。
判斷口訣：重複出現→做組件；差異是完整的另一種外觀→Variant；差異只是有／沒有或換字換圖→組件屬性；不想動到組件本身→覆寫；真的要大改結構→最後才 Detach。想快速決定，可以用後面「組件・樣式・變數怎麼搭配」章節的選擇器。
先記住四個詞
組件模擬器：切換三個模式動手玩
教學用簡化模擬器：操作邏輯與真實 Figma 一致，外觀為示意。真實 Figma 中，建立 Variant 是在選取主組件後，於右側 Properties 按「＋」→ Variant；變體名稱格式為「屬性=值」。
在 Figma 實作：建立一個 Button 組件集
做出按鈕
用矩形＋文字做出按鈕，選取後按 Shift＋A 加 Auto layout，讓文字變長時按鈕自動撐開。
建立組件
選取按鈕，按 Ctrl／⌘＋Alt＋K。圖層圖示變成紫色菱形，這就是主組件。
加變體
選取主組件，右側 Properties 按「＋」→ Variant，再複製出 Secondary、Outline 等版本，改成對應的顏色。
命名屬性
把 Property 1 改名為 Type，各變體的值設為 Primary／Secondary／Outline；需要時再加 Size、State 屬性。
加組件屬性
點文字圖層旁的「＋」建立 Text 屬性；點圖示圖層旁的「＋」建立 Boolean 或 Instance swap 屬性。
使用實體
從 Assets 面板拖出實體，右側面板就會看到 Type、Size、State 下拉選單與你建立的屬性，不必進入組件內部修改。
預測題
建立色彩樣式與文字樣式
把常用的顏色（品牌主色、背景色、文字色）與文字設定（字型、字級、字重、行高）存成「樣式」，所有套用的物件只要更新樣式就會自動同步。跟組件一樣是「改一次、全部跟著改」；不同的是樣式只管「一個屬性的值」，組件管「一整個物件的結構」。
互動模擬：樣式同步與「覆寫」陷阱
打開覆寫後再換樣式顏色：標題不會再跟著變，旁邊出現小圓點提示。關掉＝Reset。
選擇物件
選擇要建立樣式的物件，例如一個色塊或文字。
點樣式圖標
在右側「Fill」面板中，找到色票旁的樣式圖標（4 個小圓點）並點擊。
點「＋」
在跳出的面板點選「＋」。
命名
輸入樣式名稱後按 Enter，建議用「brand／primary」這種分類命名。
套用
之後在任何物件的 Fill 面板點開樣式列表，就能直接套用。
小心「覆寫（Override）」：套用樣式後又手動改顏色，樣式名稱旁會出現小圓點，這個物件之後就不會再跟著樣式更新。建議用樣式列表裡的「Reset」還原，保持乾淨。
文字樣式的價值是「一致性＋效率＋系統化」：建立方法跟色彩樣式幾乎一樣，只是面板換成右側的「Text／Typography」。動手前，先規劃一份文字階層表：
動手做：至少建立一組色彩樣式與一組文字樣式，套用在兩個以上物件；修改樣式，觀察它們是不是一起變；再故意手動改一個物件，看看有沒有出現覆寫小圓點。
組件實戰：登入頁 → 註冊頁 → Chat 頁
工具都認識了，把組件與樣式串起來，一口氣做出三個畫面：完成登入頁的輸入框，用「複製＋改文字」秒生註冊頁，最後新增 Chat 對話頁，體驗「改主組件、所有物件跟著變」。
動手做：做完登入頁跟註冊頁後，改一次「輸入框組件」的圓角或顏色，觀察兩個頁面的輸入框是不是同時更新——就像上面 Frame 03 的模擬器一樣。
外掛加值：真實照片與圖示庫
不用離開 Figma，就能直接搜圖庫、搜圖示。外掛面板位置：最上方選單列 Plugins（或右鍵選單），也可以用 Ctrl／⌘＋/ 打開「Quick actions」搜尋任何外掛與指令。
打開 Unsplash
按 Ctrl／⌘＋/ 打開 Quick actions，輸入「Unsplash」並執行 Unsplash 外掛。
搜尋關鍵字
在視窗上方輸入關鍵字（例如 portrait、people）搜尋照片風格。
選物件再點照片
選取要換圖的物件（例如圓形頭像框），點照片縮圖，照片就直接填入該物件的 Fill。
批次替換
先用 Shift 點選多個物件，再點一張照片即可批次套用；個別頭像就單獨選取再套用。
Iconify 是什麼：Figma 上常用的免費圖示搜尋與插入工具，提供超過 10 萬個圖示，涵蓋 Material Design Icons、Font Awesome、Feather、Heroicons、Tabler 等開源圖示庫。Iconify 官網
執行 Iconify
打開 Plugins 面板，搜尋「Iconify」並執行。
搜尋關鍵字
輸入 home、chat、search、profile 等關鍵字。
統一風格
確認風格（outline 線性／filled 填色／duotone 雙色），同一組底部選單只挑同一種風格、同一個圖示庫。
點擊插入
滑鼠移到圖示上，點擊即可插入到畫面。
套用色彩樣式
Fill 改成前面建立的色彩樣式：未選取用灰色、選取狀態用品牌色。
統一大小
用 W／H 欄位把每個圖示調成統一大小（建議 24×24 或 28×28）。
Auto Layout 排列
全選圖示與文字標籤，按 Shift＋A 套用 Auto Layout，自動等間距排成一列。
動手做：用 Iconify 找 4～5 個相同風格的圖示，統一大小與顏色後，全選按 Shift＋A 組成自己的底部選單。
Prototype 原型：讓靜態畫面動起來
把畫好的登入頁、註冊頁、Chat 頁串連起來：切換到「Prototype」分頁，從一個物件拉一條連結線到另一個畫面，設定觸發方式（例如點擊），就能做出可以互動播放的原型。
切到 Prototype
在右側面板切換到「Prototype」分頁。
拉連結線
選取按鈕物件，拖曳出藍色連結線指到目標畫面。
設定互動
設定觸發方式（On click）與轉場動畫，按 Play 測試。
完成品：直接點擊試玩
完成檢查：把登入頁、註冊頁、Chat 頁都串上 Prototype 連結，點擊播放測試每個按鈕是不是都能正確跳轉——這一份是期末作業前很重要的練習基礎。
認識變數（Variables）：讓整份設計「換膚」
樣式幫你統一「同一種顏色」；變數更進一步：同一個變數可以依「模式（Mode）」切換出不同的值。最常見的用法就是 Light／Dark 模式——bg/surface 在 Light 是白色、在 Dark 是深灰色，切換模式時所有套用的物件一起換色。
互動模擬：切換 Light／Dark
下方變數表與卡片用的是同一組變數，切換模式就能看到「名字不變、值跟著變」。
樣式 vs 變數，差在哪裡
樣式 Styles
通常是「固定的一組值」，套用後只有一種結果。記法：樣式管「這個顏色叫什麼名字」。
變數 Variables
可以依「模式（Mode）」或條件切換出不同的值。記法：變數管「這個名字在不同情境下實際是什麼值」。面板位置：左側 Local variables，或屬性旁圖標的 Variables 分頁。
變數的四種類型
Color 顏色
品牌色、背景色、文字色，用來做 Light／Dark 主題切換。這一關先專心練習最常用的 Color 變數。
Number 數值
間距、圓角、字級，可以做出「Compact／Comfortable」兩種密度，或手機／平板兩種邊距。
String 文字
文字內容，適合做多語系（中文／英文）切換。
Boolean 開關
true／false，控制某個圖層要不要顯示，例如有／沒有通知紅點兩種狀態。
動手建立第一個變數：8 步驟
打開 Fill 面板
選取畫布上任一物件，打開它的色彩屬性（Fill）面板。
點樣式圖標
點色票旁的樣式圖標（4 個小圓點），上方會看到「Styles」與「Variables」兩個分頁。
Create variable
切換到 Variables 分頁，點「＋ Create variable」。
命名
幫變數命名（例如 bg/surface），確認類型是 Color。
新增 Mode
在變數列右側點「＋」新增一個 Mode，把 Mode 1 改名為 Light、新的一欄改名為 Dark。
設定兩種值
分別點 Light、Dark 兩欄的色票，設定各自的顏色（例如白色／深灰色）。
綁定物件
選取要套用的物件，在 Fill 面板的 Variables 分頁點選 bg/surface。
切換 Mode
選取最外層 Frame，在右側屬性面板找到 Mode，切換 Light／Dark，所有套用的物件同步換色。
本關的變數表與卡片是示意教學與互動示範，非真實 Figma 介面截圖。
動手做：在 Figma 建立一個 bg/surface 顏色變數，新增 Dark 模式、設定不同的顏色，套用在一個物件上，切換模式測試看看。
變數入門：為什麼用？何時用？怎麼用？
如果你覺得變數很抽象，這一章專門為你寫。我們用最白話的方式回答三個問題：為什麼要用變數（先親手體驗沒有它有多累）、什麼時候該用／不該用、一步一步怎麼從零做起，最後比較它和樣式、組件的差別。看完再去玩下一章的實驗室，就會順很多。
為什麼用？先親手體驗「沒有變數」有多累
畫面上有 18 個用到品牌色的物件。現在老闆說：「品牌色換成別的顏色。」
一致
全專案同一個顏色、同一個間距，只有一個「正解」，不會出現色差。
好改
改一次，全部更新；換品牌、改 Light／Dark、調整間距都是一個動作。
可切換
同一個名字，依情境（Mode）換值——主題、語言、密度、裝置。這是樣式和組件做不到的。
何時用？何時不用？
適合用變數
- 顏色會依主題改變（Light／Dark、不同品牌）
- 間距、圓角、字級要有統一的尺度（4／8／16／24）
- 要做多種密度或裝置（Compact／Comfortable、手機／平板）
- 要做多語系或多版本文案（少量標籤與按鈕）
- 想用開關控制圖層顯示（Boolean）
- 要和工程師用同一組名稱溝通（Design token）
不需要用變數
- 只出現一次、不會再用到的顏色或數字
- 想統一「多個屬性的組合」（字型＋字級＋行高）→ 用文字樣式
- 想重複使用「整個結構」（按鈕、卡片）→ 用組件
- 快速草稿階段：先畫、確定要重複再整理
- 大段長篇文字內容（不適合 String 變數）
變數、樣式、組件：差在哪？
| 樣式 Styles | 變數 Variables | 組件 Components | |
|---|---|---|---|
| 管什麼 | 一組屬性的「組合」（色彩、字型＋字級＋行高、陰影） | 單一「值」：顏色、數字、文字、開關 | 整個物件的「結構」 |
| 生活比喻 | 一張「配方卡」 | 一個「有名字的旋鈕」，可切換檔位 | 一個「模具」 |
| 能依情境切換？ | 不行（固定值） | 可以（Mode） | 可以（Variant、屬性） |
| 典型例子 | Title/Large 文字樣式、Shadow/Card | bg/surface、space/md、label/login | Button、Input、Card |
| 設定位置 | 屬性旁四點圖標 → Styles | Local variables；屬性旁四點 → Variables | 選取後 Ctrl／⌘＋Alt＋K |
| 一句話 | 「這段文字長這樣」 | 「這個值在此情境下是多少」 | 「這個東西長這樣、可重複放」 |
變數的標準架構：兩層就夠
teal/500、gray/900。名字描述長相。不直接用在畫面上brand/accent、bg/surface。每個 Mode 指向不同 Primitive（Alias）。可依 Mode 切換為什麼要分兩層？想換品牌色，只要把 brand/accent 改指向另一個 Primitive；想做 Dark，只要讓 bg/surface 在 Dark 指向深色 Primitive。畫面上的物件完全不用動。初學者先做「Color（Light／Dark）＋ Spacing」就夠。
怎麼用？從零建立一套變數：7 步
打開 Local variables
點一下畫布空白處取消選取 → 右側 Design 面板找到 Variables 區塊 → 按「Open variables」。看到空白表格就對了。
建 Primitive 集合
左上「＋ Create collection」，命名 Primitives。新增 Color 變數：teal/500、gray/50、gray/900、white…，用 / 分層，Figma 會自動做成資料夾。這個集合只需要 1 個 Mode。
建 Color（語意）集合＋兩個 Mode
新增 Color 集合，Mode 改名 Light，按 ＋ 新增 Dark。建立 bg/surface：Light 欄點色塊 → 切到「Variables」分頁 → 選 Primitives 的 white（這就是 alias）；Dark 欄選 gray/800。
建 Spacing（Number）集合
新增 Spacing 集合，建立 Number 變數 space/md＝16、radius/card＝12。需要時新增 Compact Mode 並填較小的數字（8、8）。
把變數綁到物件上
選取卡片 → Fill 色塊旁的四點圖標 → Variables 分頁 → 點 bg/surface。圓角、Auto layout 的 gap／padding 欄位旁也有套用變數的圖標，選 Number 變數。綁定成功時，欄位會變成變數名稱標籤。
切換 Mode 驗收
選取最外層 Frame → 右側面板找到 Variable mode（在 Appearance 附近）→ 為 Color 選 Dark。如果有物件沒變，代表它沒綁變數：選它檢查 Fill 是色碼還是變數標籤。
整理命名與說明
用 / 分層（color/bg/surface）、名字描述用途；可在變數上加「Description」說明用途。團隊共用時，把檔案發佈成程式庫（Library），其他檔案才能使用。
Figma 會持續調整介面位置與名稱，以上為常見路徑；若找不到，用 Ctrl／⌘＋/（Quick actions）搜尋 “variables”。下一章的實驗室，就是這 7 步的互動版。
常見問題
變數會取代樣式嗎？我該先學哪個？
不會完全取代。顏色與間距新專案優先用變數；文字（字型＋字級＋行高的組合）與特效仍適合用樣式。先學「樣式」理解「改一次全部變」，再學「變數」理解「依情境切換」，順序最自然，這也是本單元的安排。
變數可以用在組件裡嗎？
可以，而且這是最強的搭配：組件內的顏色、圓角、間距綁定變數後，不論把實體放進 Light 還是 Dark 的 Frame，實體都會依所在 Frame 的 Mode顯示對應的值。
為什麼我切換 Mode，有些物件沒變？
最常見原因：① 該物件的屬性是色碼而不是變數；② 該變數在兩個 Mode 的值其實一樣；③ 外層 Frame 沒設 Mode，或內層圖層覆寫了 Mode。到上一個互動章節用 X-ray 功能就能看懂。
免費帳號可以用嗎？Mode 有數量限制嗎？
不同方案能使用的 Mode 數量與功能範圍不同，免費方案限制較多；學生／教育版帳號通常功能較完整。實際以 Figma 官方方案說明為準，本單元的練習以兩個 Mode（Light／Dark）為主。
字型、字級可以綁變數嗎？
字級、行高、間距等數值可以用 Number 變數；字型家族與內容可用 String 變數（依 Figma 版本而定）。但「一整組文字設定」仍建議用文字樣式，兩者可以並用。
變數對工程師有什麼用？
變數名稱就是設計師與工程師共同的「Design token」。工程師在 Dev Mode 會看到 brand/accent 這樣的名稱，而不是死的色碼，程式裡也用同一個名字，改版時雙方只要同步這張表。
變數工作坊：Collection、Mode、Alias 全面動手做
上一章你看過「Light／Dark 換膚」，這一章要真的把變數系統玩一遍：左邊是仿真的 Local variables 面板，右邊是會跟著變的手機畫面。你可以改值、新增 Mode、建立自己的變數、綁定／解除綁定、做「只讓卡片變 Dark」的覆寫，完成 10 個任務後，變數的核心觀念就全部通了。
先搞懂四個詞（點點看）
變數藏在哪裡？4 個入口
變數實驗室：改一個值，看整個畫面怎麼動
左邊表格就是 Local variables：切換集合頁籤、改任一欄的值；右邊先用 Mode 切換器改變情境，再點手機裡的物件看它綁了哪個變數。不知道怎麼做？每個任務旁都有「▶ 示範給我看」，會自動幫你操作一次；打開「X-ray」可以直接看到每個物件綁了哪些變數。
實驗任務 0 / 15
任務依序出現，也可以不照順序完成；每完成一項會自動打勾。
這是教學用的簡化模擬器：表格與綁定邏輯跟真實 Figma 一致，但外觀為示意，不是實際介面截圖。真實 Figma 還可以對變數設定描述、Scoping 與 Code syntax。
預測題：先想想看，再點答案
brand/accent，把畫面切到 Dark，按鈕顏色會？teal/500 的色碼改成紫色，所有 alias 指向它的語意變數會？命名與整理：變數好用的關鍵
好的命名：用 / 分層，名字描述「用途」而不是「長相」。
color/bg/surface color/text/primary brand/accent space/md radius/card label/login
要避免的命名：看顏色取名（換主題就名不符實）、沒有分層、中英混雜。
藍色1 Color 2 按鈕-綠-final bgDarkGrayNew // 「teal/500」只適合 Primitive， // 畫面請用語意名稱 brand/accent
五個最常見的坑
色碼寫死沒綁定
切 Mode 沒反應？選取物件看 Fill：有變數標籤才算綁定；只顯示色碼就是寫死。解法：重新綁定變數。
畫面直接套 Primitive
畫面一律套「語意變數」，Primitive 只被語意變數引用。這樣換主題只要改語意層的指向。
所有類型塞在同一集合
顏色的 Mode（Light／Dark）與間距的 Mode（Compact／Comfortable）是不同維度，要放不同集合才能各自切換。
新增 Mode 忘記改值
新 Mode 預設複製第一個 Mode 的值。忘了修改，切過去畫面看起來「沒變」。
被內層覆寫而不自知
外層 Frame 切了 Mode 但某物件沒變，檢查它或它的父層是否有被「覆寫 Mode」。
變數 vs 樣式怎麼選？
只需要一種固定值→樣式；需要依情境切換（主題、語言、密度）→變數。新專案建議顏色與間距優先用變數。
進階一眼看：Scoping、Prototype 變數、Dev Mode（了解即可）
Scoping 使用範圍
可以限制某個變數只出現在特定屬性（例如只給 Fill、或只給 Corner radius），避免同學誤選，變數清單也更乾淨。
Prototype 中的變數
變數也能用在原型：用「Set variable」動作改變值，搭配「Conditional」條件判斷，做出輸入驗證、計數器、開關等互動。
Dev Mode 與程式碼語法
在 Dev Mode 工程師會看到你使用的變數名稱，而不是死的色碼；變數可設定對應的 CSS／程式碼名稱，讓設計與程式碼一致。
動手做
回到你的作業檔：建立 Color（Light／Dark）與 Spacing（Comfortable／Compact）兩個集合，把登入頁的背景、文字、按鈕色與圓角綁上去，截圖兩種模式放進作業。
組件・樣式・變數：三者怎麼分工、怎麼搭配
三個工具都叫「改一次、全部變」，但管的東西不同。這一章把它們放在一起：先看分工，再用計算器感受省力程度，最後用「我想做到…」選擇器，遇到問題時可以快速找到該用哪一個。
一句話分工
組件：管「結構」
按鈕長什麼樣、有哪些圖層、有哪些版本與開關。回答：這個東西是什麼？
樣式：管「一組固定的設定」
字型＋字級＋行高、陰影組合。回答：這段文字／效果長怎樣？
變數：管「會依情境變的值」
顏色、間距、文字、開關，可依 Mode 切換。回答：在這個情境下是多少？
省力計算器：打開開關，看每個動作要改幾處
以本單元範例計算：6 個畫面、24 顆按鈕、6 張卡片（共 30 個物件）。數字為示意估算，用來比較差異。
實際合用：一顆 Button 怎麼同時用上三者
brand/accent、圓角綁 radius/button、padding 綁 space/md。Button/Label（字型＋字重＋字級＋行高）。「我想做到…」該用什麼？
點左邊的需求，右邊會告訴你該用哪個工具、為什麼、怎麼做、別怎麼做。
建立設計系統的建議順序
先定義變數（地基）
Primitives → Color（Light／Dark）→ Spacing。因為組件之後要綁定它們，先有變數，組件才不用返工。
建立文字與效果樣式
Title/Large、Body/Default、Shadow/Card…，顏色綁變數，字型字級存在樣式裡。
做基礎組件
Button、Input、Avatar、Icon。填色、圓角、間距綁變數，文字套樣式，再加 Variant 與屬性。
組合成較大的組件
Card、List item、Tab bar、Navbar：裡面放基礎組件的實體（巢狀）。
組畫面＋切 Mode 驗收
用組件拼出登入頁、註冊頁、Chat 頁，在最外層 Frame 切 Light／Dark、Compact 驗收；有沒變的地方，回頭檢查是否漏綁變數。
課後作業應用：作業的登入頁、註冊頁、Chat 頁，請至少做到：① 重複的按鈕、輸入框、對話列做成組件；② 文字套用樣式；③ 色彩與圓角綁定變數，並提供 Light／Dark 兩種截圖。三者齊全，是這個單元的完整成果。
本週自我檢核：組件、樣式、還是變數？
先做分類題，確認你分得清三種「改一次、全部跟著改」的工具；再做 5 題觀念題。
分類題：這個東西該怎麼處理？
觀念題
HomeWork｜課後作業：APP 入口頁面延伸練習
第四週作業：使用組件及樣式，完成自訂主題的『APP 入口頁面設計及後續延伸介面』。做完一項勾一項，進度會記在你的瀏覽器。