Figma Design 教材 / Class LLL

框架與群組：容器的邊界由誰決定？

一起移動，不代表尺寸規則相同

改容器寬度、移動其中一項，還是整組搬走？用同一批子物件比較框架與群組，辨認父子關係、框架邊界及裁切內容的顯示範圍。

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

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

閱讀目標

指出目前操作的是父容器還是子物件
比較框架的獨立邊界與群組依內容包邊
分清裁切顯示與刪除資料
改一個條件後說出下一個檢查位置

適用條件與學習範圍

兩批圖形看起來都被框在一起，為什麼改寬度或移動其中一項時，外框的反應不同？

可直接閱讀；先能指出一個物件即可。這頁補足父層、子層、框架、群組及裁切的基本差異。

能先辨認目前編輯父層或子項，解釋框架的邊界與群組的內容包邊；開關裁切後知道哪些內容只是暫時看不見。

停在固定父子歸屬與固定子項尺寸的比較。群組調整尺寸／縮放、約束、自動排版、任意遮罩、拖出後自動重歸屬及進階選取另由後續完整頁承接；不把本站缺少的旋鈕當成Figma不支援。

原理與判斷

父層與子層描述的是歸屬，不是畫面上有沒有重疊。框架是有自身尺寸的容器；群組的預設邊界跟著子層的合併範圍改變。兩者都能一起選取、移動及包含子層，但不能因為外觀相似就套用同一套尺寸判斷。改框架寬度不等於縮放裡面所有內容。真實Figma還會依約束或自動排版回應；這頁先固定子項，讓容器邊界與內容資料的差別清楚可見。

先問「誰在裡面」，再問「框有多大」

父層是承載內容的框架、群組或元件，裡面的內容是子層；共用同一父層的內容是同層項目。一個巢狀框架也能同時是外層的子層、內層內容的父層。這是設計層級關係，不是程式語言的屬性繼承。開始時先在圖層面板核對縮排與真正歸屬。兩個圖形剛好疊在同一個框上，不足以證明它們都屬於這個框架。真實Figma拖入或拖出可能重新歸屬；本站為了比較尺寸，固定兩個子層，不模擬這項自動行為。

框架的邊界可以與內容分開看

右台預設是框架 96×64，A位於(10,14)、36×24，B位於(60,20)、50×30，都是本站原創單位。B右緣是110，比框右緣96多14；關閉裁切時你仍看得見完整B。保持兩項固定，將框架寬改80。框變窄但B資料寬仍是50，說明「改容器」和「縮放內容」不是同一件事。這是本模型的固定子項條件，不是宣稱任何真實框架改寬時，所有子層都永遠不動。遇到跟著變的內容，接著檢查約束、自動排版及是否選了縮放。

群組預設隨內容包邊，不是不能調整大小

切群組後，邊界從最左A的x10包到B右緣110，所以寬100；它不是從畫布原點算110。把B水平位置由60改84，右緣到134，群組寬變124；A與B自己的寬仍分別是36和50。群組模式的獨立框架寬旋鈕停用，只因這頁選擇隔離「移子項→群組包邊」這個現象。Figma的群組並非不能調整尺寸；完整調整尺寸及縮放會牽涉文字、描邊、效果與幾何，超出這頁的簡化模型，不能靠這個停用控制推論工具能力。

裁切內容裁的是顯示範圍，不是資料

回框架 96×64，開啟裁切內容，B可見寬從50變36，另外14被框邊擋住；A完整36。把框架縮到80，B只顯示20。關閉裁切後兩項再次完整顯示，B資料寬始終是50，子項數仍是2。這項裁切以框架邊界及其中的子層為範圍，不是任意形狀遮罩，也不是移除看不見的幾何。群組模式不套用本模型的框架裁切；如果要研究遮罩來源、作用層或連續透明，應另讀遮罩問題，不把所有消失的內容都歸因於裁切。

一起移動與改某個子層，是不同原因

整個容器位移20時，A畫布X從10變30，B從60變80；它們在父層中的局部位置仍是10和60，尺寸及相對距離不變。只改B水平位置則會改A與B的間距；在群組模式還會連帶改包邊。回到真實文件，先用圖層面板找父層，選整個父層小幅移動，觀察兩個子層是否一起移動，再復原。要只改其中一項，就先深入選對子層。這個先指出作用範圍的檢查，比反覆拖動外框猜測更容易定位原因。

帶走的是判斷，不是一套固定尺寸

