---
title: "100 種 Figma 設計的方法｜UI/UX 線上課程"
seo_title: "100 種 Figma 設計的方法｜UI/UX 線上課程"
seo_description: "今年最新數位產品 Figma 設計線上課程，從零到一百學會 UI/UX 使用者介面與體驗設計。"
slug: figma
url: https://rar.design/courses/figma
type: paid
---

# 100 種 Figma 設計的方法｜UI/UX 線上課程

> 今年最新數位產品 Figma 設計線上課程，從零到一百學會 UI/UX 使用者介面與體驗設計。

## Description

⏰ 限時優惠活動NT$ 7,980→NT$ 2,480⏳ 期間限定倒數23 時 59 分 59 秒⏰ 專屬特別優惠NT$ 7,980→NT$ 2,480100 種 Figma 設計的方法｜UI/UX 線上課程這是一堂專為想轉職成為 UI/UX 設計師的同學打造的線上課程，從 10 個章節共 100 單元的課程內容中，我們會從零到一學會怎麼使用業界主流 Figma 介面設計軟體，再進階練習從 1% 到 100% 精通 Figma 的操作技巧。課程採用實作專題式教學設計，每個單元都有實際題目和演練過程，從獨立專案中學習並且能夠清楚理解每一個步驟，掌握設計思維和實務知識，照著課程引導並扎實地練習就可以在最後創作出完整的設計作品。課程重點目標學習使用者介面(UI) 與體驗(UX) 設計的基本觀念與基礎知識。學會 Figma 軟體使用技巧與快捷鍵，有能力按照專案需求進行介面設計。熟稔 Figma 進階技巧，例如設計系統、原型製作等，提高團隊工作與溝通效率。瞭解數位產品開發流程與 UI/UX 設計師的技能要求，以及如何培養美感。理解基本設計原則，做出符合設計規範且符合使用者閱覽習慣的介面。從頭開始完成一個 Web 網站專案，從中習得業界 UI/UX 設計流程。適合怎樣的人計畫轉職 UI/UX 設計師強化視覺設計技巧和軟體操作想用設計來接案或找工作準備經營網站的內容創作者弄設計師個人網站整理作品集課程特色學會 UI 設計的百百種視覺處理技巧學一套設計軟體流程，能通用在其他設計軟體中理論方法與軟體應用環環相扣的教學設計課程上架目前課程所有章節與單元已全部上架完成，購買成功後可立即登入網站觀看課程。若有課程相關問題，可以聯繫設計師 Riven 臉書粉專，相關公告也會發佈在 Facebook 專頁。因本堂課程內容較多，實際單元名稱與順序以正式開課列表為主。［解鎖任務］隱藏章節內容將於學員人數達 500 人和 1000 人時開啟！［系統公告］學員人數已達成 500 人！全新章節「Framer 網站設計」已解鎖。［系統公告］學員人數已達成 1,000 人！全新章節「AI 生成技術實作 UI 設計」已解鎖。［系統公告］學員人數已達成 2,000 人！特別章節「使用 Spline 設計 3D 動態介面」已新增。［系統公告］學員人數已達成 3,000 人！追加章節「Figma 的超級實用 Plugin 們」已更新。

## Learning Objectives

- UI/UX 設計攻略：從基礎觀念到設計流程的不藏私分享
- Figma 快速上手教學：詳細解析 Figma 使用技巧
- AI 設計應用：融入 AI 技術在設計領域上的使用情境
- 介面視覺設計：精通設計軟體後做出令人驚呼的設計

## Course Info

- Lectures: 134
- Video: 15.3h
- Students: 6,060

## Rating

4.9 / 5 (174 ratings)

## Instructors

### 設計師 Riven
*資深數位產品設計師｜知名線上課程講師*

在 IT 和網路產業近十年的數位產品設計師，專注於 UI/UX 使用者介面與體驗設計領域，在全臺多間大專院校與社群機構擔任顧問及講師，並於國內外各大線上課程平台開立設計課程，目前已累積過萬名學員參與上課。 為 Adobe 官方合作的設計師兼 Insider，曾環島舉辦設計工作坊，並獲邀代表台灣飛往美國洛杉磯參加 Adobe MAX 設計師年會，並以設計師 KOL 角色與 Intel、微軟、華碩、微星等知名品牌合作推廣科技產品。 常在 Medium 寫作設計上的知識與觀察，並得到官方認證 #Design 領域 Top Writer，同時也會在 YouTube 上製作影片教學設計的方法，近期開始實驗使用 VTuber 技術在 IG 用 Reels 短影片分享設計技巧。 ▌擅長利用淺顯易懂的內容，將艱難的設計與開發技術，用任何人都能夠聽得懂的語彙，說給每一個人聽。

## Curriculum

### 課程公告與最新消息 (6m)

