Learn how to prototype web and mobile apps

How to group UI elements in your interactive wireframes

In your interactive wireframes, you can group two or more UI elements and treat them as a single one. In this tutorial we’ll show you how to do so.

Drag and drop the following elements widgets into the canvas: a circle, a rectangle, and a triangle. Select all of these items, right click and then select ‘Group’ (TIP: you can also hit CTRL+G).

Interactive prototype widgets group example

If you want to add a new item to this group, you can either (a) create a group within a group, or, (b) add this item into the current group.

(a) Select the group you just created and the item you want to add, right click on it and then select ‘Group’.

Interactive prototype widgets group - Outline example

Note that you need to select all the elements in their entirety to be able to group them (or modify them in any way).

(b) If you want to add this item into the current group, go to the outline, select the element and drag it into the group.

Interactive Prototype Widgets group outline

If you want to remove an element from a group, go to the outline and drag the object outside the group.

Note: the grouping function is very important for radio buttons. Only when you group them will they act in sync (when one is selected, the other cannot be).

Next tutorial > Input UI Elements for your prototypes