---
title: "Figma Sites 教學：從設計到網站上線的無縫流程"
slug: figmasites
url: https://rar.design/posts/figmasites
published_at: 2025-05-24
modified_at: 2026-08-29
author: "設計師 Riven"
category: "UI/UX 設計"
tags: ["figma"]
access: public_access
---

# Figma Sites 教學：從設計到網站上線的無縫流程

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2025-05-24

在 2025 年，Figma 推出了全新功能「Figma Sites」，讓設計師能夠直接從 Figma 設計稿一鍵發布為響應式網站，無需撰寫任何程式碼。這項功能對於希望快速上線作品集、活動頁或產品介紹頁的設計師而言，是一項革命性的工具。 為何選擇 Figma Sites？• 無需程式碼：直接在 Figma 中設計並發布網站，省去轉交給前端工程師的步驟。• 即時預覽：所見即所得的編輯器，讓你能即時看到網站在不同裝置上的呈現效果。• 整合設計流程：從設計、原型到發布，全部在 Figma 平台內完成，提高工作效率。 如何開始使用 Figma Sites？1. 建立 Figma 帳號：前往 Figma 官方網站 註冊免費帳號。2. 創建新專案：在 Figma 中點選「New File」，開始你的設計。3. 啟用 Figma Sites：在設計完成後，點選右上角的「Publish」按鈕，選擇「Publish to Figma Sites」。4. 設定網站資訊：填寫網站標題、描述、網址等基本資訊。5. 發布網站：確認無誤後，點選「Publish」，你的網站就上線了！ Figma Sites 的主要功能• 響應式設計：自動適應桌面、平板和手機等不同裝置。• 互動效果：支援滑鼠視差、燈箱、旋轉、可拖曳、打字機等動畫效果。• SEO 設定：可自訂頁面標題、描述、語言標籤等，有助於搜尋引擎優化。• 自訂網域：支援綁定自有網域，提升品牌專業度。 注意事項• CMS 功能：目前尚未支援內容管理系統（CMS），適合靜態網站。• 自訂程式碼：目前僅支援嵌入 iframe，無法直接插入自訂 HTML/CSS/JS。• 多語系網站：目前不支援 hreflang 標籤，需手動建立多個語言版本的網站。 結語Figma Sites 為設計師提供了一個快速、簡單的網站發布解決方案，特別適合需要快速上線的專案。雖然目前功能尚未完善，但對於小型網站而言，已足夠應付大部分需求。隨著未來功能的持續更新，Figma Sites 有望成為設計師不可或缺的工具之一。