Grouping and Ungrouping are important Figma techniques used to organize multiple objects and layers efficiently. Grouping allows designers to combine multiple objects into a single manageable group so they can be moved, resized, rotated, or arranged together. Ungrouping separates the grouped objects again so that each individual layer can be edited independently.
For structured Figma learning, visit JustAcademy Figma Training and Register for Figma Course Demo.
Grouping is the process of combining two or more selected layers or objects into one group. The individual objects remain separate inside the group, but Figma allows the complete group to be treated as a single top-level layer.
For example, a logo may contain a circle, text, and several decorative shapes. Instead of moving each object separately, you can group them and move the entire logo as one unit.
Before Grouping:
Circle
Text
Star
Rectangle
↓
Select all objects
↓
Group
↓
Logo Group
├── Circle
├── Text
├── Star
└── Rectangle
Ungrouping is the process of removing the group container and returning its child layers to individual layers. It is useful when you need to edit, move, resize, delete, or rearrange individual objects that were previously grouped.
Grouped Object
↓
Ungroup
↓
Circle
Text
Star
Rectangle
Ungrouping does not delete the individual objects. It removes the group relationship and keeps the objects available for independent editing.
Grouping makes complex designs easier to manage. When a design contains many objects, selecting and manipulating every object individually can become time-consuming.
| Action | Windows | Mac |
|---|---|---|
| Group | Ctrl + G | Command + G |
| Ungroup | Ctrl + Shift + G | Command + Shift + G |
| Alternative Ungroup | Ctrl + Backspace | Command + Delete |
| Select All | Ctrl + A | Command + A |
| Deselect | Esc | Esc |
Use the standard Group and Ungroup shortcuts to quickly organize or separate selected layers.
Before grouping objects, you need to select the objects that should belong to the group.
You can select multiple layers directly from the Layers panel. This is especially useful when objects overlap and are difficult to select directly from the canvas.
Grouping objects in Figma is a simple process.
Rectangle + Circle + Text
↓
Select Objects
↓
Ctrl + G
↓
Group
↓
Group
├── Rectangle
├── Circle
└── Text
You can also create a group without using the keyboard shortcut.
This method is useful when learning Figma because the available command is visible in the context menu.
The Layers panel provides another convenient way to manage grouped objects.
Layers
├── Rectangle
├── Circle
├── Heading
└── Button
↓
Select related layers
↓
Group
↓
Layers
└── Card Group
├── Rectangle
├── Circle
├── Heading
└── Button
After grouping, Figma displays the group as a parent layer containing child layers.
Group
├── Background
├── Icon
├── Title
└── Description
The group is the parent, while the objects inside the group are child layers. Selecting the group allows the complete collection to be managed as a unit.
Grouping introduces a parent-child relationship between the group and its objects.
| Term | Meaning |
|---|---|
| Parent | The group that contains other layers. |
| Child | An object or layer inside the group. |
| Sibling | Objects that exist at the same hierarchy level. |
Product Card Group ← Parent
├── Product Image ← Child
├── Product Name ← Child
├── Product Price ← Child
└── Buy Button ← Child
When you click a grouped collection, Figma can select the group as a unit. To work with a nested child layer, you can use the Layers panel or enter the group and select the required object.
This makes it possible to manage the complete group without permanently removing its internal structure.
Sometimes you need to edit only one object inside a group without ungrouping the entire group.
This approach is useful because you do not need to destroy the group structure just to modify one object.
Deep selection is useful when multiple levels of groups or frames exist. You can use the Layers panel or enter nested groups to select the required layer directly.
Dashboard Group
├── Header Group
│ ├── Logo
│ └── Navigation
└── Content Group
├── Card Group
│ ├── Image
│ └── Title
└── Button
When working with deeply nested designs, the Layers panel can make selecting the correct object easier.
Once objects are grouped, you can move the entire group as one unit.
Before:
[Icon] [Text] [Button]
Drag Group
↓
After:
[Icon] [Text] [Button]
A group behaves as a combined collection of its child objects. Its visible bounds are based on the objects inside it. When child objects are moved or resized, the group's bounds can change accordingly.
For example, if a group contains a circle and a rectangle and the rectangle is moved farther away, the group's overall bounds expand to include the new position.
You can rotate a complete group instead of rotating every object individually.
Original:
┌─────────┐
│ Logo │
└─────────┘
↓ Rotate 45°
╱──────
╱ Logo
╱──────
Grouping is commonly used when several shapes form one visual element.
For example, a cloud illustration can contain several circles and a rectangle.
Cloud Illustration
├── Circle
├── Circle
├── Circle
└── Rectangle
↓
Group
↓
Cloud Group
Text can be grouped with shapes to create visual arrangements such as labels, buttons, badges, and cards.
Button Design
├── Rounded Rectangle
└── "Buy Now"
↓
Group Button
Grouping allows the rectangle and text to move together without requiring separate selections.
Many icons are constructed from multiple vector shapes. Grouping these shapes makes the icon easier to move and organize.
Search Icon
├── Circle
└── Handle
↓
Search Icon Group
Grouping is especially useful when creating custom icons from multiple simple shapes.
A logo may contain multiple shapes, text layers, lines, and decorative elements. Grouping them allows the logo to behave as a single design object.
Logo
├── Symbol
├── Brand Name
├── Tagline
└── Decorative Shape
↓
Logo Group
If you later need to modify a particular part, you can select the individual child layer without permanently destroying the group structure.
A simple card can be created from multiple layers and grouped when you need to move the collection as a unit.
Product Card
├── Product Image
├── Product Name
├── Price
├── Rating
└── Button
↓
Product Card Group
For production UI layouts, however, a Frame with Auto Layout is often more suitable when the card needs responsive resizing and structured spacing.
Navigation elements such as icons, labels, and decorative elements can be grouped when they need to be managed together.
Navigation Item
├── Home Icon
└── Home Text
↓
Navigation Item Group
For dynamic navigation systems, components and Auto Layout may provide more structure than simple grouping.
Ungrouping removes the group relationship and returns the child layers to the group's parent level.
Before:
Product Group
├── Image
├── Title
├── Price
└── Button
↓
Ungroup
↓
Image
Title
Price
Button
You can also ungroup an object through the context menu.
The Layers panel can be used to identify the group that needs to be removed.
Ungrouping removes the parent group but preserves the individual child objects. Their visual content remains available for editing.
| Before Ungroup | After Ungroup |
|---|---|
| One parent group | No group parent |
| Objects are children | Objects become independent |
| Group selected as one unit | Objects selected individually |
| Group relationship exists | Group relationship removed |
| Grouping | Ungrouping |
|---|---|
| Combines selected layers into a group | Removes the group relationship |
| Creates a parent layer | Removes the parent group |
| Makes objects easier to move together | Makes objects easier to edit separately |
| Uses Ctrl + G / Command + G | Uses Ctrl + Shift + G / Command + Shift + G |
| Useful for organization | Useful for individual editing |
Groups and Frames can both contain multiple objects, but they are designed for different purposes.
| Feature | Group | Frame |
|---|---|---|
| Combines objects | Yes | Yes |
| Independent container dimensions | No | Yes |
| Auto Layout | Can be applied to selection/group | Yes |
| Constraints | Limited compared with frames | Yes |
| Layout grids | No | Yes |
| Clipping content | No | Yes |
| Simple object organization | Excellent | Useful but more structured |
| Responsive UI structure | Usually not the primary choice | Recommended |
Groups are useful for simple organization, while frames provide additional layout and container capabilities for structured UI design.
Auto Layout can be applied to selected layers and is commonly used for structured interface layouts. When designing responsive interfaces, it is important to decide whether simple grouping is sufficient or whether a frame-based Auto Layout structure is more appropriate.
Selection
├── Icon
├── Text
└── Button
↓
Shift + A
↓
Auto Layout Structure
Groups can be nested inside other groups. This is useful for organizing complex illustrations and designs into multiple logical levels.
Dashboard Illustration
└── Main Group
├── Header Group
│ ├── Logo
│ └── Menu
├── Chart Group
│ ├── Bars
│ └── Labels
└── Footer Group
├── Icon
└── Text
Nested groups can make complex artwork easier to manage, but excessive nesting can make the Layers panel difficult to navigate.
Grouping is not the same as creating a component. A group is mainly used to manage a collection of objects, while a component is intended to create reusable design elements.
| Group | Component |
|---|---|
| Organizes objects | Creates reusable design elements |
| Useful for simple object management | Useful for design systems |
| No component instances | Supports instances |
| Easy to ungroup | Component structure has different rules |
Grouping and Boolean operations are also different concepts. Grouping keeps objects as separate child layers inside a group, while Boolean operations combine supported vector or shape layers into a Boolean structure.
| Grouping | Boolean Operation |
|---|---|
| Organizes multiple objects | Combines shapes using geometry |
| Objects remain separate | Creates a Boolean group structure |
| Useful for organization | Useful for creating complex shapes |
| Can be ungrouped | Can be edited as a non-destructive Boolean operation |
Suppose a button contains a rounded rectangle and text.
Button
├── Rounded Rectangle
└── Login Text
↓
Select both
↓
Ctrl + G
↓
Login Button Group
Now the button can be moved as one unit. If the text needs editing, select the text layer inside the group.
Profile Icon
├── Head Circle
├── Body Shape
└── Background Circle
↓
Select all
↓
Group
↓
Profile Icon Group
The complete icon can now be moved or rotated without selecting each individual shape.
Product Card
├── Product Image
├── Product Name
├── Product Rating
├── Product Price
└── Buy Button
↓
Group
↓
Product Card Group
This approach is useful for simple static layouts. For responsive cards, Auto Layout and Frames are usually more appropriate.
Imagine a logo has been grouped and you need to change only its brand name.
If the entire logo structure needs to be reorganized, select the group and use Ungroup.
Meaningful names make large Figma files easier to understand.
| Poor Name | Better Name |
|---|---|
| Group 1 | Primary Navigation |
| Group 2 | Product Card |
| Group 3 | Profile Icon |
| Group 4 | Hero Illustration |
| Group 5 | Footer Links |
Identify Related Objects
↓
Select Multiple Objects
↓
Check Selection
↓
Ctrl + G / Command + G
↓
Rename Group
↓
Verify Layers
↓
Continue Designing
Select Group
↓
Check Group Contents
↓
Ungroup
↓
Individual Layers
↓
Edit Required Objects
↓
Reorganize Layers
↓
Regroup if Necessary
Illustrations often contain many small shapes. Grouping related shapes helps maintain the structure of the illustration.
Character Illustration
├── Head Group
│ ├── Face
│ ├── Eyes
│ └── Hair
├── Body Group
│ ├── Shirt
│ └── Arms
└── Accessories Group
├── Bag
└── Shoes
Each major part can be managed independently while smaller elements remain organized inside nested groups.
Marketing banners frequently contain text, images, shapes, logos, and badges. Grouping related decorative elements can simplify editing.
Promotion Banner
├── Background
├── Product Group
│ ├── Product Image
│ └── Shadow
├── Text Group
│ ├── Heading
│ └── Description
└── CTA Group
├── Button
└── Button Text
Dashboard designs may contain charts, labels, icons, and supporting text. Groups can help organize simple visual collections.
Dashboard
├── Header Group
├── Revenue Card Group
├── Sales Card Group
├── User Card Group
└── Chart Group
For complex responsive dashboard layouts, frames and Auto Layout generally provide more layout control than simple groups.
A well-organized Layers panel makes collaboration and editing easier.
Mobile App
├── Header
├── Hero Section
├── Category Group
│ ├── Food
│ ├── Drinks
│ └── Desserts
├── Product Group
│ ├── Image
│ ├── Name
│ └── Price
└── Bottom Navigation
Use grouping to represent logical relationships rather than grouping objects randomly.
A group automatically derives its bounds from its children, while a frame can maintain dimensions independently of its contents. This difference becomes especially important when designing responsive interfaces.
GROUP
Bounds ← determined by children
FRAME
Frame Size ← controlled independently
Children ← arranged inside frame
Yes. Figma supports nesting groups inside other groups. This makes it possible to create hierarchical structures for complex illustrations and design elements.
Main Group
├── Group A
│ ├── Object 1
│ └── Object 2
└── Group B
├── Object 3
└── Object 4
Although nesting is useful, avoid unnecessary levels because excessive nesting can make selection and layer management more difficult.
A component is not simply an ordinary group. Components and instances have their own reusable design-system behavior and should not be treated exactly like ordinary groups. If you need to modify a reusable component, use the appropriate component and instance workflows instead of treating it as a normal group.
| Structure | Main Purpose | Typical Use |
|---|---|---|
| Group | Organize related objects | Icons, illustrations, simple collections |
| Frame | Create a structured container | UI screens, cards, layouts |
| Component | Create reusable design elements | Buttons, inputs, navigation |
| Boolean Group | Combine shape geometry | Icons and custom vector shapes |
Grouping combines multiple selected objects into a single manageable group while keeping the individual layers inside the group.
Use Ctrl + G on Windows or Command + G on Mac.
Use Ctrl + Shift + G on Windows or Command + Shift + G on Mac.
No. Grouping creates a parent-child structure. The individual layers remain editable.
Yes. Groups can be placed inside other groups.
A group primarily organizes related layers, while a frame provides an independently controlled container with additional layout features such as constraints, clipping, and layout grids.
Yes. You can enter the group or select the child layer from the Layers panel.
For structured responsive interfaces, Frames and Auto Layout are generally more suitable because they provide stronger layout controls.
The group container is removed and its child objects become independent layers while remaining on the canvas.
Meaningful names make large files easier to navigate, understand, maintain, and collaborate on.
Grouping and Ungrouping are fundamental Figma skills for managing multiple objects efficiently. Grouping lets designers organize related layers and manipulate them together, while Ungrouping restores individual layer-level control. Understanding the difference between Groups, Frames, Components, and Boolean structures helps designers choose the correct Figma feature for each design situation.
For complete professional Figma learning, explore JustAcademy Figma Training and Register for Figma Course Demo.
