Framer 網站設計課：從零開始

關於這堂課

這是一堂專為設計師、自媒體經營者與創業者打造的 Framer 網站設計課——台灣繁體中文市場第一門完整教學。從版面、互動、CMS 內容管理、SEO 到網站發布流程，你會從 0 開始學 Framer，做出真正能上線的響應式網站。

如果你熟 Figma 卻交不出能點的網站、試過 Wix 或 WordPress 做不出有質感的品牌官網、想用 No-Code 取代外包架站，這堂 Framer 課就是為你設計的。

2026 年，為什麼設計師現在該學 Framer?

在 AI 與 No-Code 重新定義網站開發的這幾年，設計與工程的界線變得越來越模糊。傳統工具各有侷限——Webflow 強大但學習曲線陡、WordPress 笨重且需要主機、Wix 自由度低且套版感重，而 Framer 剛好補在中間，是設計師最直覺的網站架設工具。

• 設計即上線:從版面設計、互動效果、CMS 系統到 SEO 設定，整條流程都在 Framer 內完成，跳過繁瑣的切版與工程串接。
• Figma 無痛接軌:Framer 的介面與互動邏輯與 Figma 高度相似，設計師幾乎零學習成本。
• 內建 AI 與 Motion 系統:Framer AI 可用文字生成網頁框架，內建動畫系統做出專業級互動效果，全程不用寫程式。
• Responsive 自動斷點:內建桌機、平板、手機三種斷點，響應式設計（RWD）更直覺。
• 全球 CDN 一鍵發布:網站效能與 SEO 表現都優於傳統架站工具，發布即上線。

這堂 Framer 課適合誰學?

誠實告訴你它適合與不適合的對象。

✓ 這堂課適合你，如果——

• UI / UX 設計師:你會用 Figma，想把設計能力延伸到真正能上線的網站，多一個接案項目、一份自己的作品集網域。
• 平面設計師、視覺設計師:你想跨足數位網頁設計，把作品集做成自己的網站，不再仰賴 Behance 或 Cargo 模板。
• 創業者、自媒體經營者:你需要一個高質感的品牌官網，但不想被 Wix 套版綁架、也不想花十萬請外包。
• 自由接案工作者:你想把 Framer 加進接案技能組合，承接作品集、Landing Page、品牌官網等案件。

✗ 這堂課不適合你，如果——

• 你要做的是大型電商（Shopify 比較適合）。
• 你需要複雜的會員系統與金流後台（建議找 Webflow + 客製開發）。
• 你完全沒用過任何設計工具（建議先從「100 種 Figma 設計的方法」入門）。

完整課程章節:從基礎到上線的 6 大篇章

整堂 Framer 課拆成 6 篇結構，每篇都會帶你做一個階段性產出，最後完成 4 個能直接放進作品集的真實網站。

第一篇 │ Framer 基礎入門

Framer 帳號設定、介面導覽、Frames 與 Stacks 排版邏輯、文字與基本元素操作、響應式設計與 Breakpoints。完成你的第一個 Framer 頁面。

第二篇 │ 核心功能精通

Components 組件系統、Component Variants 與互動狀態、Variables 變數系統實戰、Framer CMS 內容管理、Collection List 動態頁面、導覽選單與頁面連結、表單製作與資料串接。

第三篇 │ 動畫與進階效果

Hover、Appear、Scroll Effects 基礎動畫、進階捲動動畫（Scroll Transform）、Page Transitions 頁面轉場、Ticker 效果與輪播製作、3D Transforms 入門、暗黑模式實作。

第四篇 │ 四個實戰專案

專案 A:設計師作品集網站／專案 B:SaaS 產品 Landing Page／專案 C:個人品牌與部落格網站／專案 D:商業服務網站。學完即作品集。

第五篇 │ 發布與優化

SEO 設定與 Meta 優化、自訂網域與 DNS 設定、網站效能優化、發布前完整檢查清單。教你怎麼判斷何時該升級 Framer 付費方案。

第六篇 │ 商業應用（選修加值）

Framer 接案定價策略（台灣市場行情）、Figma to Framer 工作流程、常用 Plugins 整合、報價單範本與合約條款。

4 個實戰專案:學完即作品集

這堂 Framer 課的核心價值在於——你不是「看教學」而已，是真的會帶著作品離開。每個專案都是市場上常見、可立即用來接案或自用的網站類型:

