Figma 的 Frame 和 Group 有哪些区别？5分钟带你快速了解！

平日里用 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 上进行编辑，不要新增图形用于添加底色或边框。

欢迎关注作者微信公众号：「长弓小子」