Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Contact Us
  • Home
  • Figma Design – Figma Learn
  • Create designs
  • Create and edit layers

The difference between frames and groups

Written by Figma Man

Updated at June 19th, 2025

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Administration – Figma Learn
    Manage files and projects Manage a team Manage your account Manage a Figma organization Manage Enterprise plan settings and permissions Billing Manage Figma in a school
  • Figma Design – Figma Learn
    Create prototypes Import and export Create designs Tour the interface Dev Mode Work together in files Build design systems Figma Draw
  • Get started – Figma Learn
    Set up your account Layers 101
  • FigJam – Figma Learn
    Import and export Run meetings Work on boards Tour the interface
  • Community – Figma Learn
    Explore the Community Creator tools and resources
  • Help – Figma Learn
    Troubleshoot Common questions Work with support
  • Work across Figma – Figma Learn
    Figma AI Work across Figma
  • Courses, tutorials, projects – Figma Learn
    Courses Projects
  • Figma Slides – Figma Learn
    Create and edit slides Present slide decks Tour the interface Import and export
  • Figma Buzz – Figma Learn
    Templates in Figma Buzz Create and edit assets in Figma Buzz Overview
  • Figma Make – Figma Learn
    Tour the interface Work with Figma Make
  • Figma Sites – Figma Learn
    Design a site Create webpages and breakpoints Make your site interactive Preview and publish a site Tour the interface
+ More

Table of Contents

Groups Frames

Before you Start

Who can use this feature

Available on all plans

Requires can edit access to a file

Groups and frames allow you to combine layers together so that they can be treated like a single layer.

Groups

By default, groups take on the combined dimensions of their children.

  • To make a group, select some layers and choose “Group”, or use:
    • Mac: Command G
    • Windows: Control G
  • The first time you click on a layer in this group, the entire group will be selected.
  • To select a single layer within this group, double-click the item, or choose it from the layers panel.
  • As the layers within a group are moved around, the bounds of the group will adjust to fit the layers within.
  • You can move things into and out of this group by dragging layers within the layers panel.
  • You are allowed to nest groups inside other groups.
  • To un-group, select the group and choose “Ungroup”, or use:
    • Mac: Shift Command G or Command Delete
    • Windows: Shift Control G or Control Backspace

Frames

Sometimes, it is useful to have a layer whose size is explicitly set by you. These are called Frames.

  • To make a frame, choose the Frame Tool F and drag out an area of the screen, or use:
    • Mac: Command Option G
    • Windows: Control Alt G
  • To add layers to this group, just drag them in.
  • To remove layers from this group, just drag them out.
  • Selecting and moving items within a Frame works exactly the same way as groups.
  • To un-group, select the group and choose “Ungroup”, or use:
    • Mac: Shift Command G or Command Delete
    • Windows: Shift Control G or Control Backspace

Frames are drawn directly on the canvas and we draw them in a special way to make them easier to see and work with.

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Shape tools
  • Arc tool: create arcs, semi-circles, and rings
  • Masks
  • Frames in Figma Design
  • Sketch on the canvas with the pencil tool
  • Blog
  • Best practices
  • QR code generator
  • Color wheel
  • Colors
  • Color picker
  • Color palettes
  • Color palette generator
  • Color contrast checker
  • Font Library
  • Templates
  • Developers
  • Integrations
  • Affiliate program
  • Resource library
  • Reports and insights
  • Support
  • Status
  • Legal and privacy
  • Modern slavery statement
  • Climate disclosure statement
  • COMPARE
  • Sketch
  • Adobe XD
  • Framer
  • Miro
  • COMPANY
  • Events
  • Customers
  • Careers
  • Newsroom
Expand