Time Interactions & Adding Audio (Sound Effects)

Topics covered in this Adobe XD tutorial:

Adding a Drag Interaction, Adding a Time Interaction, Adding a Sound Effect, Adding a Keystroke

Exercise Preview

Exercise Overview

In this exercise, you’ll design a “drag to delete” feature for a Messages app. You’ll use drag interactions, timed interactions, and define a keystroke.

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 let’s focus on prototyping the functionality that will lets us swipe to delete the Erin Steed message. This functionality and animation can’t be built entirely into a component, so we’ll choose one message to show it off on. This will be good enough to show the client and developer how we want the feature to work.

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 put it into the Erin Steed message row, hidden off screen, so we can swipe across and reveal the hidden red bar. Double–click on the Erin Steed message row to go into the component instance.
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 make sure nothing is selected. The red bar will disappear but don’t worry!
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).

    When things overlap in a moment this will make it easier to see what’s going on.

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 shows the initial design. The second artboard shows how it will look at the end of the drag.

Adding a Drag Interaction

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 red bar. Drag the blue arrow to the Delete artboard.

4. In the Property Inspector, set:

   • 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. Drag right to left over the Erin Steed message row to reveal the red delete bar. If you don’t drag very far it will snap back to the initial appearance, but if you drag far enough it will snap so the full red bar is shown.

7. Close the preview window.

Adding a Time Interaction

We need the red delete row to disappear without us doing any additional interaction. How do we tell XD to do something automatically? With a time interaction!

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.
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, set:

    • 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 sure 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 to see the red bar appear and then animate away!

16. Close the preview window.

Adding a Sound Effect

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).

3. In the Property Inspector, set:

   • 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 sure 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 red bar appear will appear, animate away, and you should now hear a trash sound effect!

8. Close the preview window.

Adding a Keystroke

Finally, let’s add a keystroke to undo the message deletion.

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.

3. In the Property Inspector, set:

   • 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 sure 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 undo and the Erin Steed message should reappear!