Figma 響應式設計教學：外掛輔助一鍵搞定行動版排版

Figma 響應式設計 RWD 斷點設定完整教學：從結構到外掛的實戰流程

Figma 做響應式設計的成敗取決於你先把「斷點策略＋元件的可縮放結構」定下來，再讓 Breakpoints 這類外掛把重複的裝置切換自動化。業界最常用的標準斷點是手機 ≤767px、平板 768~1023px、桌機 ≥1024px，這組數值源自 Bootstrap 預設的 grid 斷點（md 768、lg 992/1024、xl 1200），設計稿套用同一組數值就能直接對接開發端的 media query [來源：〈Bootstrap — Grid options〉〈https://getbootstrap.com/docs/5.3/layout/grid/〉〈2026〉]。順序顛倒、先裝外掛才修結構的人，只會得到一堆互相對不上的 Frame。

重點先看：響應式成敗 80% 取決於元件結構（Constraints 與 Auto Layout），20% 才是外掛選擇。標準斷點手機 ≤767px、平板 768~1023px、桌機 ≥1024px，與 Bootstrap 預設 grid 斷點一致，方便設計稿直接對接開發的 media query。先從 375px 手機版做起，再放大到桌機，方向才不會反。

Figma 響應式設計是什麼：先把斷點與結構分清楚

響應式設計（RWD）是指同一份介面能隨裝置寬度自動重排，讓一份稿件涵蓋多種裝置，避免每個裝置各做一份獨立稿。在 Figma 裡這件事靠的是「為不同斷點建立對應的 Frame、用 Constraints 與 Auto Layout 讓元件具備可縮放結構」，再透過 響應式網頁設計 RWD 基礎觀念 背後的同一套邏輯去檢視，完全用不到 CSS。Figma 本質上只是設計工具、不是瀏覽器，它不會自動把桌機版縮成手機版，每個斷點的版面都要你主動決定。這跟 網頁製作平台與架站工具比較 裡各平台自帶的響應式機制不同，Figma 是設計工具，行為要你自己定義。

很多新手把 Figma RWD 想成「裝個外掛就一鍵搞定」，這是最大的誤解。Breakpoints 外掛省的是切換與檢視的力氣，不是設計判斷。真正決定響應式成敗的，是你在最小頻寬（手機直式）先把版面想清楚、再用流體結構放大到桌機。多數人反過來先畫桌機再硬擠手機，所以怎麼切都破圖。外掛像是擴音器，結構好會讓你省力，結構亂就把亂攤在眼前。這套思維其實跟 AWD 自適應與 RWD 響應式差異 討論的是同一件事：選對方法之前，先把問題邊界畫清楚。

講白了，響應式設計在 Figma 裡有兩條路線可選，理解差異比急著選工具更重要。

• 傳統多 Frame 手動複製：每個斷點各開一個 Frame（375、768、1440），手動調整版面。優點是完全可控、不依賴第三方，缺點是費工且三份稿容易不同步。
• 流體稿路線：用 Figma Variables 的 min/max width 或 Breakpoints 外掛，讓單一 Frame 在區間內自動切換狀態。優點是省力，代價是結構得先設對，否則切換後全錯位。
• 混合路線：關鍵頁面用流體稿展示給客戶，次要頁面用多 Frame 交付，兼顧效率與可控。

這裡要誠實說一句：響應式成敗 80% 取決於元件結構（Constraints 與 Auto Layout），20% 才是外掛選擇。如果你連 Constraints 都沒設好，裝再多外掛也救不回來。這也是為什麼很多人覺得 Figma RWD「很玄」，其實是基礎結構沒打好。先把Figma 中文完整教學入門指南裡的 Frame 與元件觀念弄熟，再進響應式會順很多。過程中難免碰到 網頁設計趨勢與 AI 設計工具 那類版面疑問，對照著看更清楚。

標準斷點數值到底切在哪裡

業界最常用的斷點是手機 ≤767px、平板 768~1023px、桌機 ≥1024px，進階可再切超大桌機 ≥1440px。這組數值與 Bootstrap 預設的 grid 斷點一致（Bootstrap 5 的 md 為 768、lg 為 992、xl 為 1200），目的是讓設計稿能直接對接開發端的媒體查詢 [來源：〈Bootstrap — Grid options〉〈https://getbootstrap.com/docs/5.3/layout/grid/〉〈2026〉]。你用同樣的數字，開發寫 media query 時就不會出現「設計 768、開發 767」這種差 1px 的尷尬。

裝置類型	寬度區間	Figma Frame 建議寬度	對應框架
手機直式	≤767px	375 或 390px	Tailwind sm / Bootstrap xs
平板	768~1023px	768px	Tailwind md / Bootstrap md
桌機	≥1024px	1440px	Tailwind lg / Bootstrap lg
超大桌機	≥1440px	1920px	Tailwind xl / Bootstrap xl

是不是覺得「那就四個斷點全開」最保險？恰恰相反。每多一個斷點，設計與維護成本倍增。中小型專案三個斷點通常夠用，內容密集的後台或電商才值得切到四個。我自己會看專案類型決定：品牌官網三個就夠，RWD 響應式電商網頁設計流程這類商品列表多的才考慮加超大桌機。若是 RWD 響應式網頁實戰排版 講的那種內容站，三個斷點加上流體容器就足以應付。

有個常被忽略的坑：768 這個數字在設計端與開發端可能因 scrollbar 或 box-sizing 而差 1~17px。開發的 media query 寫 min-width: 768px，但瀏覽器實際可視寬度扣掉捲軸後可能是 767px，結果桌機版沒觸發。把斷點數值寫進設計系統文件並與開發對齊，是避免這類錯位的最有效做法。搭配CSS Box Model 邊距與留白觀念一起理解，會更清楚為什麼會差那幾 pixel。

Frame 建議寬度的選擇也有邏輯。375px 對應 iPhone 12/13 mini 系列，390px 對應 iPhone 14/15 標準版，兩者差異不大，選一個當手機基準即可。桌機用 1440 作為基準，原因是 1440 更接近多數筆電的實際可視寬度；選用 1920 反而容易設計出過寬、在一般螢幕上兩側留白過多的版面。這些數值背後都有 網頁版面設計與響應式排版觀念的支撐，不是拍腦袋決定的，搭配 網頁排版設計範例與圖文排列 對照參考會更有感。品牌官網設計與響應式實作 也是用同一組寬度思維。

先手機還是先桌機：Mobile First 的順序為什麼重要

建議從手機直式（約 375px）開始做，再放大到平板與桌機。原因很實際：小螢幕會逼你刪掉裝飾、只留核心內容與層級。這個被迫取捨的過程，會讓後續放大到桌機時的資訊架構更乾淨。反向做的人，多半是在把手機版硬擠出桌機的殘渣，資訊過載、層級混亂。

這不只是設計美感問題，更是搜尋與流量現實。2026 年第一季，行動裝置（不含平板）占了全球網站流量的 52.27%，已經過半 [來源：〈Statista — Share of mobile web traffic worldwide quarterly 2015-2026〉〈https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/〉〈2026-04-28〉]。Google 也在 2023 年 10 月宣布行動優先索引（mobile-first indexing）全面完成，所有能在行動裝置運作的網站，現在都主要由行動爬蟲檢索 [來源：〈Google Search Central Blog — Mobile-first is here〉〈https://developers.google.com/search/blog/2023/10/mobile-first-is-here〉〈2023-10-31〉]。換句話說，搜尋引擎看到的第一眼是你的手機版，手機版做壞了，桌機版再漂亮也救不回排名。從手機起手，是順著這股流量與索引趨勢走的最省力方向。

Mobile First 的重點在於「從最小限制開始設計」的約束思維。Luke Wroblewski 在 2011 年出版的《Mobile First》（A Book Apart）提出這個概念時，核心論點就是：限制會迫使你把優先順序浮現出來。手機版只能放三個主功能，你就得決定哪三個；桌機版能放八個，反而容易什麼都放、什麼都不重要。

反向操作的典型失敗長這樣：桌機做滿三欄Sidebar 加內容加廣告，轉到手機時才發現沒地方放，只好把側欄整個折疊、廣告塞到正文中間，使用者體驗整個崩壞。這種稿子交付給開發，對方也頭痛，因為桌機的資訊架構在手機上根本對應不起來。Landing Page 銷售頁製作教學 那種轉換導向的頁面尤其受不了這種擠壓，主 CTA 一被擠掉轉換率就崩。

• Figma 實作：先開 375px Frame 完成手機版結構，確認主功能、主內容、主 CTA 都能放下且層級清楚。
• 再開 768px 平板版，把手機版的區塊重新排列，利用多出來的橫向空間。
• 最後開 1440px 桌機版，放大間距、增加欄數，但核心資訊架構不變。
• 每個斷點都回頭檢查：手機版的主功能還在嗎？沒有被桌機的多餘裝飾擠掉。

要承認一個例外：後台系統、資料密集儀表板這類桌機導向產品，可以從桌機先做。因為使用者本來就在桌機上操作，手機版只是輔助查看。但即便如此，你還是要設計手機退化版，不能完全不管。與開發對接時也要注意，Mobile First 的 CSS（min-width 往上加）也是從小寫到大，方向一致，CSS 入門與響應式設計語法裡的 media query 寫法才不會打架。若是做 作品集網站設計指南 這類內容導向頁面，更是建議守住手機先做的紀律。

Constraints 與 Auto Layout，響應式能不能動全靠這兩個

為什麼響應式設計在 Figma 裡常常「縮放就破圖」？因為元素沒有設 Constraints 或 Auto Layout。根據 Figma 官方說明文件，Constraints 決定單一元素在 Frame 縮放時要貼左、貼右、置中還是等比，Auto Layout 則讓一群元素自動排列與換行。兩者設好，Frame 拉寬拉窄時內容才會跟著流動，不會被釘死在原座標。

這是最關鍵也最常被跳過的一段。很多人直接跳去裝外掛，結果外掛裝了、切換斷點後全錯位，因為底下結構根本沒設好。Constraints 與 Auto Layout 是響應式的底層條件，外掛只是上層應用，底層不穩，上層再順也撐不久。

拆開來看這兩個機制各自負責什麼。

機制	層級	解決的問題	典型用法
Constraints	單一元素	Frame 縮放時元素要錨定哪裡	設 Left & Right 讓元素隨寬度伸縮；設 Scale 等比縮放
Auto Layout	元件內部	一群元素如何排列、間距、換行	卡片、按鈕、導覽列的彈性容器
Grid	Frame 層級	大區塊的欄位定位	套 12 欄網格定位主要區塊

常見破圖原因很單純：元素全部用預設 Left & Top，Frame 縮放時釘死在原座標。你把 Frame 從 1440 拉到 375，按鈕還停在原本的 x 座標，直接被裁掉或飛出 Frame 外。這不是 Figma 的 bug，是你沒告訴它這個按鈕該怎麼跟著縮。

搭配的順序是：Frame 先套網格定位大區塊，區塊內元素設 Constraints，卡片按鈕內部用 Auto Layout。這三層各司其職，疊起來才是完整的響應式結構。Figma 網格系統與欄位排版講的就是第一層，這裡補上後兩層。Auto Layout 的細節，像是方向、間距、padding、換行，是卡片按鈕導覽列的響應式基礎，等於把Figma 動態按鈕與轉場動畫那類元件的骨架先搭好。視覺上想加 Figma 毛玻璃霧面質感效果 或 Figma 視差效果與沉浸式互動，也都得建立在這層結構穩固的前提上。

再強調一次，外掛能正確運作的前提，就是結構已經用 Constraints 與 Auto Layout 設好。這不是附加題，是必答題。沒這層基礎，後面所有工具都是空轉。把時間優先投在把Figma 完整指南與介面操作裡的這兩個功能練熟，會比反覆比較外掛更有生產力。元件變體管理可以參考 Figma 環形文字與圓弧排版 那類細節操作，把基本功先練扎實。

Breakpoints 外掛的安裝與實戰流程

Breakpoints 是一款 Figma 社群外掛，根據其 Figma Community 上的說明，它能讓你在單一 Frame 上預設多組寬度斷點，拖曳 Frame 寬度時自動切換對應的版面狀態，省去手動複製多個 Frame 與逐一修改的工。安裝路徑是 Figma 的 Plugins 選單，搜尋 Breakpoints 後執行，全程免費、免額外帳號。

先說清楚外掛的邊界：它省的是切換與檢視的力氣，不是設計判斷。很多教學把「一鍵搞定」講成外掛魔法，卻沒說清楚這一點。外掛幫你把「手機切桌機、桌機切平板」的動作自動化，但每個斷點的版面長什麼樣，還是你得自己設計。它不會無中生有，只會照搬你既有的結構，結構對就省事，結構亂就一起亂。

• 安裝：上方選單 Plugins → Find more plugins → 搜尋「Breakpoints」→ Run。或在 Figma Community 網頁搜尋後加入我的外掛清單。
• 核心操作：在目標 Frame 上新增斷點（例如 375、768、1440），為每個斷點調整版面狀態，拖曳 Frame 寬度時外掛會自動切換。
• 適用情境：需頻繁對客戶展示多裝置、或要在同一份稿內管理三種以上斷點時，效率提升最明顯。
• 已知限制：外掛依賴 Figma 開放 API，Figma 重大改版時可能短暫失效。建議同時熟悉內建 Min/Max Width 與 Variables 作為備案，別把整個工作流綁在單一外掛上。

實戰順序很重要，顛倒了就會卡住。正確流程是先完成手機版結構，套好 Constraints 與 Auto Layout，再裝外掛，加入各斷點，最後逐斷點微調。很多人一開始就裝外掛、想邊做邊切斷點，結果手機版都還沒畫完，外掛也沒東西可切。這跟Figma 必裝外掛與效率工具裡強調的原則一樣：外掛是加速器，不是起點。需要素材支援時，Figma 免費圖示外掛推薦、Figma 免費圖庫外掛匯入、Figma 免版權圖片素材外掛 都能加快起稿速度。

要老實講外掛的風險。第三方外掛的穩定性取決於作者維護與 Figma API 變動，我碰過外掛在某次 Figma 更新後失效兩週的情況。如果是急件，這種風險得自己承擔；如果是長期產品開發，建議以內建 Variables 為主、外掛為輔。說到底，Figma AI 功能與設計代理工具與這些外掛一樣，都是工具層，工具會變，結構觀念不會。若想在原型階段就測試 Figma 互動式輪播滑塊設計 或 Figma 載入動畫與 Loading 原型，結構穩定度一樣是前提。

不裝外掛也能做響應式嗎

如果不想依賴外掛，Figma 內建有辦法做響應式設計。Variables（變數）可定義寬度、間距、字級的 min/max 區間，搭配 Min/Max Width 設定，讓 Frame 在一定範圍內流體縮放，根據 Figma 官方說明文件，搭配 Variables 與 Min/Max Width 設定，不用外掛也能做出接近真實瀏覽器的響應行為。這條路線適合追求長期可維護、不依賴第三方的團隊。

Variables 的核心價值是「一處改、處處連動」。把斷點寬度、gutter、padding 設成變數，不同模式切換時整份稿會跟著更新。你改一個 spacing 變數從 16 變 24，所有用到這個變數的元素全部連動，不用逐一修改。這對建立設計系統的人來說是剛需，尤其是SASS SCSS 預處理器加速開發那套變數思維在視覺工具裡的對應。

• Variables：把斷點寬度、gutter、padding、字級設成變數，模式切換時整份稿連動更新。
• Min/Max Width：Frame 可設最小與最大寬度，配合 Constraints 讓內容在區間內流體縮放，不會無限撐開或縮到看不見。
• Dev Mode 整合：Dev Mode 會讀取 Variables 與斷點資訊，交付時直接帶出數值，減少設計與工程落差。
• 模式（Modes）：為不同斷點建立模式，切換模式即可預覽該斷點下的完整樣貌，效果接近外掛但全在內建完成。

流體路線的代價要講清楚。設定門檻比外掛高很多，你得先建立完整的變數系統：顏色、間距、字級、寬度全部變數化，前期投入的時間是外掛路線的好幾倍。好處是穩定、不被外掛綁架，而且變數系統一旦建好，後續每個新專案都能複用。選擇建議很明確：急件展示用，走外掛；長期產品設計系統，走 Variables 加 Min/Max Width。

換個角度想，這兩條路線其實不衝突。很多成熟團隊是兩者並用：日常設計用 Variables 維護結構，展示給客戶時臨時掛上 Breakpoints 外掛做流暢的多裝置預覽。這種組合既保有長期可維護性，又能在提案時拿出漂亮的互動效果，搭配UI 原型設計與 Wireframe 差異裡的原型觀念一起運用。想進一步打磨視覺與配色，網頁配色工具與色彩計畫、色彩學與配色技巧解析、中文字體設計與字型推薦 都能疊加進來。

設計稿交付給開發時要帶什麼

交付時要附三樣東西：各斷點的 Frame（手機、平板、桌機各一份完整稿）、每個關鍵元素的 Constraints 設定、以及一張斷點乘以欄數乘以 gutter 乘以 max-width 的對照表。有這三項，開發端就能把設計的響應行為準確還原成 media query 與 grid-template-columns。

交付項目	內容	用途
各斷點完整 Frame	375、768、1440 三份完整稿	開發對照每個斷點的視覺
關鍵元素 Constraints	主按鈕、圖片、導覽列的錨點設定	開發還原縮放行為
斷點對照表	斷點 × 欄數 × gutter × max-width	直接轉成 grid 與 media query

Dev Mode 會自動顯示 Constraints 與 Variables 數值，這幫了大忙，但仍建議在設計系統文件裡寫死斷點策略。原因是 Dev Mode 顯示的是單一元素的數值，開發要的是整體策略，兩者層級不同。把斷點數值、欄數、gutter 寫成一份能被工程師直接引用的文件，比靠 Dev Mode 逐個元素看更有效率，這也牽動Core Web Vitals 與版面穩定度 CLS這類前端指標能不能顧好。若團隊是用 Elementor 頁面編輯器完整教學、Bricks Builder 視覺化編輯器教學 或 Divi 主題架站與網頁設計 這類視覺化工具落地，文件同步更是必要。

常見落差有幾種，逐一點名。第一種是設計用流體 Stretch、開發寫固定 px，結果小螢幕上內容溢出。第二種是設計的 768 與開發 media query 邊界差 1px，前面提過的 scrollbar 問題。第三種是互動元素沒標觸控最小點擊區，CTA 行動呼籲按鈕設計指南建議觸控區 ≥44px，手機上低於這個數字會很難點。

• 互動元素加註觸控最小點擊區，建議 ≥44px，符合 WCAG 與 Apple HIG 的無障礙建議 [來源：〈Apple Human Interface Guidelines — Buttons〉〈https://developer.apple.com/design/human-interface-guidelines/buttons〉〈2026〉]。
• 手機版的間距與字級要標得更明確，因為開發在手機上的容錯空間比桌機小。
• 圖片要標註是否要響應式裁切，以及不同斷點用的 crop 位置。
• 交付後在實際裝置檢視一輪，Figma 預覽與真實瀏覽器仍有差異，尤其是字體渲染與捲軸寬度。

驗收這一步很多人省掉，結果上線後才發現手機版某個按鈕被裁掉。Figma 的預覽再準，也模擬不了真實瀏覽器的捲軸、字體 fallback、圖片載入延遲。交付後用實機走一輪，是便宜又有效的保險，這跟圖片 SEO 與版面載入優化裡強調的實測精神一致。搭配 圖片壓縮工具與不失真載入、延遲載入與網站效能優化、網站速度優化與版面載入技巧 一起顧，版面與效能才不會互相打架。

斷點策略決策矩陣：你的專案該切幾個斷點

到底該開幾個斷點，沒有標準答案，但有清楚的判斷邏輯。把「裝置多樣性」與「內容複雜度」當成兩個軸，就能把專案分類，決定斷點數量與該不該上流體路線。裝置多樣性指的是使用者實際會用的裝置種類廣不廣，內容複雜度指的是同一頁要塞的資訊密度高不高。把常見的專案類型分到四個象限，各自對應建議的斷點數量與路線，就形成一張二維矩陣。

象限	裝置多樣性 × 內容複雜度	典型專案	建議斷點與路線
低 × 低	單純、裝置集中	活動 Landing Page、登入頁	2 個（手機、桌機），多 Frame 即可
高 × 低	裝置廣、內容單純	品牌官網、部落格	3 個斷點（手機、平板、桌機）
低 × 高	裝置集中、內容密集	後台儀表板、內部工具	2 個，以桌機為主加手機退化版
高 × 高	裝置廣、內容密集	電商商品列表、大型內容站	4 個斷點加流體 Variables 路線

矩陣只是起點，還有兩個變數會把結論往某邊推。第一個是維護人力：只有一個設計師的小團隊，即使落在高 × 高象限，也可能先壓回 3 個斷點求生存，之後再補流體路線。第二個是交付方式：若交付對象是會自己調整 grid 的資深前端，設計端可以寬鬆一點只給關鍵斷點；若交付對象是照稿刻的工程師，斷點就要開得細，每個都附完整稿。把這兩個變數疊到矩陣上，結論才會貼合你的實際處境。

• 品牌官網：3 個斷點（手機、平板、桌機），重點頁面加流體 min/max width。
• 電商商品列表：4 個斷點（含超大桌機），商品卡片內部用 Auto Layout Wrap，欄數隨斷點變動。
• 後台儀表板：桌機優先，2 個斷點，手機版只保留唯讀查看功能。
• 活動 Landing Page：2 個斷點，轉換元素全程守住觸控區與主 CTA 可見性。

評分卡也能幫你做選擇。給每個候選方案打三個分數：建置成本（越高越費工）、長期維護成本（越高越累）、對客戶的展示效果（越高越好看）。一個常見的誤區是只看建置成本，挑了最快的多 Frame 路線，結果三個月後每次改版都要改三份稿，維護成本反咬。把三個分數加總再決定，會比憑直覺選工具穩得多。

Constraints 與 Auto Layout 的進階模式：四種常見版型怎麼設

知道 Constraints 與 Auto Layout 各自負責什麼之後，真正的功力在於把這兩套機制組合起來，對應到實際版型。下面拆四種最常見的響應式版型，說明每種該怎麼設、錯在哪裡會破。

置頂導覽列：左 Logo 右選單

桌機版導覽列通常是左 Logo、右水平選單，整列貼齊頂端且隨寬度伸縮。Frame 設為 Left 與 Right 雙向 Constraints 讓整列跟著寬度拉開；內部用水平 Auto Layout，間距用 space-between，Logo 與選單就會自動推到兩端。常見的錯是只設 Left，結果縮小視窗時整列被往左擠、右側選單飛出去。另一個錯是沒設最大寬度，超大桌機上導覽列無限拉長，Logo 與選單中間出現一大塊空洞。

英雄區橫幅：背景圖加文字

英雄區（hero section）的背景圖要隨寬度鋪滿，疊在上面的標題與 CTA 要置中。背景圖層設 Left 與 Right 加 Top（或填滿）Constraints，並設 Fill 讓圖片等比裁切；文字容器用獨立 Auto Layout 包起來，設 Center 對齊，這樣背景在縮放時，文字永遠停在中間。最容易破的點是文字直接畫在背景圖上而沒獨立成容器，背景一裁切，文字位置就跑掉。手機版通常還要把標題字級縮小、CTA 改成全寬，這些都靠變體或斷點狀態處理。

商品或卡片網格：多欄自動換行

卡片網格的關鍵在於換行與等寬。外層用 Auto Layout 水平方向、開啟 Wrap（換行），間距用固定 gap，卡片本身設 Fill width 或用比例寬。這樣視窗縮小時卡片會自動往下堆，桌機四欄、平板兩欄、手機一欄，全靠同一個結構完成。常見錯誤是用絕對定位擺卡片，或把卡片設成固定寬度，結果縮小時不是溢出就是留下一排只有半張卡。電商列表尤其忌諱固定寬度，因為商品數量會變，只有流體換行能應付。

側欄加主內容的雙欄版型

雙欄版型在桌機是側欄加主內容並排，到手機要退化成單欄堆疊。桌機用 Auto Layout 水平排列，側欄設固定寬、主內容設 Fill；手機版透過變體把方向改成垂直堆疊，側欄通常移到主內容下方或收進漢堡選單。這裡的破圖多半出在沒有做方向切換，直接把桌機的水平雙欄硬擠進手機寬度，側欄與主內容各被壓成一半，兩邊都讀不了。把方向當成 variant 屬性來管，是處理雙欄最乾淨的做法。

這四種版型涵蓋了大多數頁面的骨架。把它們的 Constraints 與 Auto Layout 設法練熟，等於把響應式設計的八成情境都預先解掉，剩下兩成才是特殊頁面的客製處理。搭配Figma 網格系統與欄位排版的網格觀念一起用，版面結構會更穩。

常見錯誤與排查：響應式稿切了卻還是破的 6 個原因

為什麼設了斷點、也裝了 Breakpoints 外掛，響應式設計還是一塌糊塗？最常見的六個原因如下。說到底，外掛只會照著你既有的結構走，結構有問題它不會幫你修。把這六項逐一排查，通常能解決八成以上的破圖狀況。

1. 桌機先做、手機硬擠：桌機做滿三欄，到手機才發現沒地方放，導致手機版資訊過載與層級混亂。解法是改回 Mobile First，從 375px 起手。
2. 元素全用預設 Left & Top：Frame 縮放時釘死原座標，按鈕飛出 Frame 外。解法是關鍵元素設 Left & Right 或 Scale。
3. 用固定寬度做響應式：沒有流體或 max-width，小螢幕直接溢出。解法是改用百分比或 min/max width。
4. 不同斷點共用同一組網格：手機平板沿用桌面 12 欄網格，欄位擠到無法容納內容。手機用 4 欄、平板用 8 欄、桌機用 12 欄才是常見做法。
5. 外掛裝了就以為搞定：Constraints 與 Auto Layout 沒設，切換斷點後全錯位。外掛只負責切換，不負責把亂結構變整齊。
6. 設計與開發斷點對不上：設計 768 與開發 media query 因 scrollbar 或 box-sizing 差 1~17px。解法是把斷點寫進設計系統文件並對齊。

這六個錯誤裡，前三個是結構問題，第四個是策略問題，第五個是心態問題，第六個是溝通問題。結構與策略你得自己修，心態與溝通得靠流程與文件，外掛幫不上忙。順序一直是同樣那句：先結構、後工具。作品集網站製作實戰教學 那種需要兼顧美感與工程的專案，尤其吃這套紀律。

排查時有個小訣竅：把 Frame 拖到每個斷點邊界前後各 50px，看內容在臨界點附近會不會破。例如 768 這個斷點，檢查 718、768、818 三個寬度下的表現。很多破圖只發生在臨界點前後的窄帶，平常看 375 與 1440 都沒事，一到 700 多就崩。這個檢查習慣養起來，能少掉很多交付後被開發退稿的來回。臨界點的邏輯其實跟 Landing Page 轉換率優化原則 強調的細節致勝一樣，差一點就差很多。

響應式原型預覽與元件變體

Figma 響應式原型怎麼預覽不同裝置？內建的 Present 模式可以選裝置框架預覽，但這只是外框模擬，不會真正切換斷點。要真正預覽響應式行為，得靠前面提的 Breakpoints 外掛，或用 Variables 的模式切換。兩者都能讓你在預覽時看到不同寬度下的版面變化，差別在於外掛是拖曳即切換，Variables 是切模式。

元件變體（Component Variants）是另一個常被忽略的響應式武器。同一個元件可以為不同斷點做變體，例如按鈕在桌機是水平排列、在手機是垂直堆疊。把斷點設成 variant 的屬性之一，就能在一個元件裡管理多裝置樣貌，而不是複製三個獨立元件。這跟Bento Grid 便當盒版面配置的模組化思路相通，把大版面拆成可組合的小單元。對 網頁設計必備關鍵元素 的管理也更有系統。

預覽時還要注意字體與留白的層級。排版設計與字體行距視覺層次在手機上更關鍵，因為螢幕小、容錯低，字級差 2px、行距差 0.1 都會影響閱讀。手機版的字級通常要比桌機大一點（相對螢幕），行距也要更寬鬆，這些都得在預覽時實際看過才能確認。英文字體搭配可參考 英文字體推薦與下載，靈感不足時翻翻 網頁設計靈感與參考網站 與 最新網頁設計趨勢風格。

回顧一下整個流程：定斷點、Mobile First 起手、Constraints 加 Auto Layout 把結構設好、外掛或 Variables 做切換、交付三件套、排查六常見錯。這六步走完，一份能對接開發、能在多裝置上不破圖的響應式設計稿就成形了。工具會換、外掛會改版，但這個流程背後的結構觀念是穩定的。把網頁設計完整指南與 UI 原則與這套流程結合，多數專案的響應式需求都能交代得過去。想繼續往下走，順著 網頁設計自學路線圖 與 免費 UIUX 自學資源地圖 走，搭配 UIUX 設計師常用 ChatGPT 指令 與 設計思考與使用者需求方法，可以把判斷的素材補得更齊。

響應式設計稿上線前的驗收清單

稿子交出去之前，照著這份清單逐項打勾，能擋掉大多數交付後才被退回的問題。這份清單分成結構、互動、文字、圖片、裝置實測五個面向，每項都對應一個常見的破圖或落差原因。

• 結構：每個關鍵元素都設了 Constraints，沒有人還停在預設 Left 與 Top；卡片與按鈕內部都套了 Auto Layout。
• 結構：每個斷點的欄數寫進對照表（手機 4、平板 8、桌機 12），沒有把桌機 12 欄硬塞到手機。
• 互動：所有可點擊元素的觸控區至少 44px，符合無障礙建議。
• 互動：主 CTA 在手機第一屏看得到，沒有被擠到折頁之下。
• 文字：手機版字級與行距都比桌機略大略寬，閱讀不擠。
• 圖片：響應式圖片標註了不同斷點的 crop 位置，人物或商品不會被裁到臉或重點。
• 裝置實測：在 718、768、818 三個臨界寬度各看一次，確認沒有邊界破圖。
• 裝置實測：用實機走一輪，確認字體 fallback、捲軸寬度、圖片載入沒有造成版面跳動。

版面跳動特別值得注意，它直接牽動 Core Web Vitals 裡的 CLS（Cumulative Layout Shift）指標，而 CLS 是 Google 排名訊號的一環。圖片沒標長寬、字體載入造成文字重排、延遲載入的廣告把內容往下推，都會累積 CLS。在 Figma 階段把圖片的長寬比例固定、把延遲載入元素的位置先佔好，能從設計端就少掉一半的 CLS 來源，這跟Core Web Vitals 與版面穩定度 CLS 講的是同一件事。把驗收清單走完，再交付，是最便宜的上線保險。

常見問題 FAQ

Figma 怎麼做 RWD 響應式設計？

在 Figma 裡做 RWD 不是寫 CSS，而是為每個斷點建立對應的 Frame，用 Constraints 與 Auto Layout 讓元件可縮放，再透過 Breakpoints 外掛或內建 Variables 把多裝置切換自動化。成敗關鍵在元件結構，不在外掛。

Figma 的 Breakpoints 外掛是什麼，要怎麼安裝？

Breakpoints 是 Figma 社群外掛，能在單一 Frame 上預設多組寬度斷點，拖曳寬度時自動切換版面狀態。安裝路徑是 Plugins → Find more plugins → 搜尋 Breakpoints → Run，免費且免額外帳號。它省的是切換工，不是設計判斷。

響應式設計的標準斷點數值是多少？

業界常用手機 ≤767px、平板 768~1023px、桌機 ≥1024px，進階再加超大桌機 ≥1440px。這組數值與 Tailwind、Bootstrap 一致，方便設計稿直接對接開發的 media query。Frame 建議寬度手機 375、平板 768、桌機 1440。

Figma 響應式設計要從手機還是桌機開始做？

建議從手機直式 375px 起手。小螢幕會逼你刪掉裝飾、只留核心層級，放大到桌機時資訊架構更乾淨。反向先做桌機容易把手機版硬擠成殘渣。例外是後台與資料密集儀表板，可從桌機先做但仍要設計手機退化版。

Figma 不裝外掛也能做響應式設計嗎？

可以。用內建 Variables 定義寬度、間距、字級的 min/max 區間，搭配 Min/Max Width 讓 Frame 流體縮放，不用外掛也能做出接近瀏覽器的響應行為。設定門檻較高，但穩定且不被第三方綁架，適合長期產品設計系統。

Constraints 在 Figma 響應式設計裡扮演什麼角色？

Constraints 是元素層級的錨點，決定 Frame 縮放時元素要貼左、貼右、置中還是等比。沒設 Constraints 的元素會用預設 Left & Top，縮放時釘死在原座標，這就是破圖的主因。設 Left & Right 可讓元素隨寬度伸縮。

Breakpoints 外掛和 Figma Variables 的 min/max width 有什麼差別？

外掛是拖曳寬度即自動切換斷點狀態，設定快但依賴第三方穩定性。Variables 的 min/max width 是內建流體縮放，設定門檻高但長期穩定、Dev Mode 可讀取。急件展示用外掛，長期設計系統用 Variables，兩者也可並用。

Figma 響應式設計做好後怎麼交付給開發？

附三樣東西：各斷點完整 Frame、關鍵元素 Constraints 設定、斷點乘以欄數乘以 gutter 乘以 max-width 的對照表。Dev Mode 會帶出數值，但仍建議把斷點策略寫進設計系統文件。交付後在實機檢視一輪，Figma 預覽與真實瀏覽器仍有差異。

Auto Layout 跟響應式設計有什麼關係？

Auto Layout 是元件內部的彈性容器，處理方向、間距、padding 與換行，是卡片、按鈕、導覽列的響應式基礎。搭配 Constraints 與 Grid 三層疊起來，才是完整可縮放結構。沒有 Auto Layout，元件內容在縮放時不會自動重排。

做 Figma 響應式設計要搭配網格系統嗎？

要。網格定位大區塊，Constraints 處理元素錨點，Auto Layout 處理元件內部，三層分工。手機常用 4 欄、平板 8 欄、桌機 12 欄，不同斷點用不同欄數才能容納內容，硬把桌機 12 欄塞到手機是常見破圖原因。

我的專案到底該切幾個斷點？

看裝置多樣性與內容複雜度兩個軸。低低象限（活動頁、登入頁）2 個斷點就夠；高低象限（品牌官網、部落格）3 個；低高象限（後台儀表板）2 個但以桌機為主；高高象限（電商列表、大型內容站）才值得切到 4 個並上流體 Variables。再疊上維護人力與交付對象兩個變數微調，例如小團隊即使落在高高象限也常先壓回 3 個求生存。

為什麼 768 這個斷點在設計和開發之間常常差一兩 pixel？

原因是捲軸寬度與 box-sizing。開發的 media query 寫 min-width 768px，但瀏覽器實際可視寬度扣掉捲軸後可能是 767px，桌機版就不觸發。各瀏覽器捲軸寬度不一，加上 box-sizing 計算方式不同，差 1 到 17px 都可能。最有效的解法是把斷點數值寫進設計系統文件，與開發對齊，並在驗收時檢查 718、768、818 三個臨界寬度。