- 課程學習前導說明 (1m) [Preview]
- UI 設計師轉職之路 (0m)
- 課程版本更新與追加內容 (0m)
-  Figma UI3 新改版軟體介面一覽 (4m)
- Figma Config 2026 重點整理：六大發布一次看懂 (0m)
- Figma Motion 是什麼？Config 2026 原生動效完整解析與設計師實戰 (0m)
- Figma Code Layers 是什麼？程式碼變成設計素材的完整教學 (0m)

### 數位產品的 UI/UX 設計觀念 (24m)

- UI/UX 設計基礎觀念 (4m)
- UI/UX 設計在生活中的應用 (5m)
- 數位產品的設計歷史 (3m)
- UCD：以使用者為中心的設計 (4m)
- 使用者介面與體驗設計流程 (7m)

### Figma 軟體基礎技巧 (24m)

- 初步認識 Figma 與下載安裝 (1m) [Preview]
- 快速上手 Figma (2m) [Preview]
- Figma 基本工具詳覽 (4m)
- 常見的 UI 介面插圖風格 (2m)
- UI 字裡行間的字型學 (4m)
- Figma  Masks 遮罩功能的應用 (9m)

### Figma 的超級實用 Plugin 們 (56m)

- 快速繪製線框圖與 UI 精稿 - 設計待辦清單APP (16m)
- 頁面色彩設計與立體效果 - 數位產品卡片式介面（上） (6m)
- 頁面色彩設計與立體效果 - 數位產品卡片式介面（下） (7m)
- 3D 圖標視覺效果 - 3D 遊戲選單介面 (14m)
- 波浪與不規則形狀設計 - 創意網站 Landing Page (11m)
- Figma Plugin 推薦 2026：AI 內建後仍每天打開的 8 個外掛 (0m) [Preview]

### Figma 視覺感設計 (32m)

- Lego 樂高像素效果 (2m)
- 大理石紋路效果 (3m)
- 信用卡金屬光澤 (3m)
- 光碟繞射效果 (2m)
- Glassmorphism 毛玻璃效果 (4m)
- Neon Glass 霓透玻璃感 (5m)
- 簡易版 3D 立體化效果 (2m)
- 新擬物化風格 Neumorphism (3m)
- Isometric 等距透視 (4m)

### Figma 製作 Prototype 原型 (1h 32m)

- 互動導覽列設計：Mouse Enter 懸停動畫 (10m)
- 卡片滑動設計：水平滾動與 Auto Layout 應用技巧 (7m)
- 卡片 Hover 動畫設計：Variants 與 Prototype 滑鼠互動效果 (7m)
- 卡片拖曳互動設計：On Drag 觸發與 Smart Animate 過渡 (6m)
- 卡片滑動與背景動態切換設計 (12m)
- 視差滾動互動設計：多層次背景與元素動態切換 (15m)
- 製作彈跳視窗互動效果（Popup） (9m)
- 懸浮式快速導覽選單｜點擊展開與 Hover 動畫的浮動表單 (11m)
- 製作連續網頁動態背景與 icon 輪播效果 (12m)

### Figma 圖解設計系統 (25m)

- Grid 網格系統 (1m)
- Button 按鈕的設計 (5m)
- UI 設計元件系統 Component (1m)
- 使用 Constraint 設計響應式 (3m)
- Constraint 約束的介面應用 (5m)
- Navigation 導覽選單 (3m)
- 佈局 Auto Layout (3m)

### 從零開始的設計專案 (1h 0m)

- 前置任務｜競品框架分析 (4m)
- 前置任務｜網站框架設定 (5m)
- 前置任務｜Wireframe 線框稿 (23m)
- 前置任務｜UI Mockup 設計  (21m)
- 前置任務｜Prototype 原型 (5m)

### 如何設計個人品牌網站 (37m)

- 如何設計個人品牌網站 (10m)
- 如何設計個人品牌網站（2） (2m)
- 如何設計個人品牌網站（3） (9m)
- 如何設計個人品牌網站（4） (3m)
- 如何設計個人品牌網站（5） (10m)

### 如何設計工作室形象網頁 (1h 0m)

- 如何設計工作室形象網頁 (11m)
- 麵包屑導覽（Breadcrumb） (5m)
- 網站分頁的設計延伸 (6m)
- Auto layout 的表格應用 (5m)
- 欄位介面的卡片式設計 (10m)
- 漢堡選單（Hamburger menu） (6m)
- RWD 響應式的應用邏輯 (13m)

### 如何設計甜點店品牌網頁 (51m)

- 如何設計甜點店品牌網頁 (14m)
- 以 Grid 網格呈現商品 (9m)
- 商品元件的 Hover 樣式 (5m)
- 商品元件的條列式卡片 (6m)
- 商品的詳情資訊頁面 (8m)
- 加入購物車結帳頁面 (7m)

### 如何設計餐廳品牌網站 (46m)

