使用者介面設計課程講義

認識 Frame：所有畫面的第一步

在 Figma 裡，任何一個畫面都是從「Frame（框架）」開始的。Frame 就像一張畫布，決定了你要設計的載體尺寸——手機畫面、平板畫面、網頁畫面都靠 Frame 先框出範圍，之後畫的所有物件都會放在這個框架裡。按下快速鍵 F，或在工具列點選 Frame 工具，就能在畫布上拉出一個 Frame，右側面板還能直接選擇 iPhone、Android 等預設尺寸。

動手做：跟著影片，畫出第一個登入頁

接下來的截圖，來自上一單元 Figma基本功能練習01｜APP登入介面設計，示範怎麼從一個空白 Frame，用 Draw 繪圖工具，一路做出完整的登入頁面。這一輪先跟著做一次，熟悉工具位置；下一關會在這個基礎上換上真實素材，正式進入組件與樣式的練習。

延伸畫面練習：幫登入頁換上真實素材

從這一關開始，改用官方練習檔繼續做——把剛才手繪的狀態列，換成 Figma Community 裡的真實 iOS 狀態列素材，讓畫面更貼近實際 App 的樣子。這個「找現成資源、複製貼上」的流程，是之後做任何 App 介面都會用到的基本功。

建立組件（Creating Components）

組件（Components）可以在整個專案中建立並管理一致的設計。建立組件時，你會得到一個「主組件（Main component，畫面上顯示為紫色）」，以及從它衍生出來、可以自由擺放在各頁面上的「物件（Instance）」——之後對主組件做的任何修改（改顏色、改文字、改排版），都會自動同步更新到所有由它衍生的物件上，不用一個一個頁面手動改，省時間又能確保整份設計風格一致。

簡單說：凡是會在畫面裡重複出現、而且之後可能要一起修改的元素（狀態列、按鈕、輸入框、頭像框、底部選單的每個 icon……），都很適合做成組件。判斷原則很簡單——這個東西「會不會用第二次」，會的話就做成組件；只會出現一次的背景插畫，就不需要。

建立色彩樣式（Color Styles）

「色彩樣式」是設計系統裡非常重要的功能，能讓設計師快速管理與統一整個專案的配色：把常用顏色（品牌主色、輔助色、背景色、文字色等）定義成「樣式」，所有套用該樣式的元件，只要更新樣式顏色就會自動同步。跟組件很像的地方是「改一次、全部跟著改」；不一樣的是樣式只管「一個屬性的值」（例如顏色、字體），組件管的是「一整個物件的結構」。

建立文字樣式（Text Styles）

文字樣式的核心價值是「一致性＋效率＋系統化」：把常用的文字設定（字型、字級、字重、行高、字距等）定義成「文字樣式」，任何地方引用該樣式後，只要更新樣式，所有套用的文字都會自動同步，跨頁面、跨專案都能共用同一套字體規範。建立方法跟色彩樣式幾乎一模一樣，只是面板換成右側的「Text／Typography」屬性面板。

組件實戰：登入頁 → 註冊頁 → Chat 頁

工具都認識了，接下來把組件與樣式串起來，一口氣做出三個畫面：先完成登入頁的輸入框，再用「複製＋改文字」的方式秒生註冊頁，最後新增一個 Chat 對話頁，體驗「改主組件、所有物件跟著變」的組件精髓。

外掛加值：真實照片與圖示庫

Figma 的外掛（Plugins）生態是它最強大的地方之一——不用離開軟體，就能直接搜圖庫、搜圖示、做設計系統。這一關用兩個最常用的外掛，把畫面從「示意稿」升級成接近真實 App 的樣子。外掛面板固定位置：畫面最上方選單列 Plugins（或右鍵選單裡的 Plugins），也可以用快速鍵 Ctrl/Cmd + / 直接打開「Quick actions」搜尋任何外掛與指令。

製作底部選單：認識 Iconify

底部選單（Tab Bar）需要一組風格統一的圖示，這裡用 Iconify 外掛來完成。

Prototype 原型：讓靜態畫面動起來

最後一步，把畫好的登入頁、註冊頁、Chat 頁彼此串連——切換到「Prototype」狀態，從一個物件拉一條連結線到另一個畫面，設定觸發方式（例如點擊），就能做出可以互動播放的原型，不用寫一行程式碼。

完成組件、樣式、外掛應用的成果

下面是完成後的互動原型，可以直接點擊播放，體驗登入頁、註冊頁、Chat 頁之間的畫面切換。

認識變數（Variables）：讓整份設計「換膚」

樣式（Styles）幫你統一「同一種顏色」，而變數（Variables）更進一步：同一個變數可以依「模式（Mode）」切換出不同的值——最常見的用法就是 Light／Dark 模式切換。把 bg/surface 這個變數同時設定 Light 模式的值是白色、Dark 模式的值是深灰色，畫面套用這個變數後，切換模式時所有套用到的物件會一起換色，不用逐一手動修改。

動手建立你的第一個變數：完整 8 步驟

跟著下面的步驟，在 Figma 裡實際建立一個會隨模式切換的顏色變數——文字說明對照著上方的示意圖看，操作邏輯完全相同。

動手感受一次：同一張卡片，兩種模式

下面這張卡片沒有真的連上 Figma，但用了同一套「Light／Dark 變數」邏輯做成——按按看兩個按鈕，感受變數如何讓同一份設計「換膚」而不用重畫。