⏰ 限時優惠活動
（感謝同學們踴躍報名‼️ 好評延長中）
NT$ 7,980→NT$ 1,980
⏳ 期間限定倒數
23 時 59 分 59 秒
QUICK ANSWER
這是台灣繁體中文市場第一門完整的 Framer 網站設計課程。從版面、互動、CMS、SEO 到網站發布流程,從 0 開始學 Framer,做出 5 個真正能上線的響應式網站作品。設計師、自媒體經營者、創業者適用,學完即作品集。
CHAPTER 01 · WHAT IS IT
這堂課是專為設計師、自媒體經營者、創業者打造的 Framer 完整教學。從版面設計、互動效果、CMS 內容管理、SEO 到網站發布流程,整條鏈路一次學會。
如果你熟 Figma 卻交不出能點的網站、試過 Wix 或 WordPress 做不出有質感的品牌官網、想用 No-Code 取代外包架站——這堂 Framer 課就是為你設計的。
WORKFLOW · 以前 vs 現在
以前
Figma 設計稿
→
交給工程師
→
來回溝通改版
→
等排程上線
Framer
設計
=
上線
一個人、一條線、一鍵發布
CHAPTER 02 · WHY NOW
AI 與 No-Code 重新洗牌網站開發的這幾年,設計與工程的界線越來越模糊。傳統工具各有侷限——Webflow 強大但學習曲線陡、WordPress 笨重且需要主機、Wix 自由度低且套版感重。Framer 剛好補在中間,是設計師最直覺的網站架設工具。
CHAPTER 03 · WHO IT'S FOR
誠實告訴你它適合與不適合的對象。我這幾年看著太多設計師花錢買了不對的課,結果半途棄學,那種挫敗比沒上課更傷。
UI / UX 設計師:你會用 Figma,想把設計能力延伸到能上線的網站,多一個接案項目、一份自己的作品集網域。
平面設計師、視覺設計師:想跨足數位網頁設計,把作品集做成自己的網站,不再仰賴 Behance 或 Cargo 模板。
創業者、自媒體經營者:需要高質感的品牌官網,但不想被 Wix 套版綁架,也不想花十萬請外包。
自由接案工作者:想把 Framer 加進接案技能組合,承接作品集、Landing Page、品牌官網案件。
你要做的是大型電商(Shopify 比較適合)。
你需要複雜的會員系統與金流後台(建議找 Webflow 加客製開發)。
你完全沒用過任何設計工具(建議先從《100 種 Figma 設計的方法》入門)。
CHAPTER 04 · CURRICULUM
整堂 Framer 課拆成 6 篇結構,每篇都會帶你做一個階段性產出,最後完成 5 個能直接放進作品集的真實網站。
LEARNING PATH
01 基礎入門
→
02 核心功能
→
03 動畫效果
→
04 實戰專案
→
05 發布優化
→
06 商業應用
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
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。
MARKET RATE · 台灣接案行情參考（滿版＝NT$150,000）
A 作品集網站
NT$15,000–30,000
B SaaS Landing Page
NT$30,000–60,000
C 個人品牌與部落格
NT$25,000–50,000
D 商業服務網站
NT$50,000–150,000
E 電商 DTC 銷售頁
NT$40,000–80,000
＊區間為課程內引用之市場參考行情,實際依專案規模而異。
NOTE
做 1–2 個 Framer 接案,課程費就回本。
這堂課
NT$1,980
最低一個接案
NT$15,000 ≈ 7.5 倍課程費
SHOWCASE
CHAPTER 06 · IN PRACTICE
每一個篇章都是「先理解 Framer 概念 → 跟著做範例 → 拆解設計技巧 → 完成階段性產出」的循環。你不會被一連串理論淹沒,每打開一支影片,都有可以立即實作的小成果。
繁體中文教學,所有 Framer 介面術語中英對照,方便你之後查官方文件與英文教學資源。每章節附範例檔,可以打開 Framer 直接跟著做。
LEARNING LOOP · 每個篇章的循環
理解概念
→
跟做範例
→
拆解技巧
→
階段產出
↻ 下一章
「設計師最大的優勢不再只是設計,是把設計做到上線的能力。」
RIVEN · 2026
FAQ · COMMON QUESTIONS
跟得上。第一篇就是完整的 Framer 基礎入門,從帳號設定開始教。但前提是你有用過 Figma 或其他視覺設計工具——如果連 Figma 都沒碰過,建議先從《100 種 Figma 設計的方法》入門,再上 Framer 課會更順。
Framer 有免費方案,整堂課與 5 個實戰專案都不用付費。當你想綁定自己的網域、移除浮水印時,才需要升級 Framer 的 Mini 方案(US$5/月,約 NT$160)。課程裡會教你怎麼判斷何時該升級。
可以。第六篇有完整章節教 Framer 接案定價、報價單範本、合約條款。台灣市場參考行情:作品集網站 NT$15,000–30,000、SaaS Landing Page NT$30,000–60,000、品牌官網 NT$50,000–150,000。做 1–2 個案就回本。
Webflow 功能強大但偏程式碼思維、學習曲線陡;Wix 自由度低、套版感重;WordPress 笨重且需要主機。Framer 的優勢在於設計思維(Figma 邏輯)、上線速度(一鍵發布到全球 CDN)、互動動畫(內建 Motion 系統),是設計師最直覺的選擇。
需要。Figma 解決「設計稿」,Framer 解決「能上線的網站」——兩者互補。Figma 課讓你會做版面,Framer 課讓你把版面變成真實網站。許多學員會把兩堂搭配一起學。
無限期觀看,且 Framer 後續更新衍生出的新單元會免費補上(如同 Figma 課從 Chapter 01 持續補到 Chapter 06 的模式)。Framer 每年都會大幅更新,你會跟著拿到新內容。
Framer 是雲端工具,瀏覽器就能跑(建議 Chrome 或 Safari),Mac、Windows 都支援。一般筆電就能順暢使用。
THE 6TH COURSE · RAR 設計攻略課程系譜
Figma
→
Photoshop
→
Illustrator
→
Canva
→
自媒體設計學
→
Framer
這是 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 接案定價、報價單範本、合約模板（台灣市場實戰）
