Figma RWD 入門：為何要在 Figma 中做響應式設計？
Figma 已成為當今 UI 設計協作的主流平臺，而在其工作流程中直接實踐響應式網頁設計（RWD），能讓設計準確度與團隊效率同步提升。響應式設計的核心目標，是確保同一個網頁能在手機、平板到桌面電腦等不同尺寸的裝置上，提供最佳的瀏覽體驗。傳統設計流程中，設計師可能只針對單一固定寬度繪製畫面，再由開發人員憑藉經驗轉譯為不同斷點的版本，這中間容易產生理解落差與重工。在 Figma 中直接進行 RWD 設計，意味著設計師從一開始就能在可互動的畫面上，即時模擬與驗證版面在不同容器尺寸下的變化。這不僅讓視覺稿更貼近最終產物，也讓工程師在接收設計稿時，能清楚理解每個物件在響應式環境下的預期行為，大幅降低溝通成本。
Figma 提供的 Constraints（約束）與 Auto Layout（自動版面）等內建功能，正是為此工作流而生。它們讓設計師能以視覺化、可操作的方式定義版面規則，而非靜態地描繪每一個像素。這種「規則導向」的設計思維，正好對應前端開發中 Flexbox 或 CSS Grid 的彈性佈局概念，能有效銜接設計與工程。
若想更全面瞭解 UI/UX 設計的基礎，可以先閱讀 UI/UX 設計完整入門指南，建立整體設計流程的認知。
Figma RWD 的核心概念：理解響應式行為
在 Figma 的語境下，「響應式行為」指的是當你改變一個 Frame（例如手機尺寸的畫框）的寬度或高度時，Frame 內的物件如何自動調整其位置、尺寸或排列方式來適應新的空間。理解這個行為是實作 RWD 的基礎。在 Figma 中，控制此行為的主要依賴兩大核心功能：Constraints 與 Auto Layout。兩者在思維上有本質區別：Constraints 主要針對「單一物件」，定義它相對於父級 Frame 的邊緣或尺寸如何反應；Auto Layout 則專注於管理「物件羣組」，能自動控制羣組內元素的排列方向、彼此間距以及與容器的對齊方式，適合處理需要動態重排的響應式容器。
掌握這兩者的搭配使用，就掌握了在 Figma 中實作 RWD 的主要邏輯。簡單來說，Constraints 解決了物件「釘在哪裡」或「怎麼縮放」的問題，而 Auto Layout 解決了物件「如何自動排列」與「間距如何保持」的問題。
用 Constraints 控制單一物件的響應式行為
Constraints（約束）功能允許你為 Frame 內的單一物件或羣組設定在父級 Frame 尺寸改變時的行為規則。要設定 Constraints，首先選取目標物件，然後在右側邊欄的「約束」區塊中進行設定。你可以分別控制物件的「水平」與「垂直」約束。
常見的約束設定包括：「左側」、「右側」或「左右」會讓物件固定在 Frame 的某邊緣，例如導覽列通常設定為「頂端」與「左右」約束，確保它始終貼齊頁面頂部並橫向充滿寬度。選擇「縮放」則會讓物件隨 Frame 等比例縮放，適合背景圖或需要保持比例的視覺元素。「中心」約束會讓物件始終維持在 Frame 的中央。選擇「左側與右側」或「頂端與底部」的組合，則能讓物件在兩個邊緣間拉伸，常用於分隔線或內容區塊的背景。
例如，一個固定在頁面右下角的「回到頂端」按鈕，可以將其約束設為「右側」與「底部」，並保持與邊緣的固定距離。這樣無論頁面內容高度如何變化，按鈕永遠在那個位置。 Constraints 適合處理大多數位置相對固定的 UI 元素，如導覽列、浮動操作按鈕、頁首與頁尾。
用 Auto Layout 打造彈性的響應式容器
Auto Layout（自動版面）是打造真正彈性、可重排響應式介面的關鍵。它能將一組物件轉化為一個智能容器，容器內的物件會根據設定的規則自動排列。要套用 Auto Layout，可以選取多個物件或一個 Frame，在右側邊欄點擊「+ Auto Layout」加入。
加入後，你可以設定幾個關鍵參數：「方向」決定子物件是水平排列還是垂直排列；「間距」控制子物件之間固定的空白距離；「內邊距」設定容器內邊緣與子物件之間的空間；「對齊」則決定子物件在容器空間內的對齊位置（如置中、靠左）。這些設定共同定義了容器的彈性規則。
Auto Layout 的威力在於處理動態內容。例如，一個導覽選單項目，當項目數量增加時，它會自動水平排列並保持間距；一個文章卡片列表，從單欄變為雙欄時，卡片會自動換行並維持垂直間距。它也非常適合製作按鈕羣、標籤頁或任何會增減內容的 UI 元件。透過 Auto Layout，你可以確保間距始終一致，並且當 Frame 寬度不足以容納所有物件時，物件會依據你設定的方向自動換行，完美模擬真實的響應式佈局。
從設計稿到前端：無縫的響應式交付流程
設計師完成 Figma 中的 RWD 設計後，清晰、有條理的交付是確保設計意圖準確實現的最後關鍵。交付時，除了常規的設計檔案，一份專門的響應式說明文件至關重要。這份文件可以是你在 Figma 文件中特別規劃的畫板，用來繪製不同主要斷點（如手機、平板、桌面）下的版面草圖，並註記關鍵的佈局變化規則，例如「在此斷點下，側邊欄會隱藏」或「產品卡片改為垂直堆疊」。
在設計稿本身，你必須明確標註所有可能影響開發的細節：間距值、字級、色彩，以及互動狀態（如按鈕的 hover、active 狀態）。利用 Figma 的 Dev Mode，開發人員可以精確檢查每個物件的尺寸、約束設定與 Auto Layout 屬性。關於度量單位，除了常用的像素（px），可以與前端團隊討論使用 REM 或 EM 等相對單位的可行性，這有助於實現更靈活的根字級響應式調整。確保交付內容能回答工程師關於「不同螢幕下這個元素會如何表現」的所有疑問。
前期準備：將設計系統融入 RWD 工作流
在開始具體的響應式版面繪製前，將設計系統思維融入 RWD 工作流，能大幅提升效率與最終成品的一致性。首先，建立並統一 Design Tokens（設計代幣）是基礎。這包括定義所有顏色、字級、間距、圓角等視覺數值的變數。當這些數值被系統化管理後，在響應式設計中調整間距或字級時，只需修改對應的 Token 即可全局生效，無需逐一手動修改。
其次，你的元件庫應採用語意化的命名規則。例如，按鈕元件應命名為 `btn-primary` 而非 `blue-button-40px`。語意化命名（可參考 UI 設計系統建立指南）能讓元件的功能與用途一目瞭然，在響應式調整時，你能清楚知道正在修改的是哪個功能模組，並確保在不同斷點下使用的元件語義一致。將這些系統化的元件應用於響應式設計，能確保品牌體驗在不同裝置上高度統一，同時在需要批量調整時，提供強大的修改基礎。
什麼是 Figma RWD？
Figma RWD 是指使用 Figma 這款介面設計軟體來實踐響應式網頁設計（RWD）。核心在於利用 Figma 的 Constraints（約束）與 Auto Layout（自動版面）等功能，讓設計稿能模擬並適應不同裝置螢幕尺寸下的版面變化，以利於前端開發實作。
在 Figma 做 RWD，Constraints 和 Auto Layout 有什麼不同？
Constraints 主要控制單一物件在 Frame 內的位置與縮放行為（例如：固定在頂部、隨容器拉伸）。Auto Layout 則用於管理物件羣組，能自動控制元素間的間距、排列方向與對齊，適合製作彈性列表、卡片流等需要重排的響應式容器。
設計師在開始 Figma RWD 設計前，有哪些前期準備工作？
建議先建立或確認設計系統，包括統一的 Design Tokens（設計代幣，如顏色、字級、間距）與語意化命名的元件庫。這能確保在調整不同響應式畫面時，維持品牌一致性，並大幅提升後續修改與交付效率。
如何將 Figma 的 RWD 設計稿交付給前端工程師？
除了提供常規的設計檔案，建議一併準備響應式說明文件（例如：繪製不同斷點的草圖）。在設計稿中明確標註間距、字級、互動狀態，並善用 Figma 的 Dev Mode 檢視數值。可討論使用 REM/EM 等相對單位的可能性。
除了手動設定，有沒有更快速的方法在 Figma 中建立不同裝置尺寸？
是的，可以考慮使用社羣推薦的第三方外掛（如 Breakpoints），這類工具能幫助你快速建立並切換常用的響應式斷點畫面（例如：手機、平板、桌面），簡化重複繪製多個 Frame 的流程。
在 Figma 中設定響應式設計時，常見的錯誤有哪些？
常見錯誤包括：未正確設定 Constraints 導致物件位置跑掉；過度依賴固定尺寸（px）而非彈性設定；忘記使用 Auto Layout 使得間距無法自動調整；以及未考慮最小寬度（min-width）可能造成的內容溢位問題。
Figma 中的響應式設計設定，可以直接對應到前端 CSS 嗎？
Figma 的 Constraints 和 Auto Layout 概念與前端的 CSS Flexbox / Grid 有相似之處，但並非一對一的直接轉換。它們的主要目的是幫助設計師在視覺上模擬響應式行為，最終仍需與前端工程師溝通，將設計意圖轉化為適合的代碼實現方式。