--- title: "Framer 是什麼？2026 年設計師為什麼該認真考慮這個工具" slug: framer-complete-guide-2026 url: https://rar.design/posts/framer-complete-guide-2026 published_at: 2026-05-21 modified_at: 2026-05-21 author: "設計師 Riven" category: "AI 設計" tags: ["Framer 課程", "設計工具", "網站設計", "No-Code", "AI 設計", "Framer"] access: public_access --- # Framer 是什麼？2026 年設計師為什麼該認真考慮這個工具 > 從 Wireframer 到 CMS 3.0，看 Framer 如何把「設計到發布」變成同一個工作流 By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-05-21 DESIGN TOOLS · 2026 ▲ Framer 在 2026 年定位很清楚：Design、Publish、CMS、AI 全部在同一個工作空間，設計師不再需要把檔案丟給工程師才能上線 QUICK ANSWER Framer 是設計師專用的網站建構工具，介面像 Figma，輸出是真實上線的網站。2026 年版內建 AI（Wireframer 生草稿、Workshop 生互動元件）、重做後的 CMS 3.0、Logo Shaders、On-Page Editing，讓「設計到發布」在同一個空間完成，不需要 dev handoff。對接案、做品牌站、做作品集、做 Landing Page 的設計師，Framer 能把整個流程縮短到原本的三分之一。 CHAPTER 01 · WHAT IS IT 設計師最後一塊拼圖 Framer 一開始不是網站建構工具。它是 React 圈裡有名的 prototyping library，設計師拿它做高擬真的動態原型。後來團隊發現一件事：原型跟正式網站之間，隔的不是技術，是介面。 於是他們把原型工具改寫成正式的網站平台。同一個 canvas、同一套互動邏輯、同一個元件系統，但是按下發布之後，它就是一個真實的、有 SSR、有 CDN、有自動 AVIF 壓縮的網站。 這個轉變讓 Framer 變成一個很特別的存在——它不是把 CMS 包了一層好看的皮給設計師用（像 Wix），也不是給工程師用的視覺化 HTML 寫法（像 Webflow）。它的 DNA 從第一天就是 Figma 那種 design-first 的思考方式，這在 2026 年的工具市場裡是少數。 簡單講：如果你會用 Figma，那 Framer 對你來說不是學一個新工具，是學會把 Figma 直接送上線。 CHAPTER 02 · WHY IT MATTERS 為什麼 2026 年要重新評估它 2025 年五月之前，我會把 Framer 歸類成「設計師接案用的快速建站工具」，跟客戶說「我們可以選 Framer 或 Webflow」，然後 70% 客戶會選 Webflow。理由是「比較主流」「找接手的人比較多」「CMS 比較成熟」。 這個結構在 2025 年五月被打破。Framer 連續推出 Wireframer、Workshop、Design Pages、On-Page Editing，接著在 2026 年四月端出 CMS 3.0 大改版跟 Logo Shaders。半年內它做完了一件事——把網站建構流程裡所有「設計師會卡住的地方」，全部用 AI 補起來。 這次更新的意義不是「Framer 加了 AI」，矽谷的工具現在沒一個沒加 AI。意義在於它選擇加 AI 的位置——每一個 AI 功能都在解決「設計師為什麼自己沒法做網站」的具體理由。 TIMELINE · FRAMER 2025-2026 半年內把工作流重組完的關鍵更新 2025/05 Wireframer + Workshop AI 從 prompt 直接生整頁草稿；Workshop 用對話生互動元件 2025/08 On-Page Editing 直接在已發布頁面瀏覽器裡編輯，不用回編輯器 2025/09 Design Pages 完整 UI 設計直接一鍵發布，設計與正式網站之間沒有交付步驟 2026/03 Auto Translate + Bento 一鍵多語化，Bento 卡片式版型成內建模板 2026/04 CMS 3.0 內容管理整個重做，inline editing、bulk actions、folders、多選 2026/04 Logo Shaders 上傳 SVG/PNG，Gradient 與 Glass 兩種 shader 讓 2D logo 自動變 3D 質感 CHAPTER 03 · HOW IT WORKS 核心架構五層 Framer 把網站建構這件事拆成五層，每一層都跟設計師原本的工作方式對齊。 STACK · FIVE LAYERS 01 Design Canvas 跟 Figma 幾乎一樣的視覺編輯介面，auto-layout、components、variants、styles 全有。差別在於每個元件背後都是真實 HTML/CSS，不是檢視層。 02 Interactions & Motion scroll-triggered animation、hover state、page transition，不寫 code，直接在屬性面板裡設定。Framer 起家就是 motion，這層是同類工具裡最強的。 03 CMS 3.0 2026/04 重做後的內容管理層。可以接 Notion、Google Sheets、Hubspot 同步，支援關聯 collection、inline editing、folder 結構。對部落格、案例庫、產品列表這類動態頁是必備。 04 AI Layer Wireframer 用 prompt 生整頁草稿、Workshop 用對話生互動元件、AI 寫 CMS 草稿、AI 自動生 alt text 跟 SEO meta，這層在 2025-2026 鋪滿了整個產品。 05 Publishing & Performance 內建 hosting、CDN、SSL、自訂網域、自動 AVIF 圖片壓縮、SSG + Traffic-aware Pre-Rendering。發布是「按一個按鈕」，不是「找工程師處理」。 這五層的設計關鍵在於——每一層的 abstraction 都做在設計師熟悉的位置。canvas 跟 Figma 對齊、CMS 跟 Notion 對齊、AI 入口跟 Cursor、Claude Code 對齊。學一個新工具的痛，有 60% 在「找不到熟悉的隱喻」，Framer 把這個痛拿掉。 ▲ CMS 3.0 的 collection 結構與同步來源；左下 Synced 區塊可以直接接 Notion、Google Sheets、Hubspot 當內容源；圖片來源 framer.com CHAPTER 04 · GETTING STARTED 三步驟上手 Framer 的上手曲線在 2026 年已經被 AI 壓得很低。會用 Figma 的人，從註冊到第一個 landing page 上線，一個下午就夠。實際路徑是這樣： 第一步，開新專案直接用 Wireframer。不要對著空白 canvas 發呆。寫一句話描述你要的東西，例如「一個攝影師作品集，首頁是英雄圖加四個案例，深色背景、現代字體」，Wireframer 會生出整頁的骨架。然後你開始改。 ▲ Framer 編輯器實際畫面：左側 Wireframer 用自然語言生整頁草稿，中間 Workshop 對話生功能元件，右側是設計師熟悉的屬性面板；圖片來源 framer.com 第二步，改成自己的設計，加上互動。這一步像在 Figma 工作。改字、換圖、調 layout、設 hover、加 scroll animation。卡住的時候按 cmd+K 開 Workshop，描述你要的元件，例如「比較滑桿，左邊是 before、右邊是 after」，Workshop 會直接生出可用的元件丟到你的專案。 第三步，按 Publish。就這樣。Framer 自動接 hosting、CDN、SSL、SEO meta、AVIF 壓縮圖片。要綁自己的網域，在設定裡填 DNS 記錄。整個發布流程的心智成本，比把檔案傳給工程師低。 ▼ Framer 官方 CMS 3.0 介紹影片；這次重做的方向是「設計師的 CMS 應該長什麼樣」 CHAPTER 05 · IN PRACTICE 設計師到底用它做什麼 Framer 不是萬用工具。它在某些場景強到很離譜、在某些場景就是不對。把場景講清楚比把功能講清楚重要。 ▲ Framer 最甜蜜的四個族群：UI/UX 設計師、個人品牌經營者、自由接案者、新創與行銷團隊。下面把每個場景的實際工作流拆開講。 場景一：個人作品集 最甜蜜的點。設計師最常被問「你的網站在哪」，然後拖了兩年沒做。原因不是不會設計，是不知道怎麼上線。Framer 把這個阻力歸零。一個週末做完、自訂網域、SSL、SEO 全包，甚至可以做 case study 動態頁串 CMS。 場景二：品牌 Landing Page 接案 新創公司、SaaS、活動官網。這類案子的特徵是：客戶要「酷一點的」「有動畫的」「Apple/Linear 那種感覺的」，預算抓不到完整的 dev team。Framer 的 motion system 在這個級距裡幾乎無敵，一個設計師可以從 brief 到上線全程跑完。 場景三：部落格與內容站 CMS 3.0 重做之後這塊變得很強。可以把 Notion 當寫稿後台、Framer 當前台呈現，Notion 改一次、Framer 自動同步。設計感比 Ghost、Substack 高一個層級，同時保有 CMS 的彈性。 場景四：產品 case study 與 portfolio 站 PM、設計師、研究員的個人 work showcase。CMS collection 把每個 case 存起來，一個動態模板套用全部，新增 case 只要填欄位不用重做頁面。 「設計師最大的時間黑洞不是改稿，是 dev handoff。Framer 在這個位置上把答案改寫了。」 不適合的場景 千頁規模的內容站、大型電商、需要複雜後台權限的 SaaS 應用、需要 server-side 客製邏輯的服務，這些不要用 Framer。Framer 強在「設計密度高、頁面數中等、需要快速迭代」的場景，對應到接案 80% 都是這類。 CHAPTER 06 · LIMITS 限制與定價要老實講 Framer 不是免費的。免費方案可以做學習跟原型，但要綁自己的網域、要拿掉 framer.website 子網域、要更大的 CMS 容量，都要付費。 中文字型是另一個要事先想的。Framer 內建的 Google Fonts 中文字型有但不多，最終常常會走「自己上傳 woff2」的路。台灣設計師如果要用思源黑體、源樣明朝、銀光體這類，要自己處理字型授權跟檔案大小。 學習曲線方面，會 Figma 的人轉得快，一週可以上手做完整 landing page。沒設計背景的工程師、PM 反而會卡——Framer 的邏輯是「視覺先行」，不是「結構先行」，這個思維轉換比學語法難。 定價結構 以 2026/05 的定價，每個 site 算錢、不是整個 workspace。Mini 約 5 美金/月、Basic 約 15、Pro 約 30、Business 約 75。接案的設計師大多用 Pro，CMS 容量跟頻寬夠用、可以綁自己的網域、開分析。要看最新數字直接到 framer.com/pricing。 CHAPTER 07 · COMPARED TO 跟其他工具的位置 2026 年同時想著要選工具的設計師，面前通常擺著四個選項。Framer 跟它們的位置差距如下。 VS WEBFLOW Webflow 對結構敏感，適合工程思維設計師。Framer 對視覺敏感，適合 design-first 設計師。同一個 landing page，Webflow 的 class 結構更乾淨，Framer 的 motion 更滑順。看你的工作流偏哪一邊。 VS FIGMA MAKE Figma Make 走 prompt-to-code 路線，適合做 prototype 跟探索。Framer 走 design-to-live-site 路線，適合做正式上線的網站。Figma Make 的輸出是 React code，Framer 的輸出是現成的網站。 VS LOVABLE & V0 Lovable / v0 是「對話一直問，AI 一直生」，適合工程師或 PM 想快速驗證點子。Framer 把 AI 當 assistant，主導權還在設計師手上，每個 AI 輸出都是可編輯的元件，不是黑盒子。 VS WIX & SQUARESPACE Wix、Squarespace 是模板平台，設計自由度低。Framer 是真正的 design tool，你想做出 Apple 等級的網站它做得到。當然代價是學習曲線高一些。 CHAPTER 08 · TAKEAWAYS 下一個十年的設計師工具 寫到這裡，會發現整篇文章在講一件事——Framer 把「設計到發布」變成一個無縫的工作流。這在 2020 年是奢望、2023 年是承諾、2026 年是現實。 設計師面前有兩條路。一條是繼續把 Figma 當終點，然後交給工程師、CMS、客戶。另一條是把 Framer 學起來，從設計到上線都是自己的事。前者讓你維持原本的舒適區、後者讓你變成更完整的設計師。 AI 不會取代設計師。但 AI + Framer 會慢慢取代「會用 Figma 但不會做網站」的設計師——這個分水嶺正在發生，比想像的快。 NEW COURSE · FRAMER Framer 網站設計課：從零開始 台灣第一堂 Framer 中文完整教學。從 0 開始學 No-Code，跟著做完 5 個能放作品集的真實網站——個人作品集、SaaS Landing Page、品牌官網、商業服務網站、Components · CMS · Scroll Animation 工作流。 限時 NT$1,980 · 原價 NT$7,980 查看課程 → SUBSCRIPTION · AIWAKEN AI 覺醒設計應用攻略 AI 工具每週都在更新，我幫你過濾雜訊，只整理對設計師真正有用的應用。 ✦ AI 工具實測與工作流 ✦ 設計師角度 Prompt 技巧 ✦ 每週 AI × 設計新知 了解訂閱方案 → 常見問題 Q：Framer 跟 Figma 是什麼關係？ A：兩個都是設計工具，但用途不同。Figma 是給設計師畫稿、做原型、跟團隊協作的工具，輸出是設計檔。Framer 是給設計師做正式網站的工具，輸出是上線的網站。很多人會在 Figma 畫稿、然後在 Framer 重做成可上線的網站。 Q：Framer 適合中文網站嗎？ A：適合。RWD、SEO、CMS 都對中文沒問題。比較需要注意的是中文字型——內建的 Google Fonts 中文選擇不多，建議自己上傳 woff2 字型，或用付費字型服務如思源黑體、justfont 的雲端字型。 Q：不會寫程式可以用 Framer 嗎？ A：可以。整個產品就是給不寫程式的人設計的。會 HTML/CSS 概念會更上手，但即使完全沒有也能做出能上線的網站。Workshop AI 還會在你卡住的時候幫你生互動元件。 Q：Framer 可以做電商嗎？ A：可以做小規模商品展示與付款，Framer 有 Framer Commerce 模組可以串。但如果是品項數上千、有複雜的庫存管理、會員系統的大型電商，建議用 Shopify 之類專業電商平台搭 Framer 做品牌站。 Q：Framer 跟 Webflow 哪個 SEO 好？ A：兩個都好，路線不太一樣。Webflow 給你更細的 SEO 控制權（結構標記、自訂 schema）。Framer 給你更自動的 SEO 處理（自動 AVIF、CMS 變數帶入 meta、自動 sitemap）。內容站、技術文件導向選 Webflow；品牌站、landing page 導向選 Framer。 Q：Framer 學起來要多久？ A：會 Figma 的人一個週末就能做出第一個 landing page，一個月可以做到接案水準。重點是把 auto-layout、components、CMS、interaction 這四件事先弄通，其他都是延伸。 Q：Framer 的網站速度跟一般工程師寫的網站差多少？ A：不會差。Framer 用 Traffic-aware Pre-Rendering 加 SSG 來服務頁面，圖片自動轉 AVIF。一般 landing page 的 Lighthouse 分數常常九十分以上，比很多自己寫的網站還快。 RESOURCES · 延伸資源 想開始試 Framer · RAR 課程：Framer 網站設計課：從零開始，台灣第一堂繁體中文 Framer 完整教學，5 個實戰專案 · Framer 官方，免費註冊試用，原型階段不用付費 · Framer Academy，官方免費課程，從零開始 · Templates Marketplace，直接買現成模板，一鍵套用 · RAR 過往文章：Lovable、Figma Make、Framer 三方比較，搭配看會更理解 design-to-code 全圖 · RAR 過往文章：Figma Make 與設計師護城河，延伸思考 AI 時代設計師的位置