本課程包含以下內容：
課程簡介
⏰ 限時優惠活動
（感謝同學們踴躍報名‼️ 好評延長中）
NT$ 7,980→NT$ 1,980
⏳ 鎖定價倒數
23 時 59 分 59 秒
QUICK ANSWER
這是台灣繁體中文市場第一門完整的 Framer 網站設計課程。從版面、互動、CMS、SEO 到網站發布流程,從 0 開始學 Framer,做出 5 個真正能上線的響應式網站作品。設計師、自媒體經營者、創業者適用,學完即作品集。
CHAPTER 01 · WHAT IS IT
用 Framer 把設計做到上線,不用再交給工程師
這堂課是專為設計師、自媒體經營者、創業者打造的 Framer 完整教學。從版面設計、互動效果、CMS 內容管理、SEO 到網站發布流程,整條鏈路一次學會。
如果你熟 Figma 卻交不出能點的網站、試過 Wix 或 WordPress 做不出有質感的品牌官網、想用 No-Code 取代外包架站——這堂 Framer 課就是為你設計的。
CHAPTER 02 · WHY NOW
2026 年,為什麼設計師現在該學 Framer?
AI 與 No-Code 重新洗牌網站開發的這幾年,設計與工程的界線越來越模糊。傳統工具各有侷限——Webflow 強大但學習曲線陡、WordPress 笨重且需要主機、Wix 自由度低且套版感重。Framer 剛好補在中間,是設計師最直覺的網站架設工具。
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 PATH
01
Framer 基礎入門
帳號設定、介面導覽、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
商業應用 BONUS
Framer 接案定價策略(台灣市場行情)、Figma to Framer 工作流、常用 Plugins 整合、報價單範本與合約條款。
CHAPTER 05 · PROJECTS
5 個實戰專案,學完即作品集
這堂課的核心價值在於——你不是看教學而已,是真的會帶著作品離開。每個專案都是市場上常見、可立即用來接案或自用的網站類型。
5
PROJECTS
30+
LESSONS
6h
CONTENT
∞
ACCESS
A
設計師作品集網站(Portfolio)
多頁面結構、CMS 作品列表、Hover 互動效果、Case Study 動態展開。市場行情 NT$15,000–30,000。
B
SaaS 產品 Landing Page
Hero 動畫、功能比較表、定價方案卡、推薦序與 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。
NOTE
做 1–2 個 Framer 接案,課程費就回本。
CHAPTER 06 · IN PRACTICE
清楚拆解,邊做邊學的節奏
每一個篇章都是「先理解 Framer 概念 → 跟著做範例 → 拆解設計技巧 → 完成階段性產出」的循環。你不會被一連串理論淹沒,每打開一支影片,都有可以立即實作的小成果。
繁體中文教學,所有 Framer 介面術語中英對照,方便你之後查官方文件與英文教學資源。每章節附範例檔,可以打開 Framer 直接跟著做。
「設計師最大的優勢不再只是設計,是把設計做到上線的能力。」
RIVEN · 2026
FAQ · 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 都支援。一般筆電就能順暢使用。
這是 RAR 設計攻略的第 6 堂線上課,承接 Figma、Photoshop、Illustrator、Canva、自媒體設計學的脈絡。我是設計師 Riven,在設計圈深耕近十年——這次帶你進入 Framer 的世界。
台灣繁體中文市場第一門完整 Framer 課程,現正預購中。
課程要點
從 0 開始學 Framer，做出真正能上線的響應式網站，不依賴工程師交付
精通 Components、Variants、Variables 三大核心系統，建立可重複使用的設計組件
掌握 CMS 系統，管理部落格、作品集、產品列表等動態內容
製作專業級互動動畫：Scroll Effects、Page Transitions、3D Transforms、暗黑模式
完成 5 個實戰專案：設計師作品集、SaaS Landing Page、個人品牌、商業網站等
學會 SEO 優化、自訂網域與發布前檢查清單
Framer 接案定價、報價單範本、合約模板（台灣市場實戰）