Figma: Frames vs. Groups

WHY IT EXISTS In UI design, you need two ways to organize layers. One is for simple selection and movement (a bundle). The other is for creating structural containers with their own properties, like artboards or components. Groups and Frames solve these two distinct needs.

THE MENTAL MODEL A Group is a "shrink-to-fit" container. Its boundaries are implicitly defined by the combined dimensions of the layers inside it. A Frame is a container with explicit, user-defined boundaries. Think of a Group as a temporary selection you've made permanent, and a Frame as a mini-artboard or a component container.

HOW IT WORKS To create a Group, select layers and press Command+G (or Control+G). Its bounding box will automatically wrap its children. If you move a child layer, the Group's bounds update. To create a Frame, press F and draw a rectangle, or select layers and press Command+Option+G. The Frame's dimensions are independent of its children. A key feature of Frames is that they can clip content, meaning any part of a child layer that extends beyond the Frame's boundary can be hidden.

WHEN TO USE IT Use Frames for almost all UI construction: screens, buttons, cards, input fields, and any element that will use Auto Layout. Frames are the fundamental building block of component-based design in Figma. Use Groups for quick, temporary organization, like grouping a set of icons and a label that you want to move or resize together as a single unit, without needing container-specific properties.

WHEN NOT TO USE IT Avoid using Groups for any element that needs defined padding, a specific background color, or clipping behavior. Because a Group's bounds are determined by its children, you cannot create empty space (padding) inside it. Using a Group for a button is a common beginner mistake; moving the text will cause the "button" to resize unexpectedly.

ONE CANONICAL EXAMPLE Imagine a user profile card. The entire card would be a Frame. This allows you to set its overall size, give it a background color, and apply a corner radius. Inside this Frame, the user's avatar and their name might be grouped together (a Group) so you can easily reposition them as a single unit. The card itself needs to be a Frame to maintain its structure, but the avatar-name pair is just a simple collection.