Figma Groups or Frames

Figma Groups or Frames

Olivier Van Biervliet
Designer
Figma
Published
April 26, 2021

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.

Groups

The Basics

Figma group

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.

Advanced

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:

A group has default constraints of Left and Top towards its parent element

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.

Resizing a group resizes the objects within it

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.

Frames

The Basics

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).

Advanced

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.

Use the Clip Content checkbox to hide outside parts

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.

Use Resize to Fit to encompass all content again

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.

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).

Use Cases

  • Positioning objects partially outside the frame allow for interesting alignment options.
In this example, the dark grey background is visible outside the frame. When we align other objects with this frame, it will align with the real bounds of the frame.

  • Creating complex solutions for UI design, like nested menu items that use custom constraints, that behave as a component. Note that components in Figma are in fact frames.
Setting custom constraints on the contents of a frame for component-like behaviour

  • You can hide part of your frame by placing it outside the boundaries, then reveal when necessary.
Use the Clip Content toggle together with frame bounds to show/hide additional parts of your design

  • There are more advanced use cases, such as overflow behaviour in prototyping and using grids within a frame, but we’ll go in depth with that in a next blog post.

Conclusion

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.

Groups

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.

Frames

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.

Hackages is an educational platform with the mission of improving developers and businesses' skills and helping them acquire new ones.
Home
Tutorials
Blog
Webinars