Dynamic Panels for High-Fidelity Prototyping

High-fidelity prototypes are great for user testing, demonstrating UX to stakeholders, and providing clarity for developers. The dynamic panel widget is a powerful and flexible tool to make your prototypes more realistic.

A dynamic panel is a container that holds other widgets in “states.” A dynamic panel can have one state or many, and only one of its states is visible at a time. The visible state can be set dynamically with the Set Panel State action, which makes dynamic panels perfect for creating carousels and slideshows.

Dynamic panels are unique in that they support interactions for dragging and swiping. They are also the only widget that can be pinned to a fixed position in the browser window, making them the ideal choice for always-visible navigation like sticky headers and sidebars.

Here are a few ways that you can use dynamic panels to take your high-fidelity prototypes to the next level:

• Prototype drag-and-drop behavior using a “Move with drag” action
• Make a draggable slider with drag boundaries
• Create an image carousel using the “Set Panel State” action
• Add swipe interactions to transition states for mobile apps
• Add vertical and horizontal scrollbars to create a scrollable region within the page
• Make sticky header navigation using the “Pin to browser” property
• Prototype a floating chatbot pop-up

For a step-by-step tutorial on how to use a dynamic panel, check out our reference guide and YouTube channel.

New to Auxre RP? Download a free 30-day trial!