---
title: "Framer 網站設計課：從零開始"
seo_title: "   Framer 網站設計課：從零開始 | RAR 設計攻略"
seo_description: "台灣第一門 Framer 繁體中文設計完整課程。從 0 開始學 No-Code 網站設計，掌握 Components、CMS、Responsive 響應式設計、Scroll Animation 互動動畫，完成 5 個實戰專案：設計師作品集、SaaS Landing Page、品牌官網、商業網站等。設計師 Riven 親授。"
slug: framer
url: https://rar.design/courses/framer
type: paid
---

# Framer 網站設計課：從零開始

> Framer : No-Code Design, Zero to Website

## Description

⏰ 限時優惠活動（感謝同學們踴躍報名‼️ 好評延長中）NT$ 7,980→NT$ 1,980⏳ 期間限定倒數23 時 59 分 59 秒⏰ 專屬特別優惠NT$ 7,980→NT$ 1,980QUICK ANSWER這是台灣繁體中文市場第一門完整的 Framer 網站設計課程。從版面、互動、CMS、SEO 到網站發布流程,從 0 開始學 Framer,做出 5 個真正能上線的響應式網站作品。設計師、自媒體經營者、創業者適用,學完即作品集。CHAPTER 01 · WHAT IS IT用 Framer 把設計做到上線,不用再交給工程師這堂課是專為設計師、自媒體經營者、創業者打造的 Framer 完整教學。從版面設計、互動效果、CMS 內容管理、SEO 到網站發布流程,整條鏈路一次學會。如果你熟 Figma 卻交不出能點的網站、試過 Wix 或 WordPress 做不出有質感的品牌官網、想用 No-Code 取代外包架站——這堂 Framer 課就是為你設計的。WORKFLOW · 以前 vs 現在以前Figma 設計稿→交給工程師→來回溝通改版→等排程上線Framer設計=上線一個人、一條線、一鍵發布CHAPTER 02 · WHY NOW2026 年,為什麼設計師現在該學 Framer?AI 與 No-Code 重新洗牌網站開發的這幾年,設計與工程的界線越來越模糊。傳統工具各有侷限——Webflow 強大但學習曲線陡、WordPress 笨重且需要主機、Wix 自由度低且套版感重。Framer 剛好補在中間,是設計師最直覺的網站架設工具。FEATUREFramerWebflowWixWordPressFigma 設計師上手✦ 幾乎零學習中易難互動動畫✦ 內建 Motion強弱需 plugin設計到上線整合✦ 一站完成分階段套版受限需主機CMS 系統✦ 內建強基礎需 plugin部署速度✦ 一鍵快快慢CHAPTER 03 · WHO IT'S FOR這堂 Framer 課適合誰學?誠實告訴你它適合與不適合的對象。我這幾年看著太多設計師花錢買了不對的課,結果半途棄學,那種挫敗比沒上課更傷。✦ 這堂課適合你,如果——UI / UX 設計師:你會用 Figma,想把設計能力延伸到能上線的網站,多一個接案項目、一份自己的作品集網域。平面設計師、視覺設計師:想跨足數位網頁設計,把作品集做成自己的網站,不再仰賴 Behance 或 Cargo 模板。創業者、自媒體經營者:需要高質感的品牌官網,但不想被 Wix 套版綁架,也不想花十萬請外包。自由接案工作者:想把 Framer 加進接案技能組合,承接作品集、Landing Page、品牌官網案件。— 這堂課不適合你,如果——你要做的是大型電商(Shopify 比較適合)。你需要複雜的會員系統與金流後台(建議找 Webflow 加客製開發)。你完全沒用過任何設計工具(建議先從《100 種 Figma 設計的方法》入門)。CHAPTER 04 · CURRICULUM完整 6 大篇章,從基礎到上線整堂 Framer 課拆成 6 篇結構,每篇都會帶你做一個階段性產出,最後完成 5 個能直接放進作品集的真實網站。LEARNING PATH01 基礎入門→02 核心功能→03 動畫效果→04 實戰專案→05 發布優化→06 商業應用01Framer 基礎入門帳號設定、介面導覽、Frames 與 Stacks 排版邏輯、文字與基本元素操作、響應式設計與 Breakpoints。完成第一個 Framer 頁面。02核心功能精通Components 組件系統、Variants 互動狀態、Variables 變數實戰、Framer CMS、Collection List 動態頁面、表單製作與資料串接。03動畫與進階效果Hover、Appear、Scroll Effects、進階捲動動畫、Page Transitions 頁面轉場、Ticker 與輪播、3D Transforms、暗黑模式。04五個實戰專案 CORE設計師作品集網站 / SaaS 產品 Landing Page / 個人品牌與部落格網站 / 商業服務網站 / 電商 DTC 品牌銷售頁。學完即作品集。05發布與優化SEO 設定與 Meta 優化、自訂網域與 DNS、效能優化、發布前完整檢查清單。教你判斷何時該升級 Framer 付費方案。06商業應用 BONUSFramer 接案定價策略(台灣市場行情)、Figma to Framer 工作流、常用 Plugins 整合、報價單範本與合約條款。CHAPTER 05 · PROJECTS5 個實戰專案,學完即作品集這堂課的核心價值在於——你不是看教學而已,是真的會帶著作品離開。每個專案都是市場上常見、可立即用來接案或自用的網站類型。5PROJECTS30+LESSONS6hCONTENT∞ACCESSA設計師作品集網站(Portfolio)多頁面結構、CMS 作品列表、Hover 互動效果、Case Study 動態展開。市場行情 NT$15,000–30,000。BSaaS 產品 Landing PageHero 動畫、功能比較表、定價方案卡、推薦序與 FAQ 模組。市場行情 NT$30,000–60,000。C個人品牌與部落格網站CMS 文章系統、自動文章列表、訂閱表單、SEO 結構化資料設定。市場行情 NT$25,000–50,000。D商業服務網站服務介紹、案例展示、預約諮詢表單、客戶見證輪播。市場行情 NT$50,000–150,000。E電商 / DTC 品牌銷售頁產品介紹、Lookbook 視覺輪播、購物按鈕串接(Shopify / Stripe Checkout)、用戶評價、SEO 商品結構化資料。市場行情 NT$40,000–80,000。MARKET RATE · 台灣接案行情參考（滿版＝NT$150,000）A 作品集網站NT$15,000–30,000B SaaS Landing PageNT$30,000–60,000C 個人品牌與部落格NT$25,000–50,000D 商業服務網站NT$50,000–150,000E 電商 DTC 銷售頁NT$40,000–80,000＊區間為課程內引用之市場參考行情,實際依專案規模而異。NOTE做 1–2 個 Framer 接案,課程費就回本。這堂課NT$1,980最低一個接案NT$15,000 ≈ 7.5 倍課程費SHOWCASECHAPTER 06 · IN PRACTICE清楚拆解,邊做邊學的節奏每一個篇章都是「先理解 Framer 概念 → 跟著做範例 → 拆解設計技巧 → 完成階段性產出」的循環。你不會被一連串理論淹沒,每打開一支影片,都有可以立即實作的小成果。繁體中文教學,所有 Framer 介面術語中英對照,方便你之後查官方文件與英文教學資源。每章節附範例檔,可以打開 Framer 直接跟著做。LEARNING LOOP · 每個篇章的循環理解概念→跟做範例→拆解技巧→階段產出↻ 下一章「設計師最大的優勢不再只是設計,是把設計做到上線的能力。」RIVEN · 2026FAQ · COMMON QUESTIONS關於 Framer 課程的常見問題Q1. 我完全沒學過 Framer,從 0 開始跟得上嗎?跟得上。第一篇就是完整的 Framer 基礎入門,從帳號設定開始教。但前提是你有用過 Figma 或其他視覺設計工具——如果連 Figma 都沒碰過,建議先從《100 種 Figma 設計的方法》入門,再上 Framer 課會更順。Q2. Framer 本身要付費嗎?免費版夠用嗎?Framer 有免費方案,整堂課與 5 個實戰專案都不用付費。當你想綁定自己的網域、移除浮水印時,才需要升級 Framer 的 Mini 方案(US$5/月,約 NT$160)。課程裡會教你怎麼判斷何時該升級。Q3. 學完 Framer 課可以接案嗎?可以。第六篇有完整章節教 Framer 接案定價、報價單範本、合約條款。台灣市場參考行情:作品集網站 NT$15,000–30,000、SaaS Landing Page NT$30,000–60,000、品牌官網 NT$50,000–150,000。做 1–2 個案就回本。Q4. Framer 跟 Webflow、Wix、WordPress 有什麼不同?Webflow 功能強大但偏程式碼思維、學習曲線陡;Wix 自由度低、套版感重;WordPress 笨重且需要主機。Framer 的優勢在於設計思維(Figma 邏輯)、上線速度(一鍵發布到全球 CDN)、互動動畫(內建 Motion 系統),是設計師最直覺的選擇。Q5. 已經有 Figma 課,還需要 Framer 課嗎?需要。Figma 解決「設計稿」,Framer 解決「能上線的網站」——兩者互補。Figma 課讓你會做版面,Framer 課讓你把版面變成真實網站。許多學員會把兩堂搭配一起學。Q6. 課程有觀看期限嗎?以後 Framer 更新還會有新章節嗎?無限期觀看,且 Framer 後續更新衍生出的新單元會免費補上(如同 Figma 課從 Chapter 01 持續補到 Chapter 06 的模式)。Framer 每年都會大幅更新,你會跟著拿到新內容。Q7. 課程用什麼裝置學?需要高配電腦嗎?Framer 是雲端工具,瀏覽器就能跑(建議 Chrome 或 Safari),Mac、Windows 都支援。一般筆電就能順暢使用。THE 6TH COURSE · RAR 設計攻略課程系譜Figma→Photoshop→Illustrator→Canva→自媒體設計學→Framer這是 RAR 設計攻略的第 6 堂線上課,承接 Figma、Photoshop、Illustrator、Canva、自媒體設計學的脈絡。我是設計師 Riven,在設計圈深耕近十年——這次帶你進入 Framer 的世界。台灣繁體中文市場第一門完整 Framer 課程,現正預購中。

