Learn how to prototype web and mobile apps

How to use Dynamic panels in your interactive wireframes

The Dynamic Panel is an advanced widget that consists of a group of panels that act as containers of widgets in your interactive wireframes.

Widgets can be moved into a Dynamic Panel so you can have them grouped and move them easily without having their relative position locked as with groups.

Only one container is displayed at a time, while all the others remain hidden. When a Dynamic Panel is created, it only has a single container, but you can add as many as you wish.

Creating panels

To create a new panel:

1. Select a Dynamic Panel and a floating toolbar will appear at the top edge. The toolbar can also appear at the bottom edge of the Dynamic Panel if there is no space to display it at the top.

2. Click on the ‘+’ icon in the top-left corner of the widget.

 Dynamic panel widget in your interactive wireframe

Selecting panels

When you select a panel it will automatically appear, hiding the current one simultaneously, allowing you to edit the content of the selected panel. To select a panel:

  1. Select a Dynamic Panel and a floating toolbar with a drop down control will appear. The drop down contains the list of panels of the Dynamic Panel.
  2. Click on the drop down to open it.
  3. Select the panel you want to show.

Dynamic Panel widget dropdown in interactive wireframes


Removing panels

To remove a panel:

  1. Make sure you’re in the tab you want to remove.
  2. Right-click on the Dynamic Panel and select the option Remove panel.

Remember: If you simply click ‘Delete’, you will be deleting the entire dynamic panel and any widgets contained within it.

Editing the panels name

The panels are automatically labelled when you create them, but can be changed. Change the active panel name in the Properties tab after selecting the Dynamic Panel in the canvas.

The default panel

Every Dynamic Panel has a default panel which is the one that will be displayed when starting the simulation of the prototype. Change the default panel in the Properties tab after selecting the Dynamic Panel in the canvas.

Add items to a Dynamic Panel

You can add as many widgets as you like in a Dynamic Panel.

  1. To add widgets, drag a Dynamic Panel widget into the canvas.

2. Select the Dynamic Panel, right click, then select ‘Edit Content’ (Or, select the Dynamic Panel, then double click on it). Now you can simply draw or drag and drop items inside.

Interactive wireframe dynamic panel: add content

 To automatically create a Dynamic Panel that contains a set of widgets, first select the widgets and right-click on any of them. Then select the option Group into Dynamic Panels”.

Interactive wireframe dynamic panel: groups of widgets

Remove an item from a Dynamic Panel

If the edition of the panel is active, drag the item out of the Dynamic Panel. If not, go to the outline, select the object and drag out the Dynamic Panel.

Interactive wireframe dynamic panel: remove content

Next tutorial > Design Dynamic Forms in your interactive wireframes