📢 Framer 3.0 改版與課程調整更新

📖 Framer 完全指南｜2026 年設計師為什麼該認真考慮這個工具

AI Wireframer 入門：讓 AI 自動搭好網頁雛形

06:39

打造 RWD 響應式導覽列：從斷點到點擊互動

27:20

Hero 區與航班查詢設計

12:31

三欄特色區＋文字打字動畫效果

06:44

引言區 × 滾動淡入動畫（Scroll Animation）

07:18

數據 KPI 區 × 使用 Counter 元件動態數字效果

07:37

航班卡片區 × 互動元件與 Hover

09:47

Footer 製作 × 全頁節奏設計

08:54

Navbar 導覽與滾動互動整合

08:02

Framer 全站發佈上線

08:10

開工前的藍圖——認識 CYBERTOY，先把 RWD 地基打好

05:57

第一秒就定氛圍——Loading 動畫與設計系統的起點

05:10

借一個模板改成你的導覽列——Sticky 吸頂、Hover 發光與手機漢堡選單

08:29

Hero 主視覺（上）——先把世界觀排好：Layout、RWD 與「釘子原則」

06:58

Hero 主視覺（下）——讓平面世界立體起來：視差、漂浮與微互動

06:24

召喚 Workshop 這位 AI 工程師！一句話生出打字機文字與專屬游標

04:54

角色選擇區——複製就是效率：繼承霓虹樣式＋傾斜跑馬燈

05:44

角色卡片（上）——畫一張，變出一整排：Component 與 Variables 變數

08:07

角色卡片（下）——讓卡片動起來：水平輪播、3D 翻轉與隱藏角色

08:15

最終章——把區塊串起來，按下 Publish：錨點、Scroll Variant 與 Loading 整合

07:07

快速上手 Framer：8 分鐘做完第一個網站

08:44

動手做第一個作品集：從建專案到完成頁面框架

16:04

導覽列細部設計：LOGO、Variant 動畫到滾動跳轉

15:10

細部精修第一波：手機版、Hero 動畫、About 區

09:07

服務項目區：卡片設計、輪播與動畫

11:54

卡片設計與響應式設置:工作經驗區 EXPERIENCE 從零完成

09:40

作品集 Grid 與 Contact 區:9 格佈局、Focal Point 與 Logo Utility

12:21

元件連結的介面互動:Multi-page 切換、Anchor Link 與 Sticky Nav 修正

13:34

Framer 的動態介面效果:Appear 動畫、Scroll Trigger 與發佈上線

08:08

網頁設計的發展歷史：從第一個網頁到 AI 生成

過去十年的網站設計趨勢：從 iOS 7 扁平化，到 Apple Liquid Glass

Framer 3.0：當 AI 住進設計畫布——Agents、Branching、Community 三大更新

Spline 打造 3D 建模（上）

37:58

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 網站與互動體驗

CMS 完全入門——讓客戶自己發文章，你不用再當免費工讀生

從買網域到 SSL 生效——把 framer.website 換成你自己的名字

表單——收得到信，才算是一個能做生意的網站

Framer SEO 怎麼設定？從 meta、sitemap 到 AI 搜尋可見度的完整指南

什麼是網頁（Web）

02:40

什麼是響應式設計（RWD）

04:42

什麼是 HTML 跟 CSS？

04:35

詳細解說 CSS Box Model（盒子模型）

04:28

Fill、Hug、Fixed：寬度到底誰決定

04:41

UX in Motion：介面動效的 12 條原則

08:01

Hero 到 CTA 的說服順序——為什麼你的網站好看卻沒人填表單