Group, ungroup, and frame layout
Use groups and frame layout to organize layers into logical containers.
Groups
A group combines multiple layers into a single selectable unit. Groups move, resize, and transform together but do not clip their children (unlike frames).
Grouping layers
- Select two or more layers on the canvas.
- Press ⌘G (Mac) / Ctrl+G (Windows), or right-click and choose Group.
The selected layers are placed inside a new group layer.
Ungrouping
- Select a group.
- Press ⌘⇧G (Mac) / Ctrl+Shift+G (Windows), or right-click and choose Ungroup.
The group is dissolved and the child layers are placed directly in the parent container.
Selecting inside a group
- Click selects the group.
- Double-click enters the group and selects a child layer.
- ⌘+click / Ctrl+click selects a specific layer inside the group without entering it.
Frame auto-layout
Frame layout can arrange child layers with automatic spacing — similar to auto-layout in other design tools. Select a frame and use the inspector's layout controls to lay its children out in a row or column with consistent gaps.
Adjusting frame layout
Select the frame and use the frame layout controls to:
- Switch between horizontal or vertical direction
- Set the gap between items
- Configure alignment
Image stack layers have their own image-stack behavior and do not use these generic layout controls.
Groups vs. frame layout
| Container | Clips children | Auto-layout | Use when |
|---|---|---|---|
| Group | No | No | Layers that move together but don't need clipping |
| Frame layout | Yes | Optional | Containers that should clip overflow or arrange children in a row/column |
Tips
- Name groups clearly — unnamed groups labeled "Group 1" become hard to navigate in complex designs.
- Prefer frame layout when contents should have consistent spacing.
- Prefer frames when the container needs a specific size or should clip overflow.