課程學習前導說明

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 基本工具詳覽

04:05

常見的 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 等距透視

04:05

互動導覽列設計：Mouse Enter 懸停動畫

10:00

卡片滑動設計：水平滾動與 Auto Layout 應用技巧

07:20

卡片 Hover 動畫設計：Variants 與 Prototype 滑鼠互動效果

07:39

卡片拖曳互動設計：On Drag 觸發與 Smart Animate 過渡

06:53

視差滾動互動設計：多層次背景與元素動態切換

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 導覽選單

03:16

佈局 Auto Layout

03:23

前置任務｜競品框架分析

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

菜單和購物車的介面邏輯

04:34

關於我們的設計與識別應用

05:12

預約介面與選擇日期的設計

09:51

餐廳網頁的 RWD 響應式

18:43

快速上手 Framer

08:40

建立第一個 Framer 專案

16:01

導覽列設計：LOGO 與滾動畫面

15:07

「關於我」頁面的精細調整

09:03

「服務項目」輪播與動畫效果

11:50

卡片設計與響應式設置

09:36

「個人作品集」的網頁設計

12:17

作品集 Portfolio 專案區域

09:58

元件連結的介面互動

13:31

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 設計系統基礎知識

03:23

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（上）｜打造背景與專輯封面

08:04

液態玻璃介面音樂 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 裡直接呼叫你打包好的創作管線