Figma Design 教材 / Class LLL

巢狀實例：讓必要控制浮到外層

操作入口在外層，變更仍有具體落點

控制藏太深時，先認識Card→Button→Icon的巢狀關係。從內層觀察既有屬性，再暴露到外層；比較推薦與其他同檔來源，追蹤改動落在Label還是Icon引用，讓操作介面清楚且保留來源。

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

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

閱讀目標

分清Card、巢狀Button與Icon各自的來源與使用處
從外層介面指出實際被改的內層目標
以必要既有屬性設計可讀介面，辨認顯隱條件
分清推薦清單、同檔／已加入資源庫可用範圍與真實存取權

適用條件與學習範圍

為了改Card內按鈕的文字和圖示，每次都要深選三層嗎？暴露到外層後，真正改的是誰？

先理解Text、布林值、實例替換各自作用及main／實例關係；可補讀元件屬性，再返回本台保留設定。

能選擇必要巢狀控制露出，說出Card／Button／Label或Icon引用的本地差異，並知道推薦不限制所有可用替換。

固定Card→Button→Icon，一個Button的Text與Icon 替換，三個同檔圖示及外層布林值。沒有完整多層暴露、所有覆寫保留、資源庫跨檔授權／發布接受、內容槽或原生帳戶操作。

原理與判斷

使用者看到的控制應該反映他需要做的事，而不是反映來源有多少層。Card的使用者若常改Button文案與圖示，就可以把Button既有屬性露到Card介面，減少每次深入圖層面板尋找。但外層看到控制，不會把Button或Icon的來源全部改成Card。一份可理解的介面同時回答「這裡能改什麼」與「改動落在哪裡」。先認識來源、內外選取與本地差異，才能決定要露出哪些必要控制，以及哪些內容仍應保留較深的編輯邊界。

巢狀實例有自己的來源，不是外層的全部複製

本台Card裡放Button 實例，Button裡又放Icon 實例。外層Card是容器情境，Button main定義按鈕結構與Label／Icon屬性，圖示各自有Calendar、箭頭或Bell來源。編輯某個Card內Button的Label是這個使用處的差異，不自動反向修改Button main。左側來源座分開列Button與目前Icon引用來源，右側顯示Card中的使用處；中間控制橋指出外層入口與內部目標。來源名稱、選取層級與編輯位置分開，避免只因外層出現一個選單就以為外層取得所有孩子的任意結構權限。

先有可用屬性，才有必要暴露的控制

官方Expose nested 實例會把選定巢狀實例的既有元件屬性與頂層屬性一起顯示。主件或元件組若已有暴露項，或內含已套用元件屬性的巢狀實例，才會出現Nested 實例選項；選不到時先回內層來源檢查是否已建立並綁好屬性。本台先選Button內層，改Label文案或Icon引用；回外層時控制暫時看不到，但內容仍在。來源開啟暴露Button後，外層會看到同一組既有Label／Icon控制與原值。暴露不是複製一份新屬性，也不是為任意無屬性的圖層自動建立功能。

外層操作應能對到畫面上的具體部位

官方在頂層實例顯示其本身與被暴露巢狀實例的屬性；懸浮屬性列時，畫布相應物件會高亮，協助確認正在改誰。教材以焦點與具名讀數提供相同理解用途，讓鍵盤使用者也能對照目標，不模仿原生面板的全部行為。選外層Card、填Button Label時，修改位置仍是Card／Button／Label；換Button Icon則落在Card／Button／Icon的引用。文字不會跑到Card標題、換圖示也不會替換整個Button。控制名稱要帶用途與所屬部位，避免多顆按鈕都只有Label或Property 1而無法分辨。

隱藏被暴露的實例，其外層屬性也會隱藏

官方記錄：若被暴露的巢狀實例透過布林值屬性設為隱藏，附屬的元件屬性也會隱藏。把Card Show button關掉，外層不再顯示Button Label與Icon控制；這是與可見性同步的介面條件，不應立刻解讀成屬性被刪除或來源壞掉。本台再次顯示Button，先前的Label與Icon值還在。取消暴露則只撤下外層入口，內層Button依然存在且可從本台內層入口觀察。網站保留當次示例值是有限模型；任意結構修改、重建或來源交換的完整保留規則不在本頁保證範圍。

Preferred是精選入口，可用來源仍有實際範圍

在實例替換屬性設定Preferred 實例可把常用替換集中呈現；開啟選單預設看到推薦，但官方明確允許透過dropdown或search找其他available 元件。因此「不在推薦清單」不等於禁止使用，也不等於沒有讀取該資產的權限。本台推薦Calendar／箭頭；切全部同檔樣本後可換Bell，Label、外層Card與Button來源不變。切回推薦候選也不把既有Bell偷偷換掉。真實實例 menu的候選來自當前文件及已加入的libraries，還取決於來源可存取條件；看不到未加入／未授權的庫，不是靠取消推薦就能解除限制。官方一般替換／libraries文章另列教育方案、專業方案、組織方案等條件，本頁只示範三個本地來源，不把推薦功能的所有方案與所有資源庫服務混寫。