## Learning Objectives

- 從 0 開始學 Framer，做出真正能上線的響應式網站，不依賴工程師交付
- 精通 Components、Variants、Variables 三大核心系統，建立可重複使用的設計組件
- 掌握 CMS 系統，管理部落格、作品集、產品列表等動態內容
- 製作專業級互動動畫：Scroll Effects、Page Transitions、3D Transforms、暗黑模式
- 完成 5 個實戰專案：設計師作品集、SaaS Landing Page、個人品牌、商業網站等
- 學會 SEO 優化、自訂網域與發布前檢查清單
- Framer 接案定價、報價單範本、合約模板（台灣市場實戰）

## Course Info

- Lectures: 56
- Video: 6h
- Downloadable resources: 1

## Instructors

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

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

## Curriculum

### 📢 課程公告 (0m)

- 📢 Framer 3.0 改版與課程調整更新 (0m)
- 👋 歡迎加入｜Framer 是什麼、能做什麼、怎麼學 (0m)
- 📖 Framer 完全指南｜2026 年設計師為什麼該認真考慮這個工具 (0m)

### 互動式品牌單頁實作：AERIS AIR (1h 43m)

- AI Wireframer 入門：讓 AI 自動搭好網頁雛形 (6m)
- 打造 RWD 響應式導覽列：從斷點到點擊互動 (27m)
- Hero 區與航班查詢設計 (12m)
- 三欄特色區＋文字打字動畫效果 (6m)
- 引言區 × 滾動淡入動畫（Scroll Animation） (7m)
- 數據 KPI 區 × 使用 Counter 元件動態數字效果 (7m)
- 航班卡片區 × 互動元件與 Hover (9m)
- Footer 製作 × 全頁節奏設計 (8m)
- Navbar 導覽與滾動互動整合 (8m)
- Framer 全站發佈上線 (8m)

