Figma Design 教材 / Class LLL

Modes與繼承：子層為什麼沒跟著換？

先找有效模式的來源，再檢查每個集合

父框換成Dark，子層卻還是Light？沿子層明確指定、自動、父層、頁面與集合預設查來源；分清跨集合選擇與框寬。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 12 分鐘

開啟互動教材查看參考來源

閱讀目標

定位子層的有效模式來源
用自動恢復沿祖先解析
區分預設模式與恰好選到預設的明確指定
分開Theme、Density與框寬

適用條件與學習範圍

同一顆元件在父框換主題後沒更新，是值錯了，還是模式來源被子層指定？

先知道變數型別、集合及屬性綁定；模式是集合中每個變數的一組情境值。

能指出目前值由哪層、哪個集合的哪個模式決定，並選擇保留指定或恢復繼承。

原創兩集合、固定頁面→父框架→子框架，Theme兩色樣本與Density兩種間距。不是跨檔資源庫、任意巢狀解析、對比合格證明或自動媒體查詢。

原理與判斷

模式讓一個變數在不同情境有不同值；選到哪組值，還要看套用範圍。物件的自動會向祖先查找有效模式，沒有指定才退回集合預設。子層若明確選Light，即使父層變Dark，它仍保留Light。不要只反覆改色碼。先問：這個屬性有沒有綁變數、變數屬於哪個集合、該集合在這層有沒有明確模式。找準來源後，再決定這是有意的局部主題，還是需要清除的指定。

一個集合的多組值，不是複製整個畫面

Theme集合可以讓surface與ink兩個色彩變數，各有Light與Dark的值。把圖形屬性綁到它們，再切該集合模式，使用位置便解析另一組值；不是每次複製一整組框架再手改所有顏色。本箱顏色只是原創觀察樣本，沒有經對比或可及性認證。真實文件要確認屬性確實綁定、每個模式都有預期值，以及方案可用的模式數；不能只靠模式名稱推論內容。

自動先查祖先，明確指定會截住繼承

物件的自動會沿父層往上找明確模式；一路沒有才用集合預設。本箱固定父框架、頁面、集合預設三站，讀數直接寫出子層解析來源。父選Dark、子選Light，子板維持Light；按清除子層指定，改回自動，就回到父層Dark。保留局部Light可能是合理設計，例如深色頁中的淺色卡片；「沒跟著變」不必然是錯。先判斷目的，再改設定。自動是物件用語，頁面在本箱顯示預設，不把頁面假裝成另一個自動物件。

預設與明確選到Light，現在同色也不同責任

集合預設是變數視圖最左欄，可用Set as 預設或把欄拖到最左。當頁面沿預設、物件沿自動時，更換預設會改其解析；但若頁面或物件明確選了Light，即使Light原本就是預設，改預設後仍綁Light。試著把所有層恢復沿用，再改Theme集合預設；接著明確選子Light，再換預設。兩次結果不同，說明目前色碼相同不代表設定相同。真實文件還要辨認祖先是否已有指定，不能跳過父層直接怪預設。

Theme與Density是不同集合，不能只換其中一個

本箱Theme供應顏色，Density供應間距8／16；選Dark不會自動把Density變Compact。真實文件若另外用語系、尺寸或其他集合，需分別核對每個集合的有效模式。本模型把Density固定為父層明確選擇、子層沿用，只示範跨集合獨立，沒有聲稱所有專案都該這樣分集合。若希望同步切換多個情境，必須有明確設計與操作，不能由同名或相鄰欄位推定自動連動。

框變窄不會自己建立媒體查詢

改成窄框只把子板128改成88，Theme與Density保留目前選擇。模式可以拿來表達不同裝置尺寸的值，但這不表示拖曳框架寬度時Figma就必然自動切模式。要比較小尺寸，先指定要用的模式，再檢查自動排版、文字與尺寸規則是否適合該寬度；在程式端也需另做響應式條件。本箱沒有自動斷點、文字溢位排版或CSS產生，避免用一個旋鈕代替整個響應式系統。