- 如何設計餐廳品牌網站 (7m)
- 菜單和購物車的介面邏輯 (4m)
- 關於我們的設計與識別應用 (5m)
- 預約介面與選擇日期的設計 (9m)
- 餐廳網頁的 RWD 響應式 (18m)

### ＃解鎖章節 Framer 網站設計 (1h 54m)

- 快速上手 Framer (8m)
- 建立第一個 Framer 專案 (16m)
- 導覽列設計：LOGO 與滾動畫面 (15m)
- 「關於我」頁面的精細調整 (9m)
- 「服務項目」輪播與動畫效果 (11m)
- 卡片設計與響應式設置 (9m)
- 「個人作品集」的網頁設計 (12m)
- 作品集 Portfolio 專案區域 (9m)
- 元件連結的介面互動 (13m)
- Framer 的動態介面效果 (8m)

### ＃解鎖章節 AI 生成技術實作 UI 設計 (1h 55m)

- 使用 Midjourney 生成 UI 概念設計 (6m)
- 繪製 Wireframe 線框稿結構 (9m)
- 製作 Intro Page 網頁 (13m)
- 設計 Home Page 首頁 (15m)
- 網站 Menu 選單導覽列設計 (13m)
- 產品介紹頁面 UI 精稿 (7m)
- 卡片 Card 動態效果製作 (14m)
- 網頁動畫效果設計(1) (10m)
- 網頁動畫效果設計（2） (13m)
- 完成 AI 生成網站專案 (13m)

### Figma 進階核心應用 (23m)

- UI 設計中的 Grid System (4m)
- Figma 響應設計 - Constraints 面板 (1m)
- Figma 響應設計 - Auto Layout 面板 (13m)
- Design System 設計系統基礎知識 (3m)

### 使用 Spline 設計 3D 動態介面 (1h 50m)

- Spline 打造 3D 建模（上） (11m)
- Spline 打造 3D 建模（下） (13m)
- Spline 3D 首頁介面設計 (10m)
- Spline 動態物件設定 (9m)
- Spline 按鈕與 3D 卡片 (14m)
- 攝影機及畫面切換 (10m)
- 切片建模與材質球上色 (12m)
- 客製化介面佈局製作 (9m)
- 網頁滑鼠互動效果 (7m)
- Spline 導出至 Framer (9m)
- Spline Omma AI 完全解析：一句話生成 3D 網站與互動體驗 (0m)

### Figma Make 系列：互動式氣象 App 實作 (13m)

- 打造天氣 APP × 日夜模式切換互動 (5m)
- 設計主導的互動原型實作：Point and Edit + Code 發布 (7m)

### Figma 新功能解析 - 液態玻璃效果（Liquid Glass Effect）實作 (23m)

- 快速上手｜Figma 的 Liquid Glass 新效果 (4m)
- Glass 效果延伸｜打造完整音樂播放卡片 UI (3m)
- 液態玻璃介面音樂 App（上）｜打造背景與專輯封面 (8m)
- 液態玻璃介面音樂 App（下）｜播放控制 × 進度條 (7m)

### （數位教材）設計師求職與作品集 (0m)

- 設計師作品經典模式 (0m)
- 設計師該怎麼獨自升級 (0m)
- 設計師的 Junior 到 Senior (0m)
- 沒工作經歷如何累積 UI/UX 作品 (0m)
- UI 與 UX 的作品集準備 (0m)
- UI/UX 設計師職缺判讀 (0m)
- 能讓設計圈記住你的社群帳號，只有 4 種玩法 (0m)

### 📚 課後補充講義筆記 (0m)

- Figma Variables 與 Modes 完全解析：深色模式、多品牌主題與 Design Token 的實作邏輯 (0m)
- Figma Dev Mode 交付實務：標註、規格、Code Connect 與 MCP 的完整交接流程 (0m)
- 介面狀態設計：空狀態、錯誤、Loading 與 Disabled，作品集最常被打回的那一塊 (0m)
- 無障礙設計檢查表：對比度、點擊尺寸、焦點樣式與 WCAG 2.2 的實務底線 (0m)
- Figma 全產品線 2026：十個工具，什麼情境該開哪一個 (0m)
- FigJam 實戰：User Flow、Affinity Map 與競品拆解，補上作品集最缺的那一段 (0m)
- Figma Slides 提案簡報：把作品集做成面試那十分鐘會贏的版本 (0m)
- Figma Sites vs Framer：CMS、斷點與實作對照，什麼案子該用哪一個 (0m)
- Figma Weave 工具接上 MCP：在 Claude、ChatGPT 裡直接呼叫你打包好的創作管線 (0m)

## Pricing

### 📅 期間限定早鳥優惠價格 - NT$2,480
*Original price: NT$7,980*

♾️ 無限次觀看「100 種 Figma 設計的方法」且無期間限制 💳 分期零利率（三期、六期）僅限：玉山、台新銀行信用卡