用 Figma、Canva 做網頁行不行：設計稿到上線的落差

Figma 設計稿交完，網站就能上線嗎？Figma網頁設計可以用來畫設計稿，這是業界標準流程，但稿子不能直接當成上線網站。Canva做網頁能發布，功能邊界卻更窄。下面把設計、切版和發布分開，幫你判斷工具能做到哪一步。

Figma 的位置：設計稿的產業標準

Figma 用來討論和交接設計：雲端協作、組件複用、共享設計系統、標註開發需求。它像藍圖桌，能畫房子，不能代替施工。設計師交稿後，工程師還要切版，處理 HTML、CSS、響應式斷點和瀏覽器相容。這一步才把稿子變成網頁，也占了不少費用，不能在報價時漏掉。

設計稿到上線的四個落差

第一個落差是字體授權。設計稿裡用的字，螢幕預覽合法，做成網頁讓全世界載入是另一種授權，很多標題字體的網頁授權費比設計費還高——這筆錢不會出現在畫稿的報價裡。第二個落差是響應式。設計稿通常只有桌面版，交出手機版的行為（選單怎麼收合、表格怎麼變卡片）沒人定義，工程只能自由發揮。第三個落差是效能：設計稿沒有「檔案大小」的概念，我們接手過一個站，產品頁模板放了一張 15MB 的首圖，幾百個產品頁的體驗指標全部不及格——設計稿很美，網頁很重，這兩件事會同時成立。體驗有官方門檻可對（LCP ≤2.5s、INP ≤200ms、CLS ≤0.1，web.dev Core Web Vitals），驗收時直接量。第四個落差是動效：稿子上漂亮的滾動動畫，落到網頁上每一個都是開發時間，動效越多，切版越貴。

所以看 Figma 稿報價時，四個問題先問完：字體授權誰買、手機版誰定義、圖片誰壓縮、動效做幾組。四個都有答案，報價才完整。

Canva 做網頁：能，但拿的是什麼

canva網頁設計的賣點是真實的：拖拉就成頁、內建視覺素材、一鍵發布，做一張活動頁或個人履歷頁，一個下午就能上線。代價也講清楚：發布出來的站掛在 Canva 的體系裡，網域要照它的規則，功能只有它給的清單，你做的每個頁面都長在別人的地皮上。想把 Canva 站搬到自己的主機？沒有標準的匯出，內容搬得走、版面帶不走，遷移幾乎等於重做。做決定前問自己一個問題：這些頁面三年後還要在嗎？要，地皮就該是自己的。

判斷就一條：這個頁面是「用完即丟」還是「要長大」。三個月的活動頁、一次性的徵才頁，Canva 又快又便宜，用。要累積搜尋流量、接詢價表單、三年後還在長內容的公司門面，用地皮是自己的方案——WordPress 自架的取捨在WordPress 網頁設計指南裡有完整分析。順帶一句常見誤解：Google 判斷網站面向哪個市場，主要看網域、hreflang 與內容本身，伺服器位置只是弱訊號（Google 官方說明）——用什麼工具做，跟做給誰看，是兩件事。

網站設計模板的正確用法

模板被罵得很多，但用錯方向才是問題。網站設計模板縮短的是「從零到八十」：版面結構、間距系統、常用區塊，這些公約數不用重造。真正決定成敗的是剩下那二十：品牌色與字級換了沒、內容結構照業務重排了沒、多餘的示範區塊刪了沒。模板加二十的客製，多數標準官網的最優解；直接上線零修改，你的站就跟成千上萬個站撞臉。這條路的完整對比（模板、客製化、手寫）在客製化 vs 模板；真走 WordPress 模板路線，Elementor Pro 的實測判斷值得先看。另外提醒一句：模板的風格要守得住，靠的是事先定死的排版與 UI 規範，不是每次東貼一段樣式。

三種場景，三個答案

整理成判斷表。你是設計師，要跟客戶討論網頁視覺：用 Figma，走稿到切版的完整流程，四個落差的錢先談。你是活動主辦或個人，要一張快上線的單頁：Canva 當天可成，內容備份在自己手裡隨時能棄。你是公司，要做長期累積的門面：跳過這兩個工具的發布功能，直接把站放在自己的網域與主機上——工具可以換，地皮不能是別人的。

延伸閱讀

• 上一篇：網頁風格、排版與 UI 設計：從作品欣賞到能落地的規範
• 服務與價格
• 外貿獨立站
• 聯絡我們