Figma 轉 Webflow vs Figma 轉 Next.js：誠實的代理商指南
我看過許多代理商在錯誤的技術棧中浪費數週——有時甚至數個月。一個行銷團隊用 Next.js 構建了他們的整個網站，而用 Webflow 的話本來能在三分之一的時間內完成。一家 SaaS 公司在 Webflow 上線，然後花了六個月時間應對其局限性，最終還是重新用 React 構建。你選擇的 Figma 到生產的技術棧並不是偏好問題。這是一個商業決策，影響著你的時程表、預算、團隊的理智，以及你真正能構建的內容。
本指南誠實地分析了兩種工作流程。不是「Webflow 不好，代碼好」或反之。我已經通過兩種技術棧完成了數十個項目，答案總是「視情況而定」——但我會讓「視情況而定」的部分真正發揮作用。
目錄
- 沒人好好解釋的核心差異
- Figma 到 Webflow：你真正獲得的
- Figma 到 Next.js：你真正獲得的
- 並排比較
- 決策框架：7 個問題
- 成本分析：真實數字
- 混合方法
- 我們看到代理商常見的錯誤
- 常見問題
沒人好好解釋的核心差異
大多數比較文章都忽略了這一點：Webflow 和 Next.js 並不是在同一類別中競爭。Webflow 是一個視覺網站構建器，內置了託管和 CMS。Next.js 是一個用於構建 Web 應用程式的 React 框架。比較它們就像比較皮卡和半掛車——它們都能將東西從 A 點運到 B 點，但它們的設計用途完全不同。
當有人說「Figma 到 Webflow」時，他們的意思是：將設計視覺化地轉換為 Webflow 的基於類的樣式系統，在需要時連接 CMS，然後發佈。整個過程都發生在 Webflow 生態系統內。
當有人說「Figma 到 Next.js」時，他們的意思是：將設計用代碼編寫成 React 組件，連接到無頭 CMS 或 API 層，部署到 Vercel 或其他主機。你擁有技術棧的每一部分。
兩者都不是絕對更好。但其中一個對於 你的特定項目 幾乎肯定是更好的選擇。
Figma 到 Webflow：你真正獲得的
工作流程
你的設計師在 Figma 中完成設計。一個 Webflow 開發人員（或熟悉 Webflow 的設計師本人）在 Webflow 的畫布上以視覺方式重建設計。他們為動態內容創建 CMS 集合，設置交互和動畫，配置 SEO 設置，然後發佈。
Figma 到 Webflow 的插件確實存在，但老實說？大多數經驗豐富的 Webflow 開發人員會在畫布中從頭開始重建。這些插件生成的代碼混亂。清潔構建比清理生成的代碼更快。
Webflow 表現出色的地方
行銷網站和落地頁。 這是 Webflow 的強項。一個擁有 5-20 頁內容的行銷網站，有博客、一些動畫和聯絡表單？Webflow 輕鬆搞定。根據複雜性，你可以在 1-3 週內從 Figma 上線。
設計精美且具有複雜交互的網站。 Webflow 的交互系統確實令人印象深刻。滾動觸發的動畫、懸停效果、頁面過渡——你可以在不編寫 JavaScript 的情況下以視覺方式構建這些。對於追求 Awwwards 或構建品牌體驗的代理商來說，這很重要。
客戶管理的內容。 Webflow 的編輯模式允許客戶更新文本、圖像和 CMS 內容，而無需觸及設計。他們無法破壞佈局。這對於不想因為每次文案更改都被叫來處理的代理商來說至關重要。
快速上市。 一個稱職的 Webflow 開發人員可以在幾天內推出一個精美的行銷網站。不是幾週。幾天。當客戶需要在下個月的貿易展前推出時，這種速度比架構的純粹性更重要。
Webflow 受限的地方
身份驗證和用戶帳戶。 Webflow 現在有會員功能，但功能有限。如果你需要基於角色的訪問、自訂用戶儀表板或除了基本內容保護以外的任何東西，你將需要用膠帶粘合第三方工具。
複雜的資料關係。 Webflow 的 CMS 支持參考欄位和多參考欄位，但 Business 計劃上限為 10,000 個 CMS 項目，Enterprise 上限為 100,000 個。如果你要構建一個擁有 50,000 個列表的目錄，每個列表都有多個可篩選的屬性，你會感受到痛苦。
自訂功能。 需要價格計算器？具有條件邏輯的多步驟表單？來自外部 API 的實時資料？你將需要嵌入自訂代碼或使用 Memberstack、Jetboost 或 Finsweet 屬性等工具。它有效，但你在構建一個多工具整合的弗蘭肯斯坦。
大規模國際化。 Webflow 添加了本地化功能，在 CMS 計劃上支持最多 5 個次要語言（2026 年價格）。但如果你需要 15 種語言、特定地區的內容和 RTL 支持，你將與平台相互對抗。
Figma 到 Next.js：你真正獲得的
工作流程
你的設計師在 Figma 中完成設計。前端開發人員（或團隊）將設計翻譯成 React 組件，通常使用 TypeScript 和樣式解決方案，如 Tailwind CSS、CSS Modules 或 styled-components。他們設置路由，連接到無頭 CMS（Sanity、Contentful、Storyblok 等），根據需要實現伺服器端渲染或靜態生成，並部署到 Vercel、Netlify 或 AWS。
這是一個代碼優先的工作流程。沒有視覺畫布。每一個像素都是編寫的，而不是拖動的。
Next.js 表現出色的地方
具有動態功能的 Web 應用程式。 用戶儀表板、具有自訂邏輯的電子商務、需要從產品 API 提取實時資料的 SaaS 行銷網站——這是 Next.js 的領域。你不受視覺構建器約束的限制。如果你能編寫它，你就能構建它。
大規模性能。 Next.js 為你提供了對渲染策略的精細控制。行銷頁面的靜態生成、動態內容的伺服器端渲染、增量靜態再生成以獲得兩者的優勢。一個在 Vercel 上構建良好的 Next.js 網站在核心 Web 指標上持續得分 95 以上。Webflow 網站也可以，但你對輸出的控制較少。
無頭 CMS 靈活性。 當你走上 無頭 CMS 開發 路線時，你將內容與表現完全分離。你的行銷團隊可以使用任何適合他們工作流程的 CMS。你的開發人員可以按照他們想要的方式構建前端。內容可以流向你的網站、移動應用程式、數字標牌——任何地方。
組件驅動的架構。 UI 的每一部分都是可重用的組件。你在 Figma 中的設計系統直接映射到代碼中的組件庫。這對於大型網站或在構建多個使用相同品牌系統的屬性時會帶來巨大的好處。
長期所有權。 你擁有你的代碼。你沒有被鎖定在任何人的專有平台中。如果 Webflow 明天將其價格提高一倍（他們之前提高過價格），你被困住了。使用 Next.js，你可以在任何地方部署。
Next.js 變得昂貴的地方
你需要開發人員。 優秀的 React 開發人員並不便宜。一個高級 Next.js 開發人員 在代理商處每小時收費 $150-250。一個 Webflow 開發人員可能每小時收費 $75-150。代碼優先方法需要更專業化的人才。
內容編輯器體驗需要工作。 使用 Webflow，你的客戶可以開箱即用地獲得視覺編輯器。使用 Next.js，你需要設置一個無頭 CMS、配置預覽模式，以及構建內容編輯體驗。這會增加每個項目的時間和成本。
簡單的網站需要更長時間。 一個基本的 10 頁行銷網站在 Webflow 中需要 2 週，但在 Next.js 中可能需要 4-6 週，考慮到 CMS 設置、部署配置和質量保證。對於直截了當的行銷網站，額外的時間通常是不合理的。
維護開銷。 依賴項需要更新。安全補丁需要應用。Next.js 框架本身發佈主要版本，有時包含破壞性更改（App Router 遷移，有人嗎？）。Webflow 為你處理所有這些。
並排比較
| 因素 | Figma → Webflow | Figma → Next.js |
|---|---|---|
| 典型時程表（10 頁網站） | 1-3 週 | 4-8 週 |
| 開發人員成本範圍 | $75-150/小時 | $150-250/小時 |
| 託管成本（每月） | $39-235/月（Webflow 計劃） | $0-20/月（Vercel）+ CMS 成本 |
| 包含的 CMS | 是，內置 | 否 -- 需要 Sanity、Contentful 等（$0-300+/月） |
| 客戶可以編輯內容 | 是，視覺編輯器 | 是，通過無頭 CMS（需要設置） |
| 自訂功能 | 受限（需要嵌入/整合） | 無限 |
| 動畫功能 | 優秀（視覺構建器） | 優秀（Framer Motion、GSAP -- 需要代碼） |
| SEO 控制 | 良好（元標籤、OG、網站地圖） | 完全控制（結構化資料、動態網站地圖、標題） |
| 電子商務 | 基礎（Webflow 電子商務） | 完整（Shopify Hydrogen、Saleor、自訂） |
| 國際化 | 受限（CMS 計劃上的 5 個次要語言） | 完整（next-intl、無限語言） |
| 性能上限 | 良好（~85-95 Lighthouse） | 優秀（~95-100 Lighthouse） |
| 供應商鎖定 | 高 | 低 |
| 最適用於 | 行銷網站、組合、部落格 | Web 應用程式、電子商務、複雜網站 |
決策框架：7 個問題
先拋開功能列表。以下是我在推薦技術棧前實際提出的問題：
1. 這個網站需要 DO 事，還是只需要 SHOW 事？
如果網站主要是顯示資訊——行銷文案、部落格文章、案例研究、團隊成員簡介——Webflow 可能是你的答案。如果它需要 做 事——使用自訂邏輯處理付款、顯示個人化內容、與內部工具整合——Next.js 可能是更好的選擇。
2. 維護此網站的團隊有多懂技術？
如果客戶的行銷協調員會更新網站，Webflow 的視覺編輯器很難被超越。他們可以準確看到他們正在更改的內容。無頭 CMS 也有效，但編輯體驗更抽象——你在編輯欄位，而不是視覺頁面。
3. 預算是多少——誠實地？
一個 Webflow 網站在代理商處可能成本 $10,000-30,000。一個可比的 Next.js 網站可能成本 $25,000-80,000+。這不是因為 Next.js 開發人員貪心——這是因為確實涉及更多工程工作。如果預算緊張，需求簡單，Webflow 能為每美元提供更多價值。
4. 這個網站在將來是否需要在複雜性上進行擴展？
如果你今天構建一個行銷網站，但知道你會在 12 個月內需要用戶帳戶、客戶入口或複雜整合，請從 Next.js 開始。從 Webflow 重建到 Next.js 意味著重新開始。一開始就以正確的方式構建它更便宜。
5. 頁面速度和核心 Web 指標有多重要？
兩者都可以生成快速網站。但 Next.js 給你更多控制。你可以使用 next/image 優化圖像、實現基於路由的代碼分割、使用 React Server Components 減少客戶端 JavaScript。對於頁面速度改進直接影響收入的網站（電子商務、SaaS 註冊流程），這種控制很重要。
6. 這是單個網站還是更大生態系統的一部分？
如果你要構建一個行銷網站，Webflow 很好。如果你要構建一個與 Web 應用程式、文件網站和客戶入口共享設計系統的行銷網站，Next.js（或 Astro 用於靜態部分）更合理。跨多個屬性的共享組件庫是代碼擅長的事。
7. 你的團隊已經知道什麼？
這個很實用。如果你的代理商有三個 Webflow 專家和零個 React 開發人員，下一個項目的答案是顯而易見的（即使 Next.js 在理論上可能更好）。發揮你的優勢。隨著時間的推移，為差距招聘。
成本分析：真實數字
讓我們具體一點。以下是 2025-2026 年通過各自的技術棧構建一個典型的 15 頁行銷網站（包括部落格、CMS 和聯絡表單）的成本：
Figma 到 Webflow
| 項目 | 成本 |
|---|---|
| 設計（Figma） | $5,000-12,000 |
| Webflow 開發 | $6,000-18,000 |
| Webflow CMS 託管（年度） | $468-1,668/年 |
| 域名 | $12-50/年 |
| 第三方整合（表單、分析） | $0-100/月 |
| 第一年總計 | $11,500-32,000 |
| 年度進行中 | $500-2,900 |
Figma 到 Next.js
| 項目 | 成本 |
|---|---|
| 設計（Figma） | $5,000-12,000 |
| Next.js 開發 | $15,000-45,000 |
| 無頭 CMS（Sanity、Contentful） | $0-300/月 |
| Vercel 託管（Pro） | $240/年 |
| 域名 | $12-50/年 |
| 第一年總計 | $20,500-62,000 |
| 年度進行中 | $250-3,900 |
開發成本差異是真實的。但看看進行中的成本——它們實際上可以相當，尤其是如果你使用 Sanity 的免費層或類似的慷慨計劃。問題是更高的前期投資是否由你項目的需求來證明。
為了參考，我們的 定價頁面 詳細說明了我們如何方式兩種技術棧的項目範圍。
混合方法
這是大多數文章不會告訴你的：你不總是必須選擇一個。
我們構建了項目，行銷網站在 Webflow 上運行（因為行銷團隊需要快速推出落地頁而無需開發人員參與），而產品/應用程式在 Next.js 上運行。兩者在 Figma 中共享設計系統並相互連結。沒有人注意到他們在不同的平台上。
這在 2025-2026 年越來越普遍：
- Webflow 用於行銷 -- 落地頁、部落格、關於頁面、職業頁面。行銷團隊擁有它。
- Next.js 用於產品 -- 儀表板、應用程式、客戶入口、任何具有身份驗證或自訂邏輯的東西。工程團隊擁有它。
- 共享 Figma 設計系統 -- 兩個團隊都從相同的真實來源工作。
關鍵是使域之間的交接感覺無形。一致的導航、從相同 CDN 加載的共享字體和顏色、匹配的交互模式。用戶不應該能夠看出他們跨越平台邊界。
我們在我們的 無頭 CMS 開發 功能頁面上詳細介紹了這種方法——無頭架構自然支持這種分割。
我們看到代理商常見的錯誤
錯誤 1：因為「更專業」而為宣傳網站選擇 Next.js
我看過代理商花費 $60K 用 Next.js 構建一個 10 頁公司網站，而 Webflow 本來會成本 $15K，並在一半的時間內推出。客戶不需要伺服器端渲染。他們不需要自訂 API 路由。他們需要一個快速、漂亮的網站，他們可以自己更新。不要過度設計。
錯誤 2：為一個明顯會超越它的網站選擇 Webflow
相反的錯誤。一家初創公司在 Webflow 上構建他們的行銷網站，然後 8 個月後需要添加客戶入口、與他們產品的 API 整合，並支持 12 種語言。現在他們支付完整重建的費用。如果路線圖清楚地指向複雜性，提前投資正確的基礎。
錯誤 3：忽視內容團隊的工作流程
最好的架構在世界上都不重要，如果每天更新網站的人討厭使用它。在選擇平台前與內容編輯進行交談。看看他們的工作。了解他們的技術舒適度。能夠在視覺上重新排列頁面部分的 Webflow 編輯可能比同一個人盯著 Contentful 欄位編輯器更有生產力。
錯誤 4：低估 Webflow 的學習曲線
Webflow 對於初學者並不是拖放。它是一個專業工具，需要理解 CSS 盒模型、flexbox、grid 和響應式設計原理。一個從未接觸過 CSS 的設計師在 Webflow 中數週內都不會有生產力。將培訓時間考慮到你的決策中。
錯誤 5：不考慮 CMS 遷移
如果你在 Webflow 上構建，稍後移動到 Next.js，遷移 CMS 內容很痛苦。Webflow 的 CMS 出口有限。計劃好這一點。如果甚至有 30% 的可能性你會遷移，考慮從第一天開始使用無頭 CMS——即使你通過其 API 或 Webflow 到無頭橋接器為前端使用 Webflow。
如果你陷入為特定項目評估哪種方法有意義的境地，這正是我們在 初始諮詢 中進行的對話類型。沒有推銷——只是誠實的評估。
常見問題
Webflow 能處理電子商務和 Next.js 配合 Shopify 一樣好嗎？
如果我們老實說，一點都不行。Webflow 電子商務適合簡單商店——少於 500 個 SKU、簡單結帳、基本庫存。但如果你需要自訂結帳流程、訂閱計費、動態定價或與 ERP 整合，你會想要 Next.js 配合 Shopify 的 Storefront API 或 Saleor 等平台。Webflow 電子商務還收取交易費用（Basic 計劃上為 2%），大規模時會快速累積。
Figma Sites 是 Webflow 和 Next.js 的可行替代品嗎？
到 2026 年初，Figma Sites 對於單頁面、事件頁面和你需要快速上線的快速原型很棒。但它沒有 CMS、SEO 控制最少，缺乏 Webflow 或 Next.js 中任何一種用於生產網站的深度。把它看作設計師的便利功能，而不是生產平台。它會隨著時間推移而改進，但對於認真的代理商工作還沒準備好。
將 Webflow 網站遷移到 Next.js 需要多長時間？
計劃原始構建時間的 60-100%。沒有自動化遷移路徑。你本質上是在將內容從 Webflow 的 CMS 遷移到無頭替代品的同時在 React 中重建前端。對於典型的 15-20 頁網站（有部落格），預期 4-8 週的開發工作。設計保持不變（因為它在 Figma 中），但每個佈局、交互和 CMS 連接都需要在代碼中重新創建。
哪個對 SEO 更好：Webflow 還是 Next.js？
兩者都能產生優秀的 SEO 結果。Webflow 為你提供元標籤、自動生成的網站地圖、清潔的語義 HTML 和內置 301 重定向。Next.js 為你提供所有這些，加上結構化資料的完全控制、動態網站地圖、內容豐富頁面的伺服器端渲染，以及精細的標題管理。對於大多數行銷網站，Webflow 的 SEO 工具已經足夠。對於具有數千個動態生成頁面的程式化 SEO，Next.js 有優勢。
一個懂 Webflow 的設計師能學習 Next.js 嗎？
這是一個重大飛躍。Webflow 需要理解 CSS 概念但不編寫代碼。Next.js 需要 JavaScript、React 和對伺服器/客戶端渲染的理解。大多數 Webflow 設計師需要 3-6 個月的集中學習才能在 Next.js 中變得有生產力。一個更實用的路徑：配對一個 Webflow-懂行的設計師和一個 Next.js 開發人員。設計師留在 Figma，開發人員處理實現。
哪個無頭 CMS 最適合 Next.js 用於代理商項目？
Sanity 和 Contentful 是 2025-2026 年最受歡迎的選擇。Sanity 提供慷慨的免費層（最多 3 個用戶、500K API 請求/月）、編輯界面的不可思議的自訂，以及實時協作。Contentful 更結構化且針對企業就緒，但成本快速上升（Team 計劃起價 $300/月）。Storyblok 也值得考慮——它的視覺編輯器在無頭架構中為客戶提供了更多 Webflow 類編輯體驗。我們根據項目與三者都合作——更多信息在我們的 無頭 CMS 開發頁面 上。
對於管理多個客戶網站的代理商來說，Webflow 太昂貴了嗎？
可以。Webflow 的按網站定價意味著成本線性擴展。CMS 計劃是 $23/月每個網站，Business 計劃是 $39/月。如果你管理 50 個客戶網站，那只是託管就是 $1,150-1,950/月——還沒算工作區費用。相比之下，Vercel Pro 計劃（$20/月每個團隊成員）上的 Next.js 網站可以託管數十個網站，CMS 成本被共享或分別傳給客戶。在 10+ 個網站時，數學開始偏向自託管或無頭方法。
何時應該使用 Astro 而不是 Webflow 或 Next.js？
好問題。Astro 非常適合不需要太多客戶端交互的內容豐富網站——文件網站、部落格、行銷網站，其中性能是首要優先事項。Astro 默認發送零 JavaScript 並生成難以置信的快速靜態網站。如果你不需要 React 的交互性或 Webflow 的視覺編輯，Astro 配合無頭 CMS 可能是兩者最好的：開發人員控制、快速性能和比完整 Next.js 設置更低的複雜性。