### Framer 互動網頁實戰——從零打造 CYBERTOY 賽博龐克網站 (1h 7m)

- 開工前的藍圖——認識 CYBERTOY，先把 RWD 地基打好 (5m)
- 第一秒就定氛圍——Loading 動畫與設計系統的起點 (5m)
- 借一個模板改成你的導覽列——Sticky 吸頂、Hover 發光與手機漢堡選單 (8m)
- Hero 主視覺（上）——先把世界觀排好：Layout、RWD 與「釘子原則」 (6m)
- Hero 主視覺（下）——讓平面世界立體起來：視差、漂浮與微互動 (6m)
- 召喚 Workshop 這位 AI 工程師！一句話生出打字機文字與專屬游標 (4m)
- 角色選擇區——複製就是效率：繼承霓虹樣式＋傾斜跑馬燈 (5m)
- 角色卡片（上）——畫一張，變出一整排：Component 與 Variables 變數 (8m)
- 角色卡片（下）——讓卡片動起來：水平輪播、3D 翻轉與隱藏角色 (8m)
- 最終章——把區塊串起來，按下 Publish：錨點、Scroll Variant 與 Loading 整合 (7m)

### Framer 新手教學 (1h 44m)

- 快速上手 Framer：8 分鐘做完第一個網站 (8m)
- 動手做第一個作品集：從建專案到完成頁面框架 (16m)
- 導覽列細部設計：LOGO、Variant 動畫到滾動跳轉 (15m)
- 細部精修第一波：手機版、Hero 動畫、About 區 (9m)
- 服務項目區：卡片設計、輪播與動畫 (11m)
- 卡片設計與響應式設置:工作經驗區 EXPERIENCE 從零完成 (9m)
- 作品集 Grid 與 Contact 區:9 格佈局、Focal Point 與 Logo Utility (12m)
- 元件連結的介面互動:Multi-page 切換、Anchor Link 與 Sticky Nav 修正 (13m)
- Framer 的動態介面效果:Appear 動畫、Scroll Trigger 與發佈上線 (8m)

