--- title: "Framer vs Figma Sites 怎麼選？2026 設計師建站工具完整對比" slug: framer-vs-figma-sites url: https://rar.design/posts/framer-vs-figma-sites published_at: 2026-06-30 modified_at: 2026-06-30 author: "設計師 Riven" category: "AI 設計" tags: ["設計工具比較", "網頁設計", "AI 設計工具", "建站工具", "Figma Sites", "Framer"] access: public_access --- # Framer vs Figma Sites 怎麼選？2026 設計師建站工具完整對比 > 從 AI agent、CMS、上線速度到價格，一篇看懂兩個工具差在哪、你該用哪個 By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-06-30 DESIGN TOOLS · 建站對決 · 2026 ▲ Framer 與 Figma Sites，2026 年做網站的兩條路——這篇幫你選對那一條。 QUICK ANSWER Framer 是現在就能出貨的成熟建站工具——AI agent 能挑模型、還能從 Claude Code 外部操控，動畫、CMS、A／B 測試、全球 CDN 一應俱全。Figma Sites 還在 open beta，但最大的本錢是它長在 Figma 裡，設計稿貼上去就能改、就能上線。要馬上接案、把網站推上線，選 Framer；整套流程本來就在 Figma、想少切一次工具，Figma Sites 越來越夠用。 CONTENTS 01 先搞清楚：這題到底在比什麼 02 Framer 現在長什麼樣 03 Figma Sites 現在長什麼樣 04 逐項硬碰硬 05 價格的真相 06 你該用哪個 07 藏在這題底下的更大轉變 CHAPTER 01 · THE REAL QUESTION 先搞清楚：這題到底在比什麼 這兩週設計圈很熱鬧。Framer 3.0 在六月十六號上線，把整個工具改寫成 agent 優先；八天後 Figma 在 Config 2026 一口氣端出 code layers、Motion、shaders、generative plugins。兩個工具幾乎同時升級，而且升的還是同一個方向——讓你從一句話的描述，一路做到一個能上線的網站。 很多人會把這題寫成「Figma 還是 Framer」，但那是設計工具層級的問題，我之前在另一篇拆過——結論是大多數人兩個一起用，在 Figma 收斂設計、在 Framer 上線（想看那個大局比較，這篇有完整框架）。這篇要窄得多、也實戰得多：當你已經決定要做一個網站，Framer 跟 Figma Sites 這兩個建站工具，你該鑽進哪一個裡面把它做出來。 關鍵差別只有一句話。Framer 是一個獨立的建站平台，你在它的畫布裡從零長出網站；Figma Sites 是 Figma 內建的建站功能，你把 Figma 的設計稿貼進去、直接變成網站。一個是「換到專門工具」，一個是「留在原地」。整篇文章的所有取捨，都是從這個分岔點長出來的。 ▲ 一句話定位：Framer 偏網站製作，Figma Sites 偏 Figma 生態延伸。 NOTE 順帶釐清：Figma 還有一個叫 Figma Make 的東西，那是文字生程式碼的原型工具，跟 Figma Sites 不是同一回事。這篇只比 Framer 跟 Figma Sites 這兩個正面交鋒的建站產品。 CHAPTER 02 · FRAMER Framer 現在長什麼樣 Framer 出身是個原型工具，這幾年一路長成正式的網站平台——保留了像 Figma 一樣自由的畫布，再往上疊 hosting、CMS、SEO、AI。它去年八月拿了一億美元 D 輪、估值衝到二十億，不是玩具，是真的在出貨的東西。 Framer 3.0 之後，整個工具的重心變成那個 AI agent。你打一句話，它直接在畫布上長出版型、區塊、配色，然後你再微調字級、間距、顏色到剛好。但真正讓我覺得它走在前面的，是幾個老手才會在意的細節。 ▲ Framer 的 agent 面板。下一句指令「把 hero 改成垂直堆疊、換成附的圖」，它就動手改了七個圖層——這是它跟一般拖拉建站工具最大的差別。 你可以挑模型 Framer 的 agent 讓你在 Sonnet、Opus、GPT 之間切換，看任務難度選。要快、要省，用輕的；要它扛複雜的版面重構，換重的。這件事看起來小，但它把「AI 是黑盒」這個假設打掉了——你開始能對工具的腦袋下判斷。 它能被外部的 AI 操控 這是 Framer 現在最狠的一招，也是 Figma Sites 完全沒有的東西。你可以從 Claude Code、Cursor、Codex、甚至終端機直接驅動你的 Framer 網站：從 Slack 改文案、從終端機觸發 CMS 變更、從一個 GitHub PR 把網站推上線。它甚至內建 WordPress 搬家——掛上去，舊站的文章一篇一篇自動長進 Framer 的 CMS。對已經活在 AI 編輯器裡的人，網站變成另一個可以被指揮的端點。 其他成熟的部分也都到位了。叫 agent 檢查整站，它會把對比不足、錯字、缺 alt、SEO 漏洞、樣式不一致都揪出來、順手修掉；叫它讀流量，它會把數字翻成「下一步該做什麼」。內建 A／B 測試會直接告訴你哪個版本轉換率高、贏多少。多語有 AI 翻譯，一鍵長出整套語系。最後 publish 上全球 CDN，站很快。 想看它整套跑起來的樣子，Framer 官方這支 3.0 發表影片講得最清楚（細節我也寫過一篇Framer 3.0 完整指南）： CHAPTER 03 · FIGMA SITES Figma Sites 現在長什麼樣 Figma Sites 是 Config 2025 端出來的，到現在還掛著 open beta。它的定位是「設計、原型、上線」一條龍，全部在 Figma 的畫布上完成。所有方案都能用，但要 publish 到自訂網域得是付費方案、而且要 Full seat 才能編輯跟發布。 它最大的賣點，不是某個炫功能，而是「你不用離開 Figma」。Figma 的設計稿可以直接複製貼進 Sites，設計系統、元件、樣式全部接著用，斷點切換、scroll parallax、跑馬燈這種互動點幾下就有，畫布裡直接看 HTML 即時預覽。對一個整套流程已經泡在 Figma 裡的設計師，這等於把「上線」這一步直接縫進原本的工作檯，中間那道交接整個消失。 ▲ 在 Figma 畫布上直接做網站。上方那排 desktop／tablet／mobile 斷點切換，就是設計稿變成響應式網站的入口。 CMS 也補上了。現在能做部落格、作品集、活動頁這種會動態更新的內容，把列表、整頁綁到 CMS collection，還有預接好的區塊可以直接套。對設計師的個人網站、簡單的行銷頁來說，這個深度已經夠用。 真正讓 Figma Sites 這半年補上戰力的，是 Config 2026 給整個畫布加的那批新材料——這些不只 Sites 能用，是整個 Figma 的能力，但它們直接餵養了 Sites 的天花板： 1 Figma Motion 畫布上直接做動畫，有時間軸、關鍵影格、預設。Framer 向來最強的動畫互動，Figma 終於正面接上。 2 Code layers 把任何設計圖層一鍵變成可互動的程式碼層，在畫布上跟設計並排比較方向、再縫回設計。 3 Shaders 與 generative plugins 用一句話讓 agent 幫你生 WebGPU shader 質感、或現做一個你需要的小工具外掛，材質跟紋理不再是難題。 ▲ Config 2026 把 motion、shader、code、外掛全部搬上同一塊畫布。這些材料，正是 Figma Sites 接下來的彈藥（延伸閱讀：Config 2026 重點整理）。 CHAPTER 04 · HEAD TO HEAD 逐項硬碰硬 把行銷話術全部拿掉，按設計師真正會卡關的維度一格一格擺出來： ▲ 你會明顯感受到的差異——先看這張快速版，下面再逐項拆。 維度 Framer Figma Sites 成熟度 正式版、能出貨 仍是 open beta AI agent 可選模型、外部可控 新 agent，深綁設計 上手門檻 要學新畫布 已在 Figma、零遷移 動畫互動 業界頂尖、向來強項 Config 2026 剛補上 CMS 成熟、但有天花板 新、夠日常用 SEO／A／B／分析 內建整套行銷工具 相對陽春 上線／hosting 全球 CDN、一鍵 付費方案才上網域 外部 AI 操控 Claude Code／Cursor／終端機 — 最低月費 Pro 約 US$30／站 含在 Figma Full seat 看出形狀了嗎。Framer 在「出貨」這一側幾乎全勝——它就是專門為了把網站推上線、而且推得快又漂亮而生的。Figma Sites 的優勢全部集中在「連續性」這一側：你不用切工具、不用重畫、設計系統一路接到底。這不是誰比較強，是兩種不同的賭注。 CHAPTER 05 · PRICING 價格的真相 價格這題不能只看標價，要看「你已經在付什麼」。 $30 FRAMER PRO ／月／站 $16 FIGMA FULL SEAT ／月 $0 兩邊都有免費起點 Framer 去年十月把方案收成五級：Free、Basic、Pro、Scale、Enterprise。Pro 大約每月三十美金，重點是它按「站」計費——你有三個客戶網站，就是三份訂閱。免費版做一個簡單的站其實很能打，但 Basic 只給一個 CMS collection，真要上正式內容會卡。 Figma Sites 這邊的算盤完全不同。它含在 Figma 的 Full seat 裡，而 Figma Professional 的 Full seat 一個月才十六美金（月繳二十）。換句話說，只要你本來就是付費的 Figma 使用者，Sites 幾乎等於免費附贈——你只是把已經在付的訂閱多用一個功能。唯一要記得的是，免費的 Starter 方案不能上自訂網域，要正式上線得是付費方案。 所以價格的結論很乾脆：如果你是接案、要交一個又一個客戶網站，Framer 的單站費會累積，但它的產出品質跟速度撐得起這個價；如果你已經住在 Figma、只是想幫自己或公司多出一個網站，Figma Sites 在帳面上幾乎沒有額外成本。 CHAPTER 06 · WHO SHOULD USE WHICH 你該用哪個 不要問哪個比較好，問你現在要解的是哪個問題。 ▲ 重視網站成品感、互動、CMS——這些情境通常 Framer 比較對味。 選 FRAMER，如果你⋯⋯ ✦ 要馬上交客戶網站、行銷頁、作品集，而且要看起來很猛 ✦ 在乎動畫跟互動的質感，那是你的差異化武器 ✦ 需要 A／B 測試、流量分析、SEO 這種把網站當成行銷機器的工具 ✦ 已經活在 Claude Code、Cursor 裡，想從外部 AI 直接操控網站 ✦ 要做多語站，想一鍵長出整套語系 ▲ 平常主要就在 Figma、要的是熟悉度跟協作——Figma Sites 會很順。 選 FIGMA SITES，如果你⋯⋯ ✦ 整套流程本來就在 Figma，不想為了上線再切一次工具 ✦ 要做個人網站、設計師作品集、活動頁、簡單的行銷頁 ✦ 想讓設計系統從設計稿一路無縫接到上線的網站 ✦ 接受 beta、願意陪它一起長，換取少切一個工具的順暢 ✦ 團隊已經在付 Figma，不想再多養一個訂閱 ▲ 直接對情境選最快：四種常見需求，各自該選誰。 我自己的判斷很簡單：要出貨、要交件、要當成生意在跑的網站，現在還是 Framer 穩。要的是把設計到上線縫成一條線、而且你本來就泡在 Figma，那 Figma Sites 已經越過「能不能用」的門檻，剩下的只是它願不願意把 beta 的標籤拿掉。 CHAPTER 07 · THE BIGGER SHIFT 藏在這題底下的更大轉變 退一步看，Framer 跟 Figma Sites 其實在搶同一件事。 過去很多年，「設計」跟「上線」是兩份工作，中間夾著一道交接——設計師畫完，丟給工程師，或者丟進 Webflow 重做一次。Framer 整個崛起的故事，就是把這道交接擦掉；Figma Sites 則是 Figma 拒絕在「上線」這一步把設計師放走。Config 2026 跟 Framer 3.0 兩週內前後腳落地，賭的是同一件事：那個 AI agent，會變成把設計到上線收成一個連續動作的那根針。 “ 工具會換，能從一張空白畫布一路盯到網址上線的判斷力不會。會被淘汰的不是用錯工具的人，是只會背一個工具面板的人。 所以選哪個工具，其實沒有你想的那麼關鍵。真正關鍵的，是你有沒有在練那個能跨越整段動作的判斷力——握得住意圖，從零開始指揮 agent，一路把它帶到一個能跑的網址。二〇二六年的設計師，贏的不是手最快的，是腦袋能從頭盯到尾的。Framer 也好、Figma Sites 也好，最後都只是你那套判斷力的延伸。 常見問題 Framer 跟 Figma Sites 哪個比較適合新手？ 看你的起點。如果你已經會用 Figma，Figma Sites 幾乎沒有學習曲線，設計稿直接貼上就開始。如果你還沒碰過任何自由畫布工具，Framer 跟 Figma Sites 的門檻其實差不多，但 Framer 的 agent 可以用一句話幫你把版型先長出來，反而更好上手。 Figma Sites 還是 beta，現在拿來做正式網站安全嗎？ 做個人作品集、活動頁、簡單行銷頁是夠的，很多人已經這樣在用。但如果是要長期維運、流量很重、或客戶交付的關鍵專案，正式版的 Framer 在穩定性跟功能完整度上還是比較讓人放心。 兩個都要付錢嗎？可以只用免費版嗎？ 兩邊都有免費起點。Framer 免費版能做一個簡單的站，但上自訂網域、解鎖 CMS 要升級到 Pro（約每月三十美金、按站計費）。Figma Sites 含在 Figma 的付費方案裡，Full seat 一個月十六美金起，免費的 Starter 不能上自訂網域。 動畫互動哪個比較強？ Framer 向來是業界標竿，動畫跟互動是它的核心強項。Figma 在 Config 2026 補上了 Motion 時間軸跟 shader，差距正在縮小，但要做高度客製、講究細節的互動，目前 Framer 還是領先。 我能在 Figma 設計、再搬到 Framer 上線嗎？ 可以，而且這是很多設計師現在的實際做法——在 Figma 收斂設計、在 Framer 上線。如果你走這條路，那 Figma Sites 跟 Framer 就不是二選一，而是分工。想看這種「兩個一起用」的完整流程，可以參考我另一篇 Figma 跟 Framer 的平台比較。 Figma Sites 跟 Figma Make 有什麼不一樣？ Figma Sites 是建站工具，把設計稿變成可發布的網站；Figma Make 是文字生程式碼的原型工具，從描述或設計生出能跑的原型或 app。要做正式網站用 Sites，要快速生互動原型用 Make。 延伸資源 → 想實際試 Framer，可以從免費版開始，先做一個簡單的站感受它的畫布跟 agent。 → Framer 3.0 的 agent、branching、新社群，我寫過一篇完整指南。 → Figma Config 2026 端出的全部新材料，看這篇重點整理。 TAKEAWAYS → 這題不是「Figma 還是 Framer」，是兩個建站產品的正面對決——一個換到專門工具，一個留在 Figma 原地。 → Framer 在「出貨」幾乎全勝：正式版、可選模型、外部 AI 可控、A／B 測試、全球 CDN。要交件選它。 → Figma Sites 贏在連續性：不切工具、不重畫、設計系統一路接到底，本來付 Figma 的人幾乎零成本。 → 真正該練的不是某個工具的面板，是能從空白畫布一路指揮 agent 到網址上線的判斷力。 ▲ 懶人結論：沒有絕對誰贏，只有誰更適合你的工作流程。 想把這兩個工具都紮實練起來——Figma 練設計收斂、Framer 練上線交付——下面這兩門課我整套幫你鋪好了。 COURSE · FIGMA 100 種 Figma 設計的方法 把 Figma 從「會用」練到「精通」，元件、variable、auto layout 到設計系統思維一次建立。 ✦ 元件、variable、auto layout 系統化 ✦ 100 種實戰 UI 設計手法 ✦ 建立完整的 UI／UX 設計流程 看課程介紹 → COURSE · FRAMER Framer 網站設計課：從零開始 把 Framer 從打開畫布練到能接案交付，一條龍帶你做出一個會動、能上線的真網站。 ✦ 畫布操作到響應式斷點全圖解 ✦ CMS、捲動動效、互動實作 ✦ 發佈上線到掛網域全流程 看課程介紹 → SUBSCRIPTION · AIWAKEN AI 覺醒設計應用攻略 Framer、Figma 這類工具每週都在更新，我幫你過濾雜訊，只整理對設計師真正有用的應用。 ✦ AI 工具實測與工作流 ✦ 設計師角度 Prompt 技巧 ✦ 每週 AI × 設計新知 了解訂閱方案 →