Figma Sites 教學：設計稿直接變網站，零程式碼上線完整指南

身為一個每天跟 Figma 打交道的 UI 設計師，當我第一次聽到 Figma Sites 這個功能的時候，內心只有一個想法：「終於！」。設計稿直接變網站，不用再跟工程師來回溝通切版細節，這不就是我們夢寐以求的事嗎？

今天這篇 Figma Sites 教學，我會用最白話的方式，帶你從零開始把設計稿直接變成一個真正可以上線的網站。不管你是剛接觸 Figma 的新手，還是想提升效率的資深設計師，這篇都值得收藏。

Figma Sites 是什麼

簡單來說，Figma Sites 就是 Figma 官方推出的網站發布功能，讓你可以把 Figma 裡面的設計稿，直接一鍵發布成真正的網站。不需要寫任何一行程式碼，也不需要匯出設計檔案再去其他平台重新建置。

這跟以前用 Figma 做 prototype 完全不一樣。Prototype 只是模擬互動流程給客戶看的，而 Figma Sites 產出的是真正的網頁，有獨立網址、可以被 Google 搜尋到、載入速度也經過優化。

為什麼說它是 game changer？因為它打破了設計跟開發之間的那道牆。以前的工作流程是：設計師出圖 → 標注 → 工程師切版 → 來回修改。現在你可以跳過中間所有步驟，設計完就直接上線，省下的時間跟溝通成本非常可觀。

設計稿前置準備

在按下發布按鈕之前，你的設計稿需要做一些準備工作，不然上線之後可能會跟你預期的差很多。

第一步：整理圖層結構。Figma Sites 會根據你的圖層結構來產生 HTML 語意標籤，所以圖層命名要有意義。不要再用「Rectangle 47」這種預設名稱了，改成「hero-section」、「nav-bar」這類有語意的名稱。

第二步：善用 Auto Layout。這是最關鍵的一步。Figma Sites 高度依賴 Figma Auto Layout 完整教學 裡提到的彈性佈局邏輯來產生 CSS。如果你的設計都是用絕對定位在擺元素，上線後排版會亂掉。花點時間把所有元件都用 Auto Layout 重新整理，是值得的投資。

第三步：設定正確的文字樣式。確保你的標題用了正確的層級（H1、H2、H3），段落文字也有統一的行高跟字距設定。這些都會直接影響到網站的 SEO 表現跟可讀性。

從設計到上線完整流程

準備工作做完，接下來就是見證奇蹟的時刻了。整個流程其實簡單到不行：

1. 選取要發布的 Frame：在你的 Figma 檔案中，選取你想發布為網頁的 Frame。每個 Frame 會對應到一個頁面。
2. 開啟 Sites 面板：在右側面板找到「Sites」分頁，點擊「Create site」。
3. 設定網站資訊：填入網站名稱、自訂網域（可選）、favicon 等基本資訊。
4. 頁面對應設定：設定每個 Frame 對應的 URL 路徑。例如首頁設為「/」，關於頁面設為「/about」。
5. 檢查預覽：點擊預覽按鈕，在瀏覽器中確認實際呈現效果。這一步很重要，有些元素的呈現可能跟設計稿有細微差異。
6. 發布上線：確認沒問題後，點擊「Publish」。Figma 會幫你產生一個 .figma.site 的網址，網站就正式上線了。

整個過程不到五分鐘，第一次用的時候我真的有被震撼到。

響應式設計設定

光是發布桌面版還不夠，現在超過一半的流量來自手機。Figma Sites 的響應式設計功能讓你可以針對不同裝置尺寸做最佳化。

做法是在同一個 Figma 檔案裡，建立不同斷點的設計版本。通常會做三個版本：Desktop（1440px）、Tablet（768px）、Mobile（375px）。在 Sites 面板中，你可以把這些 Frame 綁定在同一個頁面下，Figma 會自動根據瀏覽器寬度切換對應版本。

這邊有個小技巧：善用 Auto Layout 的「Fill container」跟「Hug contents」屬性。這樣即使在斷點之間的灰色地帶，你的版面也不會崩壞。我自己的習慣是先做好桌面版，再用 Auto Layout 的特性逐步調整到平板跟手機版。

CMS 與動態內容管理

如果你要做的是有持續更新內容的網站（像是部落格或作品集），Figma Sites 的 CMS 功能就非常實用。

你可以在 Figma 裡定義內容模型（Content Model），設定欄位類型像是文字、圖片、Rich Text 等。然後在設計稿中把元件跟 CMS 欄位綁定。之後每次要更新內容，只需要在 CMS 面板裡編輯文字或換圖片，不用動到設計稿本身。

對於需要快速產出 landing page 的團隊來說，這個功能特別好用。行銷同事可以自己更新文案，設計師不用一直被打擾。這也讓我想到 UX 設計師學 AI 薪水翻倍 這篇文章提到的觀點——設計師越能擴展自己的技能範圍，市場價值就越高。

限制與適用場景

講了這麼多優點，也必須誠實地說，Figma Sites 不是萬能的。以下這些情況你還是需要寫程式：

• 複雜的互動邏輯：表單驗證、購物車、會員登入這些功能，目前 Figma Sites 還沒辦法處理。
• 大型應用程式：如果你要做的是像 SaaS 產品那樣複雜的 web app，Figma Sites 的能力不夠。
• 高度客製化動畫：雖然基本的 hover 效果跟頁面轉場可以做到，但複雜的 scroll-triggered 動畫還是需要 JavaScript。
• 效能敏感的專案：Figma Sites 產出的程式碼不一定是最精簡的，對於效能要求極高的專案可能不太適合。

最適合用 Figma Sites 的場景是：品牌官網、作品集網站、活動 landing page、產品介紹頁。這些通常以展示為主、互動需求相對單純的網站。

Figma Sites vs Webflow vs Framer

最後來比較一下大家最關心的：跟 Webflow 和 Framer 比起來，Figma Sites 到底有什麼差別？

vs Webflow：Webflow 的自由度跟功能性還是比較強，尤其在 CMS 跟電商功能上。但 Webflow 的學習曲線也相對陡峭，而且你等於要在另一個工具裡重新建置設計。Figma Sites 的優勢就是零學習成本——你本來就在用 Figma 設計，現在只是多按一個按鈕。

vs Framer：Framer 跟 Figma Sites 的定位比較接近，都強調設計到上線的無縫銜接。Framer 目前在動畫效果跟互動元件上比較成熟，但 Figma Sites 的優勢在於它完全整合在 Figma 生態系裡面，不需要在不同工具之間切換。

我的建議是：如果你的專案是偏靜態展示型的網站，而且團隊本來就重度使用 Figma，那 Figma Sites 是最佳選擇。如果你需要更複雜的互動或電商功能，Webflow 可能更適合。

總結來說，Figma Sites 設計稿直接變網站這件事已經不再是遙不可及的夢想。它降低了設計師跨入網站開發領域的門檻，也讓整個設計到上線的流程變得前所未有的順暢。如果你還沒試過，現在就打開 Figma 玩玩看吧。