Member-only story
When to use a group or a frame in Figma
Groups and Frames have very different uses in Figma, but it’s difficult at first to tell why both of them exist. I can assure you that they complement each other, but first, you need to understand the nuances of each. I’ll show you how to make them, how each one works, and some good use cases for each to level up your Figma skills.
How to make Group or a Frame
Anyone coming from other visual editors, whether Photoshop, Sketch, LucidChart or Google Slides, will usually be familiar with the grouping shortcut. Highlight several objects, press Cmd + G on Mac or Ctrl + G on PC, and the program will group them together so you can treat it as one unit.
Making a frame is very similar, except you press the Cmd + Option + G keys on Mac or the Ctrl + Alt + G keys in Windows. As shown in the screenshot above the layers panel has a dashed square icon to indicate a Group and the hashtag icon indicates a Frame. You can also access the shortcut by right-clicking on the selected layers.
What Groups are good for
Vector objects
As you might expect if you’ve used Powerpoint or Google Slides, grouping objects and layers puts them altogether. It also behaves the same when you resize the group, stretching vector objects to whatever dimensions the parent group is. If you haven’t come across it before, holding down the Shift key will maintain the aspect ratio if you’re making your Group bigger or smaller.
Images
It behaves a little differently for images, but in a positive responsive way. When building prototypes you will less often want to skew the aspect ratio of an image. Figma will maintain the aspect ratio of the image centre it in the group and ‘crop’ the excess. Any frontend developers will be familiar with the object-fit: cover CSS property that mimics this behaviour.
Seeing all the text
As you can see in the image above, the text box behaves as if it has the ‘Left and Right’ horizontal constraint. Its width shrank in…