### （數位教材）設計觀念｜網頁設計發展史 (0m)

- 網頁設計的發展歷史：從第一個網頁到 AI 生成 (0m)
- 過去十年的網站設計趨勢：從 iOS 7 扁平化，到 Apple Liquid Glass (0m)
- Framer 3.0：當 AI 住進設計畫布——Agents、Branching、Community 三大更新 (0m)

### （課後補充）使用 Spline 設計 3D 動態介面 (2h 17m)

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

### 📖 數位教材講義｜Framer 網站經營手冊 (0m)

- CMS 完全入門——讓客戶自己發文章，你不用再當免費工讀生 (0m)
- 從買網域到 SSL 生效——把 framer.website 換成你自己的名字 (0m)
- 表單——收得到信，才算是一個能做生意的網站 (0m)
- Framer SEO 怎麼設定？從 meta、sitemap 到 AI 搜尋可見度的完整指南 (0m)

### 🎬 動態圖解網頁的底層邏輯 (21m)

- 什麼是網頁（Web） (2m)
- 什麼是響應式設計（RWD） (4m)
- 什麼是 HTML 跟 CSS？ (4m)
- 詳細解說 CSS Box Model（盒子模型） (4m)
- Fill、Hug、Fixed：寬度到底誰決定 (4m)

### 📖 數位教材講義｜網頁設計的判斷力 (0m)

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

## Pricing

### ⏰ 早鳥活動限定預購優惠 - NT$1,980
*Original price: NT$7,980*

📅 募資期間享早鳥方案價格 ♾️ 無限次觀看「Framer 網站設計課：從零開始」且無期間限制 💳 分期零利率（三期、六期）僅限：玉山、台新銀行信用卡