Adding Interactions to a Slideshow: Tap, Drag, & Keys

Topics covered in this Adobe XD tutorial:

Creating a Working Slideshow Prototype, Adding Tap Interactions, Adding the Ability to Drag, Adding Keystrokes

Exercise Preview

Exercise Overview

In this exercise, you’ll create a slideshow with 3D transforms, and add functionality to make it work with arrow buttons to advance slides, the ability to drag between slides, and keystrokes too!

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 Slideshow.xd to open it.
3. In the Toolbar, choose the Select tool .

Setting Up the Slides

Scrollable areas like we previously saw are great for simple scrolling, but we want to make a slideshow that animates between slides, uses keystrokes, taps, and scrolls. So we’ll need to set up different artboards for each state of our slideshow.

1. Select the artboard by clicking on the artboard name 1 (at the top left of the artboard).
2. Duplicate it by hitting Cmd–D (Mac) or Ctrl–D (Windows) two times to create a total of 3 artboards.

3. Rename the artboards by double–clicking the artboard name at the top left. Change their names to:

   • 2 for the middle artboard.
   • 3 for the right artboard.

4. On artboard 1:

   • Select the left arrow.
   • Press the 3 key on your keyboard to quickly set the Opacity to 30%.

5. On artboard 3:

   • Select the right arrow.
   • Press the 3 key on your keyboard to quickly set the Opacity to 30%.

Adjusting the First Slide

1. On artboard 1, select the center beach photo.
2. In the Property Inspector, to the right of Transform click the 3D Transforms icon to toggle it on.

3. In the Property Inspector’s Transform section:

   • Set Z to -300 and don’t miss the minus part!
   • Set Y Rotation to -20° and don’t miss the minus part!
4. On artboard 1, Ctrl–click (Mac) or Right–click (Windows) on the rainbow photo and choose Reset 3D Transforms.
5. Select the 3 photos, but do NOT select the arrows!

6. In the Property Inspector, set X to 340

Adjusting the Last Slide

1. On artboard 3, select the center beach photo.

2. In the Property Inspector’s Transform section:

   • Set Z to -300 and don’t miss the minus part!
   • Set Y Rotation to 20°
3. On artboard 3, with the center beach photo selected choose Object > Arrange > Bring to Front.
4. On artboard 3, Ctrl–click (Mac) or Right–click (Windows) on the whale photo and choose Reset 3D Transforms.
5. Select the 3 photos, but do NOT select the arrows!
6. In the Property Inspector, set X to -174 and don’t miss the minus part!

7. In the Property Inspector, to the right of Transform click the 3D Transforms icon to toggle it off.

Making the Arrow Buttons Work & Changing the Easing

1. At the top left of the window click Prototype.
2. We’re going to wire up the arrows on artboard 1, so make sure you can see the arrows, and at least part of artboard 2 (you don’t need to see the whole thing).
3. On artboard 1, select the right arrow.
4. A blue arrow will appear on it. Drag the blue arrow to artboard 2.

5. In the Property Inspector, set the following:

   • Trigger: Tap
   • Type: Auto-Animate
   • Destination: 2 (should already be set)
   • Easing: Ease Out
   • Duration: 0.5 s
6. At the top right of the window, click on Desktop Preview or hit Cmd–Return (Mac) or Ctrl–Enter (Windows).

7. Click the right arrow to see the animation to the next slide.

   The effect is cool, but let’s see how other easings change the feeling of the animation.

8. Close the preview window.
9. With the right arrow on artboard 1 still selected, in the Property Inspector change Easing to Snap.
10. At the top right of the window, click on Desktop Preview or hit Cmd–Return (Mac) or Ctrl–Enter (Windows).

11. Click the right arrow to see the animation to the next slide.

    If you want to see it again, we have not wired up the arrow buttons on screen, but you can press the Left Arrow key on your keyboard to go back to the previous artboard and click the arrow button again.

    The Snap easing makes a fast transition that overshoots a bit past where it wants to go and then comes back. This creates a bit of a bounce that adds some liveliness to the animation.

