How to Build a Swipeable Message List with Dynamic Panels in Axure

Creating a Swipeable Message List in Axure

Drag a Dynamic Panel onto the canvas, set its size to 750 px × 1334 px, optionally shrink the workspace for a better view, and rename the panel to Phone Screen.

Double‑click the dynamic panel to enter State 1 . Inside this state add a Rectangle that will serve as the container for the message list.

Populate the rectangle with the actual message items – text, icons, timestamps, etc.

Inside each list item add two more rectangles: one to act as an unread badge and another as a delete button.

Select all widgets created in State 1 and convert them into a new dynamic panel named Message List. Axure automatically clips any content that lies outside the panel’s bounds, so the unread badge and delete button are hidden while the panel is in its default state.

Note: Elements positioned outside the dynamic panel are not rendered; this behavior is used to hide the unread badge and delete button until a swipe reveals them.

Add an On Drag Left End interaction to the Message List panel. Before defining the action, preview the prototype, drag the panel leftward, and note the X‑coordinate where the panel should stop (e.g., -200). Configure the interaction to Move the panel to that X coordinate, which slides the list left and reveals the hidden delete button.

Add an On Drag Right End interaction for the opposite swipe direction. Use the positive X coordinate (e.g., 200) to move the panel back to its original position, thereby hiding the delete button again.

Content that exceeds the dynamic panel’s bounds is automatically hidden. Dynamic panels also support mouse drag events, making the same prototype usable on desktop browsers.