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:
- Add vertical and horizontal scrollbars to create a scrollable region within the page
- Prototype drag-and-drop behavior using a “Move with drag” action
- Create an image carousel using the “Set Panel State” action
- Add swipe interactions to transition states for mobile apps
- Make a draggable slider with drag boundaries
- Make sticky header navigation using the “Pin to browser” property
- Prototype a floating chatbot pop-up
All States View
With the dynamic panels’ all states view, prototyping with large or complex panels is easier than ever, since you can view and edit each state right alongside one another. To do so, click the View All States option from the dynamic panel context bar. This allows you to easily compare and contrast each state, and make edits within the context of viewing the entirety of the dynamic panel.
To learn more about using dynamic panels, check out our dynamic panels Core Training tutorial or our dynamic panels reference guide. As always, if you need any help or want to submit feedback, you can contact us at firstname.lastname@example.org. Happy Prototyping!