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 表現跟可讀性。
從設計到上線完整流程
準備工作做完,接下來就是見證奇蹟的時刻了。整個流程其實簡單到不行:
- 選取要發布的 Frame:在你的 Figma 檔案中,選取你想發布為網頁的 Frame。每個 Frame 會對應到一個頁面。
- 開啟 Sites 面板:在右側面板找到「Sites」分頁,點擊「Create site」。
- 設定網站資訊:填入網站名稱、自訂網域(可選)、favicon 等基本資訊。
- 頁面對應設定:設定每個 Frame 對應的 URL 路徑。例如首頁設為「/」,關於頁面設為「/about」。
- 檢查預覽:點擊預覽按鈕,在瀏覽器中確認實際呈現效果。這一步很重要,有些元素的呈現可能跟設計稿有細微差異。
- 發布上線:確認沒問題後,點擊「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 玩玩看吧。
繼續閱讀
Figma Auto Layout 自動佈局完整教學:2026 年必學的排版神器
相關文章
你可能也喜歡
探索其他領域的精選好文