Framer 是什麼？2026 年設計師為什麼該認真考慮這個工具

DESIGN TOOLS · 2026

▲ Framer 在 2026 年定位很清楚：Design、Publish、CMS、AI 全部在同一個工作空間，設計師不再需要把檔案丟給工程師才能上線

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 功能都在解決「設計師為什麼自己沒法做網站」的具體理由。

CHAPTER 03 · HOW IT WORKS

核心架構五層

Framer 把網站建構這件事拆成五層，每一層都跟設計師原本的工作方式對齊。

這五層的設計關鍵在於——每一層的 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 只要填欄位不用重做頁面。

不適合的場景

千頁規模的內容站、大型電商、需要複雜後台權限的 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 跟它們的位置差距如下。

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 時代設計師的位置