Time Interactions & Adding Audio (Sound Effects)

Topics Covered in This Adobe XD Tutorial:

Master advanced interaction design by implementing drag interactions, time-based triggers, immersive sound effects, and keyboard shortcuts—essential skills for creating production-ready prototypes.

Exercise Preview

Exercise Overview

In this hands-on exercise, you'll craft a sophisticated "drag to delete" interaction for a Messages app interface. This tutorial demonstrates how to combine multiple interaction types—drag gestures, timed animations, audio feedback, and keyboard controls—to create the polished, intuitive user experiences clients and stakeholders expect in 2026. While simple swipe-to-delete functionality might seem straightforward, executing it properly requires understanding the nuanced interplay between visual feedback, timing, and user control that separates amateur prototypes from professional presentations.

Getting Started

1. In Adobe XD, go to File > Open from Your Computer or hit Cmd–Shift–O (Mac) or CTRL–Shift–O (Windows).

2. Navigate into Desktop > Class Files > Adobe XD Class and double–click on Messages App.xd to open it.

   We've already created the layout and graphics for this design, so you can focus entirely on prototyping the sophisticated functionality that enables swipe-to-delete behavior on the Erin Steed message. Since Adobe XD's component system has limitations with complex state changes, we'll implement this interaction on a single message row—a common approach when demonstrating advanced functionality to clients and development teams. This targeted implementation provides a clear proof-of-concept that developers can reference when building the production feature across all message rows.

3. In the Toolbar, choose the Select tool .
4. Click on the red trash can graphic to select it.
5. Cut it by hitting Cmd–X (Mac) or CTRL–X (Windows).
6. Now we need to embed the delete affordance within the message structure itself. Double–click on the Erin Steed message row to enter the component instance, where we'll position the red deletion bar off-screen for the reveal animation.
7. Paste the red bar by hitting Cmd–V (Mac) or CTRL–V (Windows).

8. As shown below, hold Shift and drag the red bar to the right so its edge touches the edge the artboard (it will snap into place).

   

9. Click in an empty area of the canvas to deselect all elements. The red bar will disappear from view—this is intentional positioning for the interaction we're building.
10. Select the artboard by clicking on the artboard name Messages (at the top left of the artboard).
11. Duplicate it by hitting Cmd–D (Mac) or CTRL–D (Windows).
12. Rename the new artboard by double–clicking the Messages – 1 name at the top left and change it to Delete.

13. Drag the Delete artboard down slightly (by dragging its name to move it).

    Proper artboard spacing prevents visual confusion when connecting interactions and makes it easier to track the user flow during complex prototyping work.

14. On the Delete artboard, drag the Erin Steed message row to the left so you reveal the entire red bar. You should end up with it looking like this:

    

    NOTE: The first artboard represents the initial state, while the second shows the fully revealed delete action. This two-state approach is fundamental to creating believable micro-interactions that feel responsive and intentional.

Adding a Drag Interaction

With our visual states prepared, we'll now wire up the drag gesture that triggers the reveal animation. Modern users expect drag interactions to feel immediate and responsive—the key is setting the right trigger sensitivity and animation properties.

1. At the top left of the window click Prototype.
2. In the first artboard Messages, select the Erin Steed message row.
3. A blue arrow will appear to the right of the selected element. Drag this blue arrow to the Delete artboard to establish the interaction connection.

4. In the Property Inspector, configure these critical settings:

   • Trigger: Drag
   • Type: Auto-Animate
   • Destination: Delete
   • Easing: None
5. At the top right of the window, click on Desktop Preview or hit Cmd–Return (Mac) or CTRL–Enter (Windows).
6. Test the interaction by dragging right to left over the Erin Steed message row. Notice how XD automatically calculates the drag threshold—short drags snap back to the original state, while longer drags commit to revealing the full delete bar. This built-in behavior mimics iOS and Android conventions that users already understand.

7. Close the preview window to return to the design canvas.

Adding a Time Interaction

