Widget Groups

When you have several widgets you'd like to treat as one item for purposes of moving, editing, or applying interactions, you can group them. Then instead of working with each widget separately, you can work with the group itself to affect all of its contained widgets.

Grouping and Ungrouping

To group two or more widgets together, select them and click Group in the top toolbar. To break apart a group of widgets, select it and click Ungroup.

Groups appear in the Outline pane as folders, and contained widgets are listed under the folder. You can add a widget to an existing group by dragging it into the group's folder. Similarly, you can remove a widget from a group by dragging it out of the folder.

You can also add widgets to a group on the canvas. Double-click the group to select one of its contained widgets. This will place a thick border around the entire group, showing its boundaries. Any widgets you add to the canvas while in this mode will be added to the group.

Editing a Group and Its Contents

Edits you make to a group are also applied to its contained widgets. Changing a group's dimensions will proportionally resize widgets in the group, and editing a group's style properties, such as font face or fill color, will apply those changes to the contained widgets as well.

Note

Group-level changes are only applied to widgets for whom the change is possible. For example, repeater widgets cannot be resized, so a repeater in a group will not be resized when the group is resized.

To edit the widgets in a group individually, double-click one of the contained widgets on the canvas or select it in the Outline pane.

Resizing Constraints

You can apply resizing constraints to widgets in groups (or to groups contained within a parent group) in the Style pane in order to lock a widget’s distance from an edge of a group, or the vertical or horizontal center of the group.

Then, whenever a group is resized, any widgets or nested groups with constraints applied to them will always maintain their absolute distance from the pinned edge, or from the vertical or horizontal center, depending on which options you have enabled.

You can also lock the widget’s width or height whenever a group is resized by selecting the Fix Width or Fix Height icons.

Constraints can also be imported from assets that are copied and pasted into Axure RP via the Sketch, Figma, and Adobe XD plugins.

Special Interactions

Push/Pull on Groups

When showing or hiding a widget, or changing a panel state, you have the option to push and pull widgets below or to the right in order to make room for the shown widget, or close the space vacated by the hidden widget.

With widget groups, the entire group will be pushed or pulled as long as the bounding box for the group falls within the move zone, which is the area below the top-left of the reference widget being shown or hidden.

If a group’s bounding box is not within the move zone, then the whole group will not be pushed or pulled. Instead, only individual widgets within the group that are in the move zone will be pushed or pulled.

Fire Mouse Style Effects

By default, widgets with mouse style effects inside groups work as usual: The style effect is shown when you mouse over or click on the widget in the web browser. You can, however, choose to fire the style effects of all contained widgets at once when you mouse over or click on any part of the group itself, including any empty space between widgets.

To do so, select the group and check the box for Fire Mouse Style Effects in the Interactions pane.

Targeting Groups with Actions

Actions can be applied to groups just like any other widget type. When configuring actions like Show/Hide Widget, you can choose a group to show or hide instead of an individual widget. This will hide the group along with all of its contained widgets.

Tip

Use a widget group when you want to show or hide a user input form, a dialog, or a modal.

Interactions on Groups VS Contained Widgets

Groups have some of the same events as their contained widgets might have (Click or Tap, for example), which can potentially lead to conflicts. If a group and one of its contained widgets have actions set up on the same event, the widget's actions will be executed instead of the group's.