遇到版面跑掉，依序指出：目前選了誰、父子歸屬是什麼、框邊由誰決定、內容採什麼尺寸規則、是否只是被裁。這頁讓你分開觀察三個原因，不承諾套用96或50就適合自己的設計。讀完可以換成自己的兩個矩形重做：保留母稿，只改框架寬，再只移動一個子層，最後開關裁切。若結果與預期不同，先找歸屬與排版規則，停止用刪除內容掩蓋結構問題。

步驟與觀察

用自己的兩個物件建立比較稿
在有可編輯權限的Figma Design檔中建立兩個普通矩形，保留副本。此處不需要下載官方練習檔，不讀取帳戶或遠端控制Figma。瀏覽器與桌面介面的入口可能依版本或語言不同；本站數值是教學範例，不是官方預設。操作名稱對照（中文為本站教學譯名）：工具列 > 框架（介面原文：工具列 > Frame）右側 Design > 裁切內容（介面原文：右側 Design > Clip content）選取內容 > 將選取內容設為群組（介面原文：選取內容 > Group selection）
分別建立框架與群組
選取兩個矩形，用將選取內容設為框架建立框架；官方文件列Windows Ctrl+Alt+G、macOS Option+Command+G。另一份用將選取內容設為群組；Windows Ctrl+G、macOS Command+G。也可從工具列選框架，預設F或A。以具名功能核對，快捷鍵可能受平台、瀏覽器或自訂設定影響。
先核對圖層面板歸屬與選取範圍
在圖層面板展開父層，確認兩個矩形確實在其中。選父層作小幅移動再復原；需要深入子層時可用圖層面板或官方鍵盤Enter／Return，回父層為Shift+Enter。不要把本站星圖的鍵盤操作當成Figma編輯器快捷鍵。
改框架尺寸並檢查子層規則
選框架，從右側W／H或邊角改寬度。先辨認子層的約束及是否有自動排版；觀察是框邊改變、內容位置改變還是整體縮放。本頁只固定子層位置尺寸比較；若文件使用其他規則，先說明條件再比較，不為追求相同畫面任意拆散結構。
開關裁切內容，再移一個群組子層
選框架，在右側Design查看裁切內容，分別看開啟與關閉時超出部分是否回來。再選群組中的一個子層移動，核對群組邊界跟內容改變。遇到子層重新歸屬或選錯父層先復原，不把重疊位置當成正確結構。
記錄理由與停止邊界
記錄目前是框架或群組、兩項歸屬、尺寸規則及裁切狀態；換自己的長內容或尺寸，再說出要查的下一個規則。需要群組調整尺寸／縮放、約束、自動排版或遮罩時，應接續對應完整問題；這頁不宣稱已覆蓋那些操作。

常見問題

改框卻以為內容一定會一起縮小

先辨認是在改框架尺寸或縮放，再查子層的約束／自動排版。本模型固定子層只是隔離反例，不代表真實內容永遠不會改。

開啟裁切內容，外側物件仍完整顯示

從圖層面板核對它是否真是這個框架的子層、是否選錯父層。位置重疊不代表歸屬相同；群組也不是本頁框架裁切的作用對象。

群組邊界莫名變大

找最外側或遠處的真正子層；移其中一項會改合併邊界。本站可移B驗證，不用固定框架寬旋鈕掩蓋錯誤來源。

裁切後以為資料被刪掉

關閉裁切再看；本模型B資料始終寬50。若仍不見，繼續查可見性、歸屬或是否真的刪除，不把所有消失都視為同一原因。

適用範圍與證據

原教材查核日期：2026-10-21 適用範圍：Figma Design；官方文件列所有方案，建立／編輯需可編輯。Windows／macOS及瀏覽器／桌面預設入口需依實際環境核對。來源狀態：依既有2026-10-21公開官方S01／S59／S03正文查核；2026-10-22讀取保存快取製作，未冒稱今日重新抓取或已核所有子功能。示意限制：本站原創兩矩形與容器尺台；固定子層尺寸／父層歸屬，只示意框架獨立邊界、群組依內容包邊、裁切顯示及整體位移。非Figma引擎、約束／自動排版、群組調整尺寸／縮放或原生輸出。原生軟體實測：未在原生Figma操作或輸出實測；官方文件及本站公開瀏覽器驗證分開。學習成效驗證：未真人試用，沒有學習成效或遷移效果證據。

參考來源

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