課程學習前導說明
01:54
UI 設計師轉職之路
課程版本更新與追加內容
Figma UI3 新改版軟體介面一覽
04:08
Figma Config 2026 重點整理：六大發布一次看懂
Figma Motion 是什麼？Config 2026 原生動效完整解析與設計師實戰
Figma Code Layers 是什麼？程式碼變成設計素材的完整教學
UI/UX 設計基礎觀念
04:05
UI/UX 設計在生活中的應用
05:39
數位產品的設計歷史
03:11
UCD：以使用者為中心的設計
04:29
使用者介面與體驗設計流程
07:34
初步認識 Figma 與下載安裝
01:45
快速上手 Figma
02:04
Figma 基本工具詳覽
常見的 UI 介面插圖風格
02:56
UI 字裡行間的字型學
04:22
Figma Masks 遮罩功能的應用
09:27
快速繪製線框圖與 UI 精稿 - 設計待辦清單APP
16:18
頁面色彩設計與立體效果 - 數位產品卡片式介面（上）
06:37
頁面色彩設計與立體效果 - 數位產品卡片式介面（下）
07:57
3D 圖標視覺效果 - 3D 遊戲選單介面
14:22
波浪與不規則形狀設計 - 創意網站 Landing Page
11:10
Figma Plugin 推薦 2026：AI 內建後仍每天打開的 8 個外掛
Lego 樂高像素效果
02:16
大理石紋路效果
03:23
信用卡金屬光澤
03:16
光碟繞射效果
02:50
Glassmorphism 毛玻璃效果
04:42
Neon Glass 霓透玻璃感
05:12
簡易版 3D 立體化效果
02:52
新擬物化風格 Neumorphism
03:47
Isometric 等距透視
互動導覽列設計：Mouse Enter 懸停動畫
10:00
卡片滑動設計：水平滾動與 Auto Layout 應用技巧
07:20
卡片 Hover 動畫設計：Variants 與 Prototype 滑鼠互動效果
07:39
卡片拖曳互動設計：On Drag 觸發與 Smart Animate 過渡
06:53
卡片滑動與背景動態切換設計
12:24
視差滾動互動設計：多層次背景與元素動態切換
15:07
製作彈跳視窗互動效果（Popup）
09:23
懸浮式快速導覽選單｜點擊展開與 Hover 動畫的浮動表單
11:28
製作連續網頁動態背景與 icon 輪播效果
12:38
Grid 網格系統
01:57
Button 按鈕的設計
05:29
UI 設計元件系統 Component
01:43
使用 Constraint 設計響應式
03:28
Constraint 約束的介面應用
05:59
Navigation 導覽選單
佈局 Auto Layout
前置任務｜競品框架分析
04:34
前置任務｜網站框架設定
05:22
前置任務｜Wireframe 線框稿
23:52
前置任務｜UI Mockup 設計
21:11
前置任務｜Prototype 原型
05:31
如何設計個人品牌網站
10:16
如何設計個人品牌網站（2）
02:55
如何設計個人品牌網站（3）
09:59
如何設計個人品牌網站（4）
03:49
如何設計個人品牌網站（5）
10:52
如何設計工作室形象網頁
11:14
麵包屑導覽（Breadcrumb）
05:56
網站分頁的設計延伸
06:17
Auto layout 的表格應用
05:52
欄位介面的卡片式設計
10:32
漢堡選單（Hamburger menu）
06:50
RWD 響應式的應用邏輯
13:31
如何設計甜點店品牌網頁
14:05
以 Grid 網格呈現商品
09:53
商品元件的 Hover 樣式
05:00
商品元件的條列式卡片
06:22
商品的詳情資訊頁面
08:19
加入購物車結帳頁面
07:40
如何設計餐廳品牌網站
07:59
菜單和購物車的介面邏輯
關於我們的設計與識別應用
預約介面與選擇日期的設計
09:51
餐廳網頁的 RWD 響應式
18:43
快速上手 Framer
08:40
建立第一個 Framer 專案
16:01
導覽列設計：LOGO 與滾動畫面
「關於我」頁面的精細調整
09:03
「服務項目」輪播與動畫效果
11:50
卡片設計與響應式設置
09:36
「個人作品集」的網頁設計
12:17
作品集 Portfolio 專案區域
09:58
元件連結的介面互動
Framer 的動態介面效果
08:04
使用 Midjourney 生成 UI 概念設計
06:21
繪製 Wireframe 線框稿結構
09:10
製作 Intro Page 網頁
13:04
設計 Home Page 首頁
15:05
網站 Menu 選單導覽列設計
13:00
產品介紹頁面 UI 精稿
07:15
卡片 Card 動態效果製作
14:17
網頁動畫效果設計(1)
10:13
網頁動畫效果設計（2）
13:29
完成 AI 生成網站專案
13:52
UI 設計中的 Grid System
04:33
Figma 響應設計 - Constraints 面板
01:58
Figma 響應設計 - Auto Layout 面板
13:48
Design System 設計系統基礎知識
Spline 打造 3D 建模（上）
11:42
Spline 打造 3D 建模（下）
13:49
Spline 3D 首頁介面設計
10:41
Spline 動態物件設定
09:44
Spline 按鈕與 3D 卡片
14:53
攝影機及畫面切換
10:56
切片建模與材質球上色
12:33
客製化介面佈局製作
09:48
網頁滑鼠互動效果
07:41
Spline 導出至 Framer
09:09
Spline Omma AI 完全解析：一句話生成 3D 網站與互動體驗
打造天氣 APP × 日夜模式切換互動
05:51
設計主導的互動原型實作：Point and Edit + Code 發布
07:36
快速上手｜Figma 的 Liquid Glass 新效果
04:04
Glass 效果延伸｜打造完整音樂播放卡片 UI
03:57
液態玻璃介面音樂 App（上）｜打造背景與專輯封面
液態玻璃介面音樂 App（下）｜播放控制 × 進度條
07:42
設計師作品經典模式
設計師該怎麼獨自升級
設計師的 Junior 到 Senior
沒工作經歷如何累積 UI/UX 作品
UI 與 UX 的作品集準備
UI/UX 設計師職缺判讀
能讓設計圈記住你的社群帳號，只有 4 種玩法
Figma Variables 與 Modes 完全解析：深色模式、多品牌主題與 Design Token 的實作邏輯
Figma Dev Mode 交付實務：標註、規格、Code Connect 與 MCP 的完整交接流程
介面狀態設計：空狀態、錯誤、Loading 與 Disabled，作品集最常被打回的那一塊
無障礙設計檢查表：對比度、點擊尺寸、焦點樣式與 WCAG 2.2 的實務底線
Figma 全產品線 2026：十個工具，什麼情境該開哪一個
FigJam 實戰：User Flow、Affinity Map 與競品拆解，補上作品集最缺的那一段
Figma Slides 提案簡報：把作品集做成面試那十分鐘會贏的版本
Figma Sites vs Framer：CMS、斷點與實作對照，什麼案子該用哪一個
Figma Weave 工具接上 MCP：在 Claude、ChatGPT 裡直接呼叫你打包好的創作管線
此單元不開放免費瀏覽
