updated on 13 January 2019 | reading time: 2 minutes

Organizing your designs

Groups

Groups are sets of objects that are treated as a single object. Elements in the group retain all their properties like fills, borders, and effects. You can move, rotate, resize, change blending and opacity, as well as apply effects to a whole group.

To group selected objects use / CTRL + G, menu Modify > Group Selection or use a Group button on the main toolbar.

To ungroup use Modify > Ungroup Selection, shortcut  / CTRL + / SHIFT + G or Ungroup button on the main toolbar.

 Group and Ungroup icons in the toolbar.

 

Note: Ungroup command will ungroup not only groups but also compound shapes and clipped (masked) content.

 

Alternatively, you can use the context menu to Group and Ungroup objects.

Selecting elements within the Group

When clicking on a group – the first click selects the whole group, the second click takes further in the hierarchy and selects object inside when the cursor is pointing

You can select elements inside the group in the layers panel like any other object. If the Group is collapsed click on the arrow next to the Group name to expand.

Groups have a checkbox for “Click-through this element” in the Inspector panel. Ticking this box allows a single click to select an element within the group for changes. This can be useful if you have to make multiple changes to elements of a group.

Frame mode

Using a drop-down in the Inspector panel, groups can change between:

  • Group mode (default) – resizing the group stretches all its elements
  • Frame mode – individual elements will resize or move depending on their anchoring properties. See the section on anchoring for more details. Note: when a group has been switched to frame mode, the group bounding box also acts as a clipping area. Frame mode can be very useful for making responsive UI elements.

If you set the anchoring properties for any element within a group, the group will automatically change to Frame mode.