12. Try out the other easing types such as Wind Up and Bounce.
13. When you’re done experimenting set Easing back to Ease Out.
14. Now let’s finish wiring up the arrows. On artboard 2 select the left arrow.
15. Drag the blue arrow to artboard 1.

16. In the Property Inspector, make sure the following are set:

    • Trigger: Tap
    • Type: Auto-Animate
    • Destination: 1
    • Easing: Ease Out
    • Duration: 0.5 s

17. On artboard 2:

    • Select the right arrow.
    • Drag the blue arrow to artboard 3.

18. On artboard 3:

    • Select the left arrow.
    • Drag the blue arrow to artboard 2.
19. Click in an empty area of the canvas to sure nothing is selected.
20. At the top right of the window, click on Desktop Preview or hit Cmd–Return (Mac) or Ctrl–Enter (Windows).
21. Test out all the arrows and see the entire slideshow should be working!

22. Close the preview window.

Adding Keystrokes

Using keystrokes would make it faster to navigate this slideshow, and we can define them in XD!

1. On artboard 1 select the right arrow.
2. Drag the blue plus to artboard 2.

3. In the Property Inspector, set:

   • Trigger: Keys & Gamepad
   • Key: Click into the field and press your Right Arrow key
   • Type: Auto-Animate
   • Destination: 2
   • Easing: Ease Out
   • Duration: 0.5 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. Press your Right Arrow key and the slideshow should animate to the second slide.

   NOTE: Normally in the preview window the left/right arrow keys work to go to the previous/next slide, but they do so by pushing one artboard over to go to the other. Our keystroke should override that normal action.

7. Close the preview window.

8. On artboard 2 select the left arrow and then:

   • Drag the blue plus to artboard 1.
   • In the Property Inspector, below Key, click into the field and the press your Left Arrow key.

9. On artboard 2 select the right arrow and then:

   • Drag the blue plus to artboard 3.
   • In the Property Inspector, below Key, click into the field and the press your Right Arrow key.

10. On artboard 3 select the left arrow.

    • Drag the blue plus to artboard 2.
    • In the Property Inspector, below Key, click into the field and the press your Left Arrow key.
11. Click in an empty area of the canvas to sure nothing is selected.
12. At the top right of the window, click on Desktop Preview or hit Cmd–Return (Mac) or Ctrl–Enter (Windows).
13. Test out the right and left arrow keys to see that you can keyboard navigate between all the slides!

14. Close the preview window.

Adding the Ability to Drag

In a previous exercise we saw how to create scrollable areas. We’re animating between different states, so we can’t use that type of scrollable area. Instead we’ll use a drag interaction.

1. On artboard 1 select the rainbow photo.
2. Drag the blue arrow to artboard 2.

3. In the Property Inspector, set:

   • Trigger: Drag
   • Type: Auto-Animate
   • Destination: 2
   • Easing: None

4. On artboard 2:

   • Select the beach photo.

   • Drag the blue arrow to artboard 3.

5. On artboard 3:

   • Select the whale photo.
   • Drag the blue arrow to artboard 2.
6. Click in an empty area of the canvas to sure nothing is selected.
7. At the top right of the window, click on Desktop Preview or hit Cmd–Return (Mac) or Ctrl–Enter (Windows).
8. Drag right to left on the rainbow photo to go to slide 2.
9. Drag right to left on the beach photo to move to slide 3.
10. Drag left to right on the whale photo to go back to slide 2.

11. On slide 2 we can’t go back to slide 1 because we only have a drag interaction to advance to slide 3.

    As of this writing, XD cannot add multiple drag interactions to a single element. So while this isn’t perfect, it’s good enough to get the idea across to clients, user tests, and developers.

    On the Adobe XD User Voice website many people have upvoted a feature request for this. Visit tinyurl.com/xd-drag-mu to upvote and you’ll help influence the future of XD. You’ll also be notified of changes (such as Adobe completing the feature).

12. Close the preview window.

Optional Bonus: Adding the Ability to Tap

If you get done early and want to add even more functionality, you could add a Tap interaction to the 3D transformed photos that would let you tap on them to go to the next slide. You’ll select the appropriate photo, drag the blue arrow to the next slide, and this time use a Tap Trigger.