• 專案 A:設計師作品集網站（Portfolio）——多頁面結構、CMS 作品列表、Hover 互動效果、Case Study 動態展開。
• 專案 B:SaaS 產品 Landing Page——Hero 動畫、功能比較表、定價方案卡、推薦序與 FAQ 模組。
• 專案 C:個人品牌與部落格網站——CMS 文章系統、自動文章列表、訂閱表單、SEO 結構化資料設定。
• 專案 D:商業服務網站——服務介紹、案例展示、預約諮詢表單、客戶見證輪播。

市場參考行情:一個 Framer 作品集網站 NT$15,000–30,000、SaaS Landing Page NT$30,000–60,000、品牌官網 NT$50,000–150,000。做 1–2 個 Framer 接案就回本。

清楚拆解，邊做邊學，新手也能跟上

每一個篇章都是「先理解 Framer 概念 → 跟著做範例 → 拆解設計技巧 → 完成階段性產出」的循環。你不會被一連串理論淹沒，每打開一支影片，都有一個可以立即實作出來的小成果。

課程使用繁體中文教學，所有 Framer 介面術語會中英對照，方便你之後查 Framer 官方文件與英文教學資源。每章節都附範例檔，你可以打開 Framer 直接跟著做。

關於 Framer 課程的常見問題

Q1. 我完全沒學過 Framer，從 0 開始跟得上嗎?

跟得上。第一篇就是完整的 Framer 基礎入門，從帳號設定開始教。但前提是你有用過 Figma 或其他視覺設計工具——如果連 Figma 都沒碰過，會建議你先從「100 種 Figma 設計的方法」入門，再來上 Framer 課程會更順。

Q2. Framer 本身要付費嗎?免費版夠用嗎?

Framer 有免費方案，你上完整堂課與 4 個實戰專案都不用付費給 Framer。當你想綁定自己的網域、移除 Framer 浮水印時，才需要升級 Framer 的 Mini 方案（US$5/月，約 NT$160）。課程裡會教你怎麼判斷何時該升級 Framer 付費方案。

Q3. 學完 Framer 課可以接案嗎?

可以。課程第六篇有完整章節教 Framer 接案定價（台灣市場行情）、報價單範本、合約條款。台灣市場參考行情:作品集網站 NT$15,000–30,000、SaaS Landing Page NT$30,000–60,000、品牌官網 NT$50,000–150,000。做 1–2 個 Framer 接案，課程費就回本了。

Q4. Framer 跟 Webflow、Wix、WordPress 有什麼不同?

Webflow 功能強大但偏程式碼思維、學習曲線陡;Wix 自由度低、套版感重;WordPress 笨重且需要租主機。Framer 的優勢在於設計思維（Figma 邏輯）、上線速度（一鍵發布到全球 CDN）、互動動畫（內建 Motion 系統），是設計師最直覺的網站架設工具。如果你會 Figma，Framer 學起來幾乎零摩擦。

Q5. 已經有 Figma 課，還需要 Framer 課嗎?

需要。Figma 解決的是「設計稿」，Framer 解決的是「能上線的網站」。兩堂課不衝突而是互補——Figma 課讓你會做版面，Framer 課讓你把版面變成真實網站。許多學員會把兩堂搭配一起學，等於完成「設計到上線」的完整能力。

Q6. 課程有觀看期限嗎?以後 Framer 更新還會有新章節嗎?

無限期觀看，且 Framer 後續更新衍生出的新單元會免費補上（如同 Figma 課從 Chapter 01 持續補到 Chapter 06 的模式）。Framer 每年都會大幅更新，你會跟著拿到新內容。

Q7. 課程用什麼裝置學?需要高配電腦嗎?

Framer 是雲端工具，瀏覽器就能跑（建議用 Chrome 或 Safari），Mac、Windows 都支援。一般筆電就能順暢使用，不需要高配電腦。

Q8. 課程跟 AI 覺醒設計應用攻略（AIWAKEN）有什麼關係?

AIWAKEN 是 RAR 設計攻略的月費訂閱方案，主打 AI 設計工具應用;Framer 課程是單獨買斷的線上課，主打 Framer 網站設計實戰。兩者各自獨立，但 AIWAKEN 訂閱會員購買 Framer 課程享有額外折扣。

準備好用 Framer 做出真正能上線的網站了嗎?

這是 RAR 設計攻略的第 6 堂線上課，承接 Figma、Photoshop、Illustrator、Canva、自媒體設計學的脈絡。我是設計師 Riven，RAR 設計攻略創辦人，在設計圈深耕近十年——這次帶你進入 Framer 的世界。

台灣繁體中文市場第一門完整 Framer 課程，現正預購中。