Class LLL / 設計星團教材目錄編輯與來源

Figma Design 教材 / Class LLL

彈窗與捲動異常：先找覆蓋層及捲動的父層

覆蓋、換主頁、固定與黏附，各有作用範圍

彈窗位置不對或固定條跟著跑，先分Open／替換／關閉覆蓋層，再指出主框架與內框哪個正在捲動。比較Scroll with 父層／固定尺寸／Sticky與有限直接父層，核一般auto-layout 流程及Ignore例外。

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

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

閱讀目標

適用條件與學習範圍

彈窗換內容為何沒有重新置中？內框固定條為什麼仍會跟主頁捲走？要先指出覆蓋的是誰，以及哪一層是直接父層。

能區分主頁導覽、覆蓋層與替換，說出主框及內框各自的捲動責任；預測固定尺寸／Sticky何時固定、何時隨直接父層移走。

單主框架、單覆蓋層、三種開啟位置子集與兩個有限垂直捲動窗。只示意fixed／sticky的具名條件，未重現Figma全部疊層／捲動／排版／state management／動畫或CSS定位引擎。

原理與判斷

開啟覆蓋層在目前畫面上方加內容，導覽至則換主畫面。選錯動作時，彈窗可能變成整頁跳轉，或以為返回會回前一個覆蓋層。捲動也相似：你看到的固定或黏附結果，必須相對一個有範圍的框架／父層解釋，不能只記一個固定尺寸名稱。 本站同時顯示主框、其中內窗與覆蓋層。主頁保持A、覆蓋層自己有位置；主框與內框有獨立捲動量。條的顯示位置、直接父層邊界及裁切全部由同模型產生，讓「固定在誰裡面」能真的觀察。

開啟覆蓋層保主頁，另有背景與點外關閉

在原型從熱點連到要作覆蓋層的框架，Interaction中選觸發條件、開啟覆蓋層及目的地。覆蓋層在目前畫面上方，不換掉主頁。可選位置、Close when clicking outside、背景顏色／透明度；位置相對原框架，可選預設或手動。設定作用於覆蓋層本身而非只一條connection，可在原型編輯。本台只示意中心、左上、手動三種子集與單覆蓋層，黑背景開關及點外側結果可觀察，不冒充全部七種位置或原生modal。

替換換上層內容，Close關上層

替換覆蓋層在已有覆蓋層內替換內容，保原覆蓋層設定與位置，不能為新覆蓋層另定位置；大小不同也不要自動假設重新置中。本台說明120×64置中@60,78，換聯絡140×84仍@60,78，主框架維持A。替換不進原型歷史，返回不因此返回剛被換掉的覆蓋層；需要不同流程時要重新判斷導覽至或Close。關閉覆蓋層關掉覆蓋層回到原底頁，本台不把Close當網站返回。

有overflow前，內容先要超過框架

原型 scrolling需內容超出框架尺寸、對框架設Overflow，再為其中物件設捲動位置。Overflow只套框架，可是頂層或巢狀框架；No scrolling／Horizontal／Vertical／Both directions各有用途。裁切內容控制是否藏出界內容，不等於已設定捲動。本站主窗高220／內容620，內窗高100／內容280，兩者都明確超出。只做Vertical；停主框overflow時本站以原稿位置示意，未宣稱原生切設定如何保存既有捲動。

先說主框捲動，還是內框自己捲動

主框架捲動會搬動其中內框架的整體位置；內框自己的捲動則只改它裡面的內容。本站內窗在主內容Y80，主捲動0時仍在80，內捲動20只改內窗條文；主捲動120後內窗頂變−40，哪怕內框固定條相對內窗始終12，主畫面位置也成−28。可見性另受兩窗裁切，不能把讀數仍存在當成螢幕還看得到。滑桿提供不靠手勢的同一觀察入口。

Scroll with 父層與固定尺寸，各固定哪個關係

Scroll with 父層隨內容走；固定尺寸在該框架的捲動中不移，可作狀態列或菜單。官方會把fixed層移到其他捲動層上方，不可把捲動層堆到它上面。普通auto-layout 流程子層不能設固定尺寸，除非退出流程的absolute 位置／當期忽略自動排版例外；不要一概說auto-layout裡都不支援。本台主條固定尺寸用主窗Y24，選一般流程時停止假算，切Ignore例外才給結果。內框亮條則只在內框自身捲動時固定12，兩者不是同一個範圍。

Sticky先走，再黏，仍被直接父層帶走

Sticky用於垂直捲動框架內物件，先隨內容移動，頂緣到父層頂時黏住，回捲會解除。若物件又包在另一層，須留在直接父層 bounds；父層捲出時sticky也繼續跟著移走。本站主條原Y180、高24：捲動100得80，200時黏在0；切有限父層160–340，捲動340時條Y−24離窗。若父層是整主內容，它在同一捲動量仍可留0。這是明示尺寸子集，不模擬任意巢狀與全部定位規則。

堆疊順序也會改變黏附時誰遮誰

