This feature enables you to combine or separate elements, allowing you to merge multiple elements into a single entity. This simplifies the process of designing interactions, making it easier to manage and manipulate complex layouts.
Note this features is not available to all customers yet.
Groups allow you to combine related elements to make further improvements to the interaction easier. The boundaries of these groups are indicated by a dashed line on the canvas. By grouping elements, you can easily locate the correct elements in element listing panel. Grouping also enables the reuse of the same group across multiple views, enhancing consistency throughout your design. You can also nest groups within other groups. So you could for example have registration form group inside right column group.
Furthermore, the position of all the elements inside the group element are relative to the group and not to the view. This allows you to for example add centered header for the group that always stays at it's center even if you would resize/move the group.
An essential aspect of using groups is their ability to be reused across various views. When styles are modified within a group, these changes are automatically applied in every view where the group is reused. You could for example create group for the background part of the interaction that is same in multiple views, and then use it in all the relevant views. Note that when you copy view it automatically reuses same groups as the original view. So changes from it will be applied also in the copied view.
Another key benefit of the groups feature is its capacity to enhance the development of responsive interactions. By utilizing groups in conjunction with breakpoints, you can quickly adjust the entire layout of your mobile interaction for desktop viewing. You are able to reposition multiple grouped elements simultaneously, rather than having to move each one individually. This also makes maintaining the interaction easier as only few elements/groups have different placement in desktop and mobile mode.
How to create a custom group
To create a custom group, simply select multiple elements and right-click to open the context menu. From there, you will find the option to group the elements together.
You can also use keyboard shortcuts after selecting the elements: on Windows (Ctrl + Alt + G), on a MacBook (Ctrl + Option + G).
The ungroup option is only visible in the context menu when right clicking on a group.
Select the group element and right click to open the context menu where you will find the ungroup option. You can also use keyboard shortcuts after selecting a group element: on Windows (Shift + Ctrl + Alt + G) , MacBook (Shift + Ctrl + Option + G).
When elements are grouped, a new group element is created in the element listing and the selected elements become its children. These children are linked to the group element, preventing them from being moved outside of it. The group element is visually indicated by a dotted border. To visualise the structure of a group elements and their children, you can open to the elements list where they are displayed in a hierarchical tree format.
The elements list provides a clear visualisation of the hierarchy between ungrouped and grouped elements:
| Ungrouped elements | Grouped elements |
 |
 |
In the above image of elements list, you can see Group 1 is the group element and it has Select 2, Input 3 and Input 2 as its children.
In the element listing below, you can see how easily elements can be dragged in and out of the group. Additionally, by right-clicking on any element in the group, you can access a context menu that allows you to perform multiple actions on each element.
Reusing group elements
Existing groups are conveniently accessible in the element picker for your use. In addition of your groups the picker also contains a example product card group. This group serves as a demonstration of how grouping works, incorporating layout and styles. In the design view, the group element is visually indicated by a dotted border, as illustrated below.
In conclusion, groups offer a powerful and flexible feature for managing and reusing elements across multiple views. By creating custom groups, users can streamline the design process, ensuring that style changes and responsive interactions are easily maintained across different layouts. With intuitive grouping, ungrouping, and reordering options, you can efficiently organise elements.
Overall, the ability to reuse groups not only enhances consistency but also simplifies the design workflow, making it an essential feature for building responsive and well-structured interactions.