必要控制、預設與文件比全部露出更有用

在來源選主件或元件組，從屬性的Expose 屬性 from選Nested 實例，勾選需要露出的實例；已選清單可移除暴露。應先列使用者常做的事情，給Label、Icon與Show button清楚預設及描述，露出足以完成任務的控制，而不是把所有巢狀項無差別堆到面板。這是本教材的設計建議，並非官方強制數量。需要替換來源時先核對選的是內層Icon而非整個Button；只是找不到控制時先查屬性是否存在、暴露設定與布林值顯隱。既有Simplified 實例自2026-03-23起退場，勿依賴舊版隱藏介面的截圖當固定入口。完整重設／解除連結保留、資源庫發布與內容槽承接內容另有各自問題，不在這裡用解除連動代替介面設計。

步驟與觀察

畫出來源與使用處
在可編輯Design檔辨認Card內的Button 實例及Button內的Icon 實例；到各main確認Label、Icon與布林值的用途。先在自己的測試樣本操作，分清改內層使用處與改main預設。操作名稱對照（中文為本站教學譯名）： Main／元件組 > 屬性 > Expose 屬性 from > Nested 實例（介面原文：Main／Component set > Properties > Expose properties from > Nested instances） Expose nested 實例 > 勾選需要露出的實例（介面原文：Expose nested instances > 勾選需要露出的instance）實例替換屬性 > Preferred 實例（介面原文：Instance swap property > Preferred instances） Top-level 實例 > 屬性 > 巢狀控制（介面原文：Top-level instance > Properties > 巢狀控制）
先驗證內層既有屬性
選內層Button，檢查Label Text與Icon 實例替換已建立並綁到正確孩子；改一次並觀察文字／引用。若Nested 實例選項缺失，先確認內層有元件屬性，不直接猜是版本或權限故障。
回來源勾選必要暴露項
選Card main或元件組，在屬性的Expose 屬性 from選Nested 實例；在Expose nested 實例勾選Button。此設定露出內層既有控制，不能代替建立並綁定Label／Icon屬性。
從頂層核對每個控制的落點
選Card 實例，在右側查看本身與被暴露的屬性。對照懸浮標示、圖層面板與用途名稱，改Button Label／Icon，確認不是另一個按鈕或整個Card；本台用焦點與status讀數提供鍵盤可用的對照。
設定推薦，仍檢查其他可用來源
在來源編輯或建立Icon 實例替換屬性，從Preferred 實例勾選常用圖示。回實例先看精選，再用dropdown／search找其他available 元件。文件與已加入資源庫、存取權及服務條件決定可用範圍，推薦清單本身不是權限鎖。
核對顯隱與取消暴露的邊界
若Button受布林值隱藏，確認頂層的被暴露屬性也隱藏；再顯示核對內容。移除暴露只撤掉頂層入口，應從內層繼續確認。跨來源替換或結構更動另查覆寫保留，不靠解除連結掩蓋選錯目標。

常見問題

找不到Nested 實例選項

選main／元件組，確認其已有暴露項或含具元件屬性的巢狀實例。先為內層來源建立並套用適當屬性，再暴露。

外層改Icon卻換掉整個Button

檢查操作的是外層Button 實例來源，還是Button的Icon 替換屬性；對照名稱、畫面標示與圖層面板。暴露控制不改真正的層級落點。

Show button關掉後，外層Label控制也不見

被暴露實例由布林值隱藏時，其屬性也會隱藏。先顯示回來核對，不立即重建屬性或解除連動。

非推薦圖示以為一定不能選

推薦是精選入口；dropdown／search仍可找其他available來源。再區分文件／已加入資源庫與實際存取權，不把推薦當權限。

取消暴露，以為內層實例被刪掉

暴露決定頂層介面可見項，不是刪除Button。從內層確認既有屬性；任意刪除重建與結構變更另查保留條件。

所有巢狀控制都露出，反而找不到要改哪裡

按常見任務整理必要控制、用途名稱、預設與描述；用對應高亮／圖層面板核對落點。這是介面設計建議，不是原生屬性數量限制。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design；元件屬性官方列所有方案、文件可編輯。一般替換／libraries來源另列教育方案／專業方案／組織方案，服務與存取需分開核對；本台僅同檔可用樣本。Web／桌面版以具名屬性／Nested 實例／Preferred入口核對。來源狀態：C1／C2為FG22在2026-10-22新取讀正文，本票補讀Preferred／Expose及顯隱前提；N1為本票當日新Scrapling取200並讀Instance menu及候選範圍，未將整篇不同入口的override規則混為統一保留承諾。示意限制：本站原創分層控制箱、固定Card→Button→Icon及三個圖示。操作與status同源，暴露與選取分開；Label限本站8字元，不模擬完整覆寫合併、任意巢狀結構或資源庫服務。原生軟體實測：未原生Figma操作或輸出實測，未連帳戶、改真檔、發布資源庫或更改權限；來源查核與本站瀏覽器驗證分開。學習成效驗證：未真人試用，不聲稱學習成效或正式設計系統驗收。

參考來源

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