Professional interfaces don't leave users stranded in intermediate states. We'll implement an automatic progression that moves the interaction forward without requiring additional user input—a hallmark of polished, thoughtful design.

1. At the top left of the window, click on Design.
2. Click on the Delete artboard's name to select it.
3. Duplicate it by hitting Cmd–D (Mac) or CTRL–D (Windows).
4. Double–click on the artboard name Delete – 1 and change it to Done.
5. In the Done artboard, select the red delete row.

6. Drag the bottom resize handle up so the red bar's height becomes nothing (the trash can icon will still be partially visible, but the next step will take care of that).

   

7. In the Property Inspector, set Opacity to 0%.
8. The lower messages must be moved up to fill the empty space. We've grouped all those messages, so drag them up (hold Shift as you drag) to fill the gap where the deleted message was positioned.
9. At the top left of the window click Prototype.
10. Select the Delete artboard by clicking its name.
11. A blue arrow will appear on the right side of the artboard. Drag the blue arrow to the Done artboard.

12. In the Property Inspector, configure these timing parameters:

    • Trigger: Time
    • Delay: 0 s
    • Type: Auto-Animate
    • Destination: Done
    • Easing: None
    • Duration: 0.2 s
13. Click in an empty area of the canvas to ensure nothing is selected.
14. At the top right of the window, click on Desktop Preview or hit Cmd–Return (Mac) or CTRL–Enter (Windows).
15. Drag right to left over the Erin Steed message row and release. Watch as the red bar appears, pauses momentarily, then automatically animates away as the message list reflows—exactly the kind of seamless interaction users expect in premium applications.

16. Close the preview window.

Adding a Sound Effect

Audio feedback transforms good interactions into great ones. While visual animations communicate what's happening, sound confirms that an action has completed successfully—particularly important for destructive actions like deletion where users need clear confirmation.

1. Select the Done artboard by clicking its name.
2. A blue arrow will appear on the right side of the artboard. Click the blue arrow (don't drag this time, just click it) to add an additional interaction trigger.

3. In the Property Inspector, configure the audio playback:

   • Trigger: Time
   • Delay: 0 s
   • Type: Audio Playback
   • Audio File: Click on the menu and choose Add New File. Navigate into Desktop > Class Files > Adobe XD Class > Sounds and double–click on trash.wav to choose it.
4. Click in an empty area of the canvas to ensure nothing is selected.
5. Make sure your speakers are on and loud enough to hear sounds.
6. At the top right of the window, click on Desktop Preview or hit Cmd–Return (Mac) or CTRL–Enter (Windows).
7. Drag right to left over the Erin Steed message row and release. The complete interaction now includes visual feedback, smooth animation, and audio confirmation—the trifecta of polished interaction design that separates professional prototypes from basic wireframes.

8. Close the preview window.

Adding a Keystroke

Finally, we'll implement an undo mechanism using keyboard shortcuts. Power users expect keyboard accessibility, and providing an undo path for destructive actions is both a usability best practice and often a legal accessibility requirement.

1. Select the Done artboard by clicking its name.
2. A blue plus will appear on the right side of the artboard. Drag the blue plus to the Messages artboard to create the reverse interaction flow.

3. In the Property Inspector, set up the undo behavior:

   • Trigger: Keys & Gamepad
   • Key: Click into the field and press Cmd–Z (Mac) or CTRL–Z (Windows)
   • Type: Auto-Animate
   • Destination: Messages
   • Easing: Ease Out
   • Duration: 0.2 s
4. Click in an empty area of the canvas to ensure nothing is selected.
5. At the top right of the window, click on Desktop Preview or hit Cmd–Return (Mac) or CTRL–Enter (Windows).
6. Drag right to left over the Erin Steed message row to delete the message.

7. Hit Cmd–Z (Mac) or CTRL–Z (Windows) to trigger the undo action—the Erin Steed message should smoothly reappear, completing our comprehensive interaction design that handles both the primary action and its reversal.