Unit 03
01 / 12
UI 設計實作課程 · 2026
Figma
基礎操作
工具入門 · 版面結構 · 圖層管理
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 03
02 / 12
Agenda
課程大綱
第 1 小時
介面導覽
認識 Figma 工作區與核心工具
第 2 小時
版面實作
Frame、圖層、對齊與間距
第 3 小時
App 模仿
選一個首頁動手重畫
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 03
03 / 12
Overview
Figma 工作區介紹
你將花最多時間的地方
頂部工具列 Toolbar
左側圖層面板 Layers Panel
中央畫布 Canvas
右側屬性面板 Properties Panel
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
1
Unit 03
04 / 12
Tool · Frame
Frame
Figma 的核心容器
等同於「畫布中的畫布」
可設定裝置尺寸（iPhone、Desktop…）
子元素受 Frame 裁切
所有頁面設計都從 Frame 開始
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
2
Unit 03
05 / 12
Tool · Layers
圖層面板
設計稿的骨架
命名規範：清楚、有意義
階層分組 Group vs Frame
物件順序影響前後關係
良好命名 = 未來的自己會感謝你
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
3
Unit 03
06 / 12
Tool · Shapes
基本形狀與文字
建立介面的基礎元素
矩形、橢圓、線條工具
文字工具：字體、字級、行距
Fill 與 Stroke 設定
快捷鍵：R 矩形、O 橢圓、T 文字
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
4
Unit 03
07 / 12
Tool · Align
對齊與間距
讓版面看起來「對」的關鍵
對齊工具：靠左、置中、靠右、靠上、置中、靠下
均等間距 Distribute
用 Tidy Up 快速整理
對齊是設計專業感的基礎
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 03
08 / 12
Colors & Typography
色彩與字型設定
建立一致的視覺語言
Fill：純色、漸層、圖片填充
Stroke：外框與粗細
字型選擇與 Google Fonts 整合
Color Styles 初介紹
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 03
09 / 12
Best Practice
命名與整理原則
為之後的元件化奠定基礎
用「功能 / 位置」命名，避免 Rectangle 1
善用資料夾（/）分層命名
及時刪除不用的物件
保持圖層順序整潔
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 03
10 / 12
Live Demo
Figma 實機示範
跟著操作，邊看邊學
建立 Frame 與基本版面結構
加入文字、圖片佔位符
設定對齊與間距
儲存與命名規範示範
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 03
11 / 12
Workshop
課堂實作
App 模仿
選一個 App 首頁，動手重畫
截圖一個你常用的 App 首頁
在 Figma 中建立 Frame（手機尺寸）
用基本形狀重建版面結構
注意對齊、間距與命名
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 03
12 / 12
Review
討論與點評
分享你的模仿作品
你選了哪個 App？為什麼？
最難重現的部分是什麼？
圖層結構整潔嗎？命名清楚嗎？
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
←
→