Figma: Frames vs. Groups
A Frame is a container with its own size, like an artboard; a Group's size just shrinks to fit its contents. Use Frames for UI components with fixed dimensions and clipping, and Groups for simple collections.
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.
Interview question
When designing a reusable button component in Figma that requires a defined background color and consistent internal spacing (padding), which container type should be used?
- a.A Frame, but primarily for elements that will eventually utilize Auto Layout.
- b.A Group, since it's ideal for bundling multiple layers like text and icons together.
- c.A Group, as its boundaries automatically shrink or expand with its content.
- d.A Frame, because it provides explicit boundaries and supports properties like background and clipping.Correct
Why? this is the answer
Frames are essential for UI components like buttons because they allow for explicit dimensions, background colors, and padding, and can clip content. Groups, conversely, are 'shrink-to-fit' and cannot define internal spacing or have their own background, making them unsuitable for components requiring such properties.
Just read this? Test yourself on what you have been reading.
Read the original → help.figma.com
- #figma
- #ui design
- #layout
- #frames
- #groups
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on figma — each one lists the topics its interview covers.
See open roles