Frame vs Group in Figma: Which Should You Use?

• Size: a group is as big as its children. A frame has a size you set and keeps it when children move.
• Clip content: frames can hide anything that sits outside their bounds. Groups can't.
• Auto layout and layout guides: frames only.
• Fill, stroke, effects and corner radius: set on the frame itself. A group has no background of its own.
• Constraints: a frame's children can have constraints. Constraints set on a group are applied to the layers inside it.
• Prototyping: Figma lists it as a frame property, so build prototype screens as frames.

This is also why some options seem to vanish. Constraints and Fill container both depend on the parent being a frame, so a layer inside a group won't show them. See constraints not showing and Fill container vs Hug contents.

Groups still have a job. Because a group's bounds follow its children, it never clips anything and never needs resizing, which suits a logo built from several shapes, an illustration, or a quick bundle of layers you want to move or duplicate as one. If you later need padding, a background or auto layout, frame the group with ⌥⌘G (Ctrl+Alt+G) and keep going.

Frames are the default for everything else. Clip content is the property people miss most often: turn it on in the frame's settings and anything that hangs over the edge, like an image bleeding past a card, is cut off at the frame's bounds. A group can't do that.

Select the layers and press ⌘G (Ctrl+G) to group them, or ⌥⌘G (Ctrl+Alt+G) to wrap them in a frame. The frame shortcut also works on an existing group, which is the quickest way to turn a group into a frame. To draw an empty frame, press F or A and drag on the canvas, or pick a preset from the right sidebar.

Select the frame and press ⇧⌘G or ⌘Delete on Mac, or Ctrl+Shift+G or Ctrl+Backspace on Windows. The frame goes away and its children stay on the canvas. It's the same key that ungroups a group. Figma's help center documents these shortcuts; we couldn't confirm a menu item called "Remove frame" or "Unwrap", so use the keys.

Select the frame and press ⌥⇧⌘R (Mac) or Alt+Shift+Ctrl+R (Windows), or click the resize-to-fit icon in the Layout section. The frame shrinks or grows to the bounds of its children once.

If you want the frame to keep fitting as content changes, add auto layout with Shift+A and set its width and height to Hug contents. The walkthrough is in how to use auto layout in Figma.

Sections are a third container, for organising the canvas rather than building UI. Press Shift+S to draw one, or right-click a selection and choose Wrap in new section. A section can hold any layer, including other sections, and has its own fill and stroke. It supports "Ready for dev" status and prototyping.

• Sections can't sit inside frames or groups. They live on the canvas.
• Pressing Delete on a section removes the section and everything in it.
• ⌘Delete (Ctrl+Backspace on Windows) removes only the section and keeps its contents.

A common setup: sections group the screens of one flow, frames are the screens and the components inside them, and groups are reserved for small clusters of layers you move together, like an icon made of several shapes.