Figma Sites — 設計稿一鍵變網站的發佈流程

由 FeiYueh 親自審稿驗證 · 最後更新於 2026-11-05

Figma Sites 把網站上線的過程壓成三個動作：在同一個 Figma 檔案裡設計響應式版面、預覽、按下 Publish。設計稿不必再交給工程師重寫成 HTML，發佈品質取決於設計稿結構：Auto Layout、斷點和元件用得越規範，上線的網站在手機版跑版、載入速度和後續維護上的問題就越少。 Figma Sites

Figma Sites 把網站上線的過程壓成三個動作：在同一個 Figma 檔案裡設計響應式版面、預覽、按下 Publish。設計稿不必再交給工程師重寫成 HTML，發佈品質取決於設計稿結構：Auto Layout、斷點和元件用得越規範，上線的網站在手機版跑版、載入速度和後續維護上的問題就越少。 Figma Sites 是什麼：設計檔直接成為線上網站 Figma Sites 是 Figma 的網站建置與託管功能，在 Config 2025 發表。它讓設計檔直接成為可以公開瀏覽的網站。傳統流程是「Figma 出稿 → 標註交付 → 前端切版 → 部署」，Sites 把中間兩步交給 Figma 處理，設計者在畫布上調整的版面、文字和互動，發佈後就是訪客看到的樣子。 這項功能的背景是 Figma 使用者組成的改變。根據公開上市文件， 「Figma 每月活躍使用者超過 1,300 萬人，其中約三分之二不是設計師」（來源：Wikipedia 引用 Figma S-1 文件） 。行銷人員、產品經理、創業者也在 Figma 裡工作，但他們多半不會寫程式，Sites 就是讓這群人也能把頁面發佈出去。 適合用 Figma Sites 的網站有這幾類： 活動落地頁 ：生命週期短、需要快速上線、改動頻繁。 作品集與個人網站 ：重視視覺呈現，幾乎不需要後端邏輯。 產品介紹頁與候補名單頁 ：新創驗證想法時的第一個頁面。 品牌說明頁 ：內容固定，由設計團隊自行維護。 需要會員系統、購物車金流或大量資料庫查詢的網站，就不適合只用 Sites，應該改用完整的開發框架或電商平台。 發佈前的設計準備：結構決定上線品質 在 Figma Sites 裡，圖層結構會直接對應成網頁結構，所以設計檔怎麼組織，發佈出來的網站就會有對應的品質。在一般設計檔裡看不出問題的做法，例如用絕對座標疊圖層、文字框寫死寬度，在網頁上都會變成螢幕寬度一改就跑版。 用 Auto Layout 取代手動排版 Auto Layout 是讓網站能夠響應式縮放的基礎。每個區塊（Hero、功能介紹、價格表、頁尾）都應該是一個 Auto Layout 容器，子元素的寬度設為「Fill container」而不是固定像素。這樣容器寬度從 1440px 縮到 375px 時，內容會自己重排，不必每個斷點都手動調整。 設定斷點並逐一檢查 Figma Sites 以斷點（Breakpoint）管理不同裝置的版面，預設涵蓋桌機、平板、手機三種寬度。實際操作建議先完成桌機版，再切換到手機斷點，只調整需要改變的屬性，例如把橫排改成直排、縮小標題字級、隱藏裝飾圖片。要特別注意手機版： 「行動網站載入超過 3 秒時，53% 的造訪者會離開」（來源：Think with Google） ，手機斷點上的大圖和影片應該優先精簡。 文字樣式與無障礙 用文字樣式（Text Styles）定義標題層級，網頁的語意結構會比較清楚。無障礙在網路上仍然普遍做得不好： 「2025 年檢測的前 100 萬個網站首頁中，94.8% 有可偵測的 WCAG 缺失」（來源：WebAIM Million 報告） 。最常見的問題是文字對比不足和圖片缺少替代文字。發佈前應該用對比檢查工具確認內文與背景的對比度至少 4.5:1，規範細節可參考 W3C 的 WCAG 標準說明 。 一鍵發佈的實際流程 Figma Sites 的發佈流程可以拆成五個步驟，每一步都在 Figma 介面裡完成。 預覽（Preview） ：點擊右上角的預覽按鈕，在瀏覽器環境裡測試捲動效果、懸停互動和頁面連結。拖曳預覽視窗的寬度，可以一次確認各斷點之間的過渡是否自然。 設定頁面資訊 ：替每一頁填寫頁面標題、描述，以及社群分享時顯示的預覽圖。這些欄位會成為 HTML 的 meta 資訊，影響搜尋結果與社群卡片的顯示方式。 按下 Publish ：第一次發佈時，Figma 會把網站放在隨機產生的 figma.site 子網域上，幾秒內就能取得公開網址。 調整子網域或連接自訂網域 ：發佈後可以把隨機子網域改成好記的名稱，或連接自己擁有的網域。 更新與取消發佈 ：修改設計後再按一次 Publish 就會覆蓋線上版本；不再需要的網站可以取消發佈。完整操作說明見 Figma 官方說明：發佈、更新或取消發佈網站 。 要注意的是，每次 Publish 都會即時生效，沒有「草稿環境」和「正式環境」之分。多人協作的團隊應該約定由一個人負責按下發佈，避免有人把改到一半的版本推上線。 自訂網域與方案限制 能不能連接自訂網域，要看 Figma 的訂閱方案。依官方說明文件， 「Professional 方案最多可連接 10 個自訂網域，Organization 與 Enterprise 方案則不限數量」（來源：Fi

由 FeiYueh 親自審稿驗證 · 最後更新於 2026-11-05. Independently maintained — not AI-generated boilerplate.