Imagine repositioning each of the elements individually or changing them one by one just to adjust their size. In UXPin you can work easier and faster than that.
Grouping is a basic function that allows you to create wonderful designs by bringing multiple elements together. What’s more, you can add interactions to the entire group and the action will apply to all its elements!
Grouping the elements
To group elements, select the ones you want on the canvas, then right-click on one. From the drop-down menu choose the “Grouping > group” option and you’re good to go! You can also group/ungroup them from the top of the right panel.
If it’s too much hassle, just try the shortcuts. Press “⌘ + G” on a Mac or “ctrl + G” on Windows to merge your elements. Use “⌘+ ⇧ + G” / “ctrl + shift + G” to pull them apart.
Editing elements inside the group
Once elements are grouped you can still edit each of them separately. Just double-click on the element you want to change. In this way, you enter group edit mode, indicated by a dashed blue line around the group. Now you are free to adjust element properties in the right panel.
You can select multiple objects within the group by pressing “shift/⇧” as you click on each.
Grouped elements behave like a single entity and are ready for batch editing. You can resize them, change their properties, and move them easily by customizing their settings in the right panel or adjust them by dragging their borders on the canvas.
You can also manage groups with the Layers menu in the left panel — for example, toggling the visibility of each object or the whole group. What’s more, you can add different elements to it easily: just drag the layer into the group folder.
One option is a game-changer when it comes to mobile prototyping. The ability to scroll cropped content allows you to fit multiple elements and interactions in limited mobile screen sizes. This creates highly interactive prototypes that behave just like regular smartphone apps.
To create a scrollable group, just select it, check “Crop selected content” in the right-hand “General properties” menu, and choose the scroll (vertical or horizontal) that interests you. After that, resize the group so it hides the elements you want to scroll to and preview your group.
If you’re looking for the real experience, don’t use the iPhone body, simply add the right mobile breakpoint and open the preview link on your smartphone!
Groups inside of groups
Once you have the basics covered, it’s time to move on to more advanced prototyping. When creating more complex prototypes with lots of elements, keeping track of your canvas and different parts of the design gets more difficult. Combining several groups into one layer helps to divide the prototype into clear sections and keeps it organized. It’s also helpful for creating interactions when multiple objects need to be grouped on different levels.
All you have to do is group the clusters like you did at the beginning with individual elements. Ungrouping the cluster doesn’t affect the nested groups. They will keep their properties and composition.
Each group keeps its structure and you are still able to edit individual elements or clusters, even when they’re a part of a nested group. You can even add states or symbols to the group! Go ahead and try it out in your UXPin! If you don’t have an account, sign up for a free trial to create wonderful designs and learn more about our features!