Axure Tutorial: Widget Group

Introduction

This article is a section of course Axure Full Course: Tutorial, Tips and Templates.

If you want to interact, move, and resize multiple widgets at once, you can group them.

Group/Ungroup widgets

Select the widget, right-click, and select Group from the menu; or select the group icon in the Style Toolbar to group widgets. The newly created group will automatically appear as a Group in the Outline pane.

The way to ungroup is similar, Select the widget, right-click, and select ungroup from the menu; or select the ungroup icon in the Style Toolbar to group widgets.

Add New Element to Group

There are two ways to add a new element(widget, component, dynamic panel,etc) to a group. One is to select the group, click the group again, enter the group, and then drag the new widget into the group.

Or by adjusting the element position of the Outline pane, drag the new element into the group.

Move and Resize Group 

When you move and resize a group, it defaults to changing the size and position of all elements in the group.

Add constrains to widget

If you don't want to change the size or move of some widgets in the group when resizing the group, you can add constrains to them. constrains include 4 directions as well as width and height.

Select an element in the group, and then add constrains in right style pane.

When importing files from Sketch, Figma or Adobe XD, their constrains will be preserved.

Interactions of group 

When you add an interaction to a group, the whole group will interact as an individual.

Widget Style Effects in Group

If you want the mouse interaction styles added by individual widgets in the group to work independently, such as changing the style of a widget when the mouse entering, you can check Apply Mouse Style Effects on All Widgets in group.

Push Widgets Below or to the Right

When show/hide or changing dynamic panels, if the Push widgets below item is selected, when pushing the group, the whole group will be pushed at the same time.

 

Interaction Event Conflicts between Group and Widgets within Group

If the interaction is set for both the group and the widgets in the group (such as hiding the element when the group and button in group and clicked), when the event triggering conditions are met at the same time and cause a conflict, only the elements in the group will be interacted with.

That's all for today's lesson, next lesson we'll learn components.

If you have any questions and suggestions, please leave a message.

If you like the article, please share it with others with page link, thanks for your supporting! ❤


Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design. 


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.