Sticky的可見遮擋仍看圖層面板順序，官方說在其下的層會從背後捲過、其上的層會在前方；可改順序，但auto-layout裡重排圖層面板又可能改畫布排列。自動排版的Canvas stacking也有First／Last on top條件。本站只用固定的有限堆疊，主條在條文之上、覆蓋層在其上，未開放任意重排、混合或真排版求解。出問題時先核直接父層、overflow與層序，不把Sticky當永遠蓋最上層。

目前捲動可保存，跨框架共享另看匹配

當期原型捲動位置預設可記住各框架／捲動圖層的狀態；匹配物件才跨框架共享：巢狀物件需同名與同一組parents，頂層框架可同名或同一斜線前綴。重設捲動位置可覆蓋預設；2023-05-24前舊互動的Preserve設定不同，不能只照舊checkbox教。本站不模擬跨Framestate management，只按本站知識ID保探索狀態；兩者證據與資料格式分開。

回真稿先核一個可重走條件

記錄主頁框架、覆蓋層名稱與位置、兩個捲動容器、物件位置、直接父層及觸發步驟，再從流程入口重走。固定尺寸在畫面外也可能因約束偏移看不到；官方教學用底部／右側相對檢視者邊保持位置，本台只做明示Y24。基礎原型任何團隊／方案但建立需可編輯；本票沒有建立或分享私人Figma檔，也沒有真人試用證據。不要把本站示意成功當整份原型已可用。

步驟與觀察

  1. 建底頁與覆蓋層框架

    在原型從熱點連到說明框架，選開啟覆蓋層、具名觸發條件與目的地；確認底頁仍是原主框架。 操作名稱對照（中文為本站教學譯名）： 原型 > interaction > 開啟覆蓋層／替換覆蓋層／關閉覆蓋層（介面原文：Prototype > interaction > Open overlay／Swap overlay／Close overlay） Overlay > 位置／Close when clicking outside／Add background（介面原文：Overlay > Position／Close when clicking outside／Add background） 選框架 > 原型 > Scroll behavior > Overflow（介面原文：選Frame > Prototype > Scroll behavior > Overflow） 選子層 > 原型 > Scroll behavior > 位置（介面原文：選child > Prototype > Scroll behavior > Position）

  2. 定位置與外側點擊條件

    選覆蓋層設定位置、背景及Close when clicking outside；先測外側保留，再啟用關閉比較。本台位置選項只控制下一次Open。

  3. 替換與Close分別測

    從覆蓋層的熱點設替換到另一覆蓋層，核位置沿用且不造返回歷史；另設關閉覆蓋層關上層。

  4. 為真正框架設定Overflow

    確保內容大過框架，再原型 > Scroll behavior > Overflow；檢查子層確在其中，裁切內容與捲動分開。

  5. 逐容器測捲動位置

    先改主框再改內框捲動，看內窗整體與內部內容差異；比較Scroll with 父層、固定尺寸及Sticky，核流程例外與直接父層邊界。

  6. 回流程入口記錄重現

    重播並記框架／覆蓋層／父層／捲動量與步驟；跨框架保存核匹配與重設。本站重設只回此教具，補讀返回保探索。

常見問題

彈窗把主頁整個換掉

核動作是導覽至還是開啟覆蓋層，並核目的地框架；不要只看視覺像不像modal。

替換後新彈窗沒有重新置中

替換保原位置設定，本台不同尺寸仍同座標；若要另位置，先重新設計開啟方式與覆蓋層設定，不假造替換專屬位置。

點外面關不掉

核Close when clicking outside是否啟用、是否真的在覆蓋層 bounds之外；本台有明示事件與開關。

固定尺寸在auto-layout 子層無法套

先分普通流程與忽略自動排版／absolute例外；不要把整個auto-layout 框架或退出流程的子層一起禁用。

Sticky黏住後又消失

查直接父層是否已捲出，或層序／裁切影響；它不承諾超出父層後仍永遠留頂。

內框固定條仍跟主頁跑

它只對內框自身捲動固定；主框搬整個內框架時仍移動，指出哪一個捲動容器，而非只看固定尺寸字樣。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design 原型基礎任何團隊／方案、建立／編輯需可編輯；固定尺寸普通auto-layout 流程限制與absolute／Ignore例外分列，不宣稱全帳戶可分享或所有native定位一致。 來源狀態：2026-10-22新核overlay、scroll、preserve、state及官方教學五文；actions沿同日FG32新查。保留Swap不入history／同位置、Sticky直接parent及新舊scroll保存差別，不照搬舊Preserve checkbox。 示意限制：原創主窗與內套筒、有限裁切條及單覆蓋層；兩捲動、位置、固定尺寸／Sticky及讀數同源。三位置子集，替換只換內容／尺寸而保座標；不模擬全CSS／Figma定位、動畫、疊層history或跨框架狀態引擎。 原生軟體實測：未原生Figma建立覆蓋層、捲動、fixed／sticky、約束或跨裝置實測；官方來源與本站操作分開。 學習成效驗證：未真人流程或學習成效實測。

參考來源

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

相關知識