平日里用 Figma 做設計稿和組件的你，有沒有那么一刻會產生疑問：

到底什么時候應該用 Frame，什么時候應該用 Group 呢？這兩者到底有什么區別呢？

Frame 和 Group 都是用于容納對象的容器，雖然二者之間的區別并不明顯，但也的確有各自獨特的屬性和應用場景。

更多軟件技巧：

一、Group VS Frame

1. Group 如何使用

Group（組）側重于將多個元素組合在一起作為單個圖層呈現。組的邊界由組內的子元素決定，因此調整組內元素的大小或移動元素都會導致組的邊界被自動調整，如下圖：

Group（組）的特點和功能是：

1. 是非破壞性的，也即不會永久地將圖形拼合在一起；
2. 可以隨時取消編組；
3. 將元素組合在一起以減少設計稿的圖層數量；
4. 調整組的大小時，組里元素會跟著組一起進行縮放，但效果、描邊和文字等特征的大小數值不會縮放；
5. 如果想要同時縮放以上提到的這些屬性，你需要使用 Scale 功能：

2. Frame 如何使用

Frame（框架）在其他的設計工具里通常被定義為“畫板”?？蚣芤约捌淝短啄芰κ窃?Figma 中創建動態布局的關鍵要素。

框架的大小是獨立于其子元素的，也即如果在框架內重新定位或縮放子元素，框架的邊界不會自動調整。如果你希望框架的尺寸根據內容重新調整，則需要選中右側屬性面板中的“調整大小以適應”按鈕。

Frame（框架）的特點和功能是：

① 定義位置約束：這些約束也會影響子元素相對于其父框架的大小調整行為。約束的默認設置為 “Top” 和 “Left”：

② 顯示越界內容：可以使超出框架邊界的元素保持可見或隱藏：

③ 原型內容滾動：溢出到框架邊界之外的元素可以設置為在原型內滾動，以便在 prototype 模式下查看滾動的 demo 樣式：

④ 使用柵格布局：子元素的大小調整會跟隨柵格布局的進行變化和調整：

總結

所以我們可以總結如下：

以下情況，建議使用 Group（組）：

1. 希望將多個對象組合成一個可管理的圖層；
2. 希望將元素組合在一起，以便在縮放時保持固定的關系（比如：由多個形狀組成的徽標或符號）；
3. 希望父級邊界能夠在你操作子級時自動適應子級邊界。

以下情況，建議使用 Frame（框架）：

1. 希望獨立于其子集內容來控制框架大小；
2. 希望子集元素被框架邊界剪裁，或位于邊界之外；
3. 希望在原型中實現嵌套滾動行為（比如：水平滑動或垂直滾動）；
4. 想在其中使用柵格布局。

另外多說一句：

不管是用 Frame 還是 Group 來做組件，在組件做好以后，都要檢查以下兩點：

1. 組件有沒有多余的 Frame 或 Group 需要去掉，保證組件干凈、清晰；
2. 如果組件有底色或邊框的情況，請直接在 Frame 上進行編輯，不要新增圖形用于添加底色或邊框。

歡迎關注作者微信公眾號：「長弓小子」