入口、方案與資源庫版本是不同檢查

官方模式文件列教育方案、專業方案、組織方案與企業方案可建立及使用，集合模式數依方案；建立／編輯仍需文件可編輯條件。物件要能切模式，需使用多模式變數，容器也可因後代使用而可設定；頁面有本地多模式集合時可從頁面套用。跨檔資源庫還可能有來源版本不含新模式、消費文件尚未更新等問題，不能把本地箱子的結果當發布成功。企業方案的團隊預設另有資源庫及至少兩模式條件，本頁不把它推成所有方案都有。未登入帳戶驗證，也未操作真實文件。

步驟與觀察

確認集合、變數與真正綁定的屬性
在有可編輯的Design文件選自己的圖形，記錄填色等屬性綁定的變數與集合。先準備同一集合的兩組有效值；沒有綁定就先補型別與綁定頁。操作名稱對照（中文為本站教學譯名）：左側變數 > Collection > New 變數模式（介面原文：左側 Variables > Collection > New variable mode） Appearance > Apply 變數模式（介面原文：Appearance > Apply variable mode）頁面 > Apply 變數模式（介面原文：Page > Apply variable mode）
建立模式並填好每個值
從左側變數選集合，在欄頭右側New 變數模式新增；官方說新欄複製第一欄的值，建立後要逐項改成預期情境，不是新增Dark名稱就自動算出深色。也可右鍵欄頭建立副本模式。
從父層套用，再查子層來源
選有多模式變數或相關後代的容器，從Appearance的Apply 變數模式選集合與模式。觀察子層是否自動；若沒有跟隨，先查同集合在子層的明確指定，保留有意的局部主題。
回到自動並分清頁面預設
把不需要的子層明確選擇改回自動，再由父層往上核對。取消畫布選取可從頁面的Apply 變數模式設定頁面情境；頁面預設與明確選某模式不同，即使目前解析同一值。
逐集合核對，再測幾何
依序核對Theme、Density或自己使用的各集合，不把一次選擇當全部同步。改框寬觀察排版，不預設會自動切換模式；需要小尺寸模式時明確選擇並再測內容。
留下來源及方案版本條件
交接使用位置、集合、模式與明確／繼承來源。若是資源庫，另外查發布與消費端版本；方案模式數與企業方案團隊預設按官方及當前帳戶核對，不以本站模型宣稱實測成功。

常見問題

父層Dark了，子層仍Light

先查子層同集合是否明確指定Light；有意保留就不改，需要繼承才改自動。

改集合預設後，有的物件仍舊色

查祖先或自身明確模式；明確選了原預設Light不等於自動／預設。

Theme換了，間距卻沒有換

查間距綁到的集合與該集合模式；跨集合不因同時出現就自動同步。

新增Dark欄，畫面還是淺色

新模式複製第一欄值；核對各變數的新值及使用位置綁定，名稱不會自動改值。

縮框架卻沒有切成Mobile

模式不是必然自動的媒體查詢；明確選要比較的模式，再檢查尺寸與排版規則。

切模式入口不存在，或跨檔缺新模式

查物件是否使用多模式變數、可編輯權限及方案；資源庫另外查來源版本與更新，不反覆修改無關色碼。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design、可編輯文件的local多模式變數；S17列教育方案／專業方案／組織方案／企業方案，模式數依方案；企業方案團隊預設額外條件獨立呈現。來源狀態：2026-10-22讀S17（2026-10-21 Scrapling cache）：Auto僅物件、頁面Default、明確指定、集合預設、新欄複製及套用條件；V02為2026-10-22新抓，S16為21日cache。未登入帳戶核實即時方案數量，不填固定上限。示意限制：原創固定兩集合、三層模式供應箱；Theme顏色、來源閘門、Density間距及讀數同源。不是完整Figma解析、跨檔資源庫或自動響應式引擎；素材皆程式原創。原生軟體實測：僅本站公開瀏覽器操作，未原生Figma建立模式、發布或切換實測。學習成效驗證：未真人試用，沒有學習成效證據。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。