平日里用 Figma 做設(shè)計稿和組件的你，有沒有那么一刻會產(chǎn)生疑問：

到底什么時候應(yīng)該用 Frame，什么時候應(yīng)該用 Group 呢？這兩者到底有什么區(qū)別呢？

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

更多軟件技巧：

一、Group VS Frame

1. Group 如何使用

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

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

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

2. Frame 如何使用

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

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

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

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

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

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

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

總結(jié)

所以我們可以總結(jié)如下：

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

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

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

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

另外多說一句：

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

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

歡迎關(guān)注作者微信公眾號：「長弓小子」