Figma Groups or Frames
In a previous post, we discovered the functionality of Smart Selections in Figma. These allow for implicit grouping and are a quick way of dealing with multiple objects.
When working with many layers and objects however, we need a more formal way of bundling these. Usually, you would use a group for this, but Figma throws another option in the mix: Frames.
At first sight, Frames looks very similar to Groups, so let’s have a deep dive and discover their individual qualities.
Let’s start with the basics. Every graphics app has grouping functionality by now: you select some objects, press ⌘G (Ctrl-G on Windows) and voilà: your layer list will now look cleaner by having a collapsible group.
Groups are defined by their contents. The boundaries of your group are the outside edges of whatever is inside it. So, whenever you change the position or dimensions of an object, the bounds of the group will modify accordingly.
Note: To directly select something in a group, you ⌘/Ctrl-click it or double click it, or click it in the layer list on the left.
The group object itself has a relation to the parent element in your document. By default the constraints of the group will be set to Left and Top, as you can see by the dashed lines here:
If you set the constraints to Scale, your group will scale along with its parent element, which could also be the artboard.
Resizing a group will always resize the contents. If you need to keep the same aspect ratio, you can hold Shift while resizing.
Note that objects within the group will have the same left & top constraints by default, but that doesn’t really matter because the objects themselves define the boundaries of the group. It wouldn’t make sense to have them relate to the left border if they define that border in the first place.
If you want or need to use constraints on the objects within your group, you need to use Frames instead. We will come back to this later.
At first sight, there doesn’t seem to be much difference between groups and frames. You select your objects and use ⌥⌘G (Ctrl-Alt-G on Windows) to turn them into a frame. They’ll collapse in a similar way in the layer list.
Note: Undoing the framing is the same as ungrouping: ⇧⌘G (Ctrl-Shift-G).
When you setup a frame, its initial dimensions are based on its contents. However, the bounds of your frame are actually independent of what’s inside.
Your frame is like a window (a viewport, or an artboard if you wish) where you look through and see the objects behind it. So, when you resize your frame you are only resizing the window you’re looking through.
As you can see in the animation, objects can be partially out of the frame. Depending on the Clip Content setting, the outside parts will be visible or not.
Alternatively, you can reposition content and reset the frame bounds with the Resize to Fit button. Note that you have to hover or reselect the frame to see its changed dimensions.
Just as with a group, a frame and its content have default constraints of Top/Left. Resizing the frame looks like it has no effect on the objects, but if we set an object to different constraints, you will notice it really works as expected.
Note: hold ⌘ to ignore constraints when resizing the frame (Ctrl on Windows).
When would you use groups and when to switch to frames? They are after all very similar, and you can easily toggle between them by using the dropdown in the properties panel.
are most suitable for easy combining of items that belong together, like a logo and brand name, to make managing them in the layer list easier. The contents of a group should stay together when resized because they don’t adhere to constraints.
are most suitable for layout of child elements that belong together, but that maintain a specific relation to each other (by using constraints). Play around with the Clip Content and custom constraints to fully grasp the possibilities.
Learn how to easily set up a payment flow on your web application using a ReactJs frontend, a NestJs backend, and Stripe’s payment Intents! The Stripe API allows you to create a...