Dynamic Panels

Dynamic Panels are widgets that can hold other elements in your prototypes. They’re like mini-Canvases that you can place elements into and switch between when you’re simulating your prototype.

You can use them to mask elements and display different content in the same area of a screen, like navigation tabs and pop-ups.
Tab navigation with dynamic panels
Each dynamic panel contains one panel by default, but you can add more once you’ve added one to the Canvas. You’ll only be able to view one panel at a time.

Create a dynamic panel

You can find dynamic panels in the Toolbar dropdown under ‘Dynamic content’ or by hitting the D key.
A dynamic panel on the canvas. Find it in the Toolbar under dynamic content.
After you’ve placed one on the Canvas, you’ll notice a floating menu near it. You can add more panels by clicking the ‘+’ button in the menu. You can also use this menu or the Layers palette to switch back to view and edit your other panels.
Click on the plus button on the floating menu to add another panel

Add, move, and delete elements

Add elements to a panel

Use Command/Control keys

You can place elements into a dynamic panel by holding the Command (Mac) or Control (Windows) key and dragging an element or group of elements inside. You’ll see the panel tint blue when you’re adding an element to it.

Right-click

Select an element or group of elements, right-click, go to Group, and then select ‘Group in Dynamic Panel’. All of the elements you selected will now be within a dynamic panel.
Select elements on the Canvas and right click to group them in a dynamic panel

Move and delete elements in a panel

Activate the direct selection tool by hitting the A key or choosing it in the Toolbar. The direct selection tool allows you to quickly choose an element inside a dynamic panel or in a group. You can then move that element around within the panel, or place it outside of the panel’s area to remove it from the panel.
Use the A key to activate the direct selection tool.
Switch back to regular selection by hitting the V key.

Duplicate and remove panels

You can duplicate a panel and the elements inside it by right-clicking on a panel and selecting ‘Duplicate Panel’.

Remove a panel by right-clicking on it and selecting ‘Remove Panel’. Note that all of the elements within that panel will also be removed.

The default panel

Every dynamic panel has a default panel, Panel 1, that will show first when you simulate your prototype. To change another panel to be the default panel:
Select a dynamic panel in the layers palette and change the default panel in the properties palette

  1. Select the dynamic panel
  2. Go to the Properties palette
  3. Select a different panel from the ‘Def. (default) panel’ dropdown.

Events with panels

Set Active Panel

While you can use the floating menu to switch between panels while you’re editing, you’ll need to use a Set Active Panel action to switch between them during simulation.

Choose a trigger to start the event (clicking on a button, for example), then find the Set Active Panel action in the Actions dropdown. Once you’ve selected it, you’ll see the Canvas preview, where you can select the panel you’d like to switch to (set as active). You may find it easier to select the panel from the dialog Layers palette.
Choose the set active panel action and choose a panel to set as active

On Panel Active

You can create events that trigger whenever you switch to a specific panel with the On Panel Active trigger.

On Panel Active is useful for creating repeating events, like slideshows and countdown timers. For example, you can combine Pause actions with On Panel Active + Set Active Panel events to create a slideshow that will switch between panels automatically.

Common uses for dynamic panels

You can use dynamic panels in many different ways – from creating confirmation dialogs and modal windows, scrolling areas, floating headers, slideshows, and so much more. [all these will be linked]
Scroll in the dynamic panel and the rest of the screen will not scroll
Continue on to the next article with dynamic panel exercises to learn how to build those common use cases, or check out some of the tutorials linked above.