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

Topics Covered in This Figma Tutorial:

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

Exercise Preview

Exercise Overview

In this comprehensive exercise, you'll master the art of prototyping interactive slideshows in Figma—a skill that's essential for modern UX designers working on everything from product carousels to onboarding flows. You'll implement multiple interaction patterns including arrow button navigation, intuitive drag gestures, and keyboard shortcuts, creating a prototype that feels native and responsive across different user behaviors. This exercise bridges the gap between static design and dynamic user experience, teaching you to think beyond individual screens toward cohesive interaction systems.

Opening the File

Before diving into prototyping, let's ensure you have the proper foundation files loaded and ready to work with.

1. In Figma, if you're not on the homescreen (file browser), navigate there using one of these methods:

   • In the Desktop app: Click the Home tab (Mac users can also choose File > Open File Browser).
   • In the Web app: At the top left, click the Main menu button and choose Back to files.
2. To import your local exercise file, click Import file (located near the top right of your interface).

3. Navigate to Desktop > Class Files > Figma Class and double–click on Slideshow.fig to select it.

   Once the file has successfully uploaded to your workspace, click Done and double–click on the file name to open it for editing.

Setting up the Slides

While Figma's scrollable areas work well for basic content browsing, sophisticated slideshow interactions require a more nuanced approach. We'll create distinct frames for each slide state, enabling smooth animations and multiple interaction triggers that feel polished and intentional.

1. We'll be scaling the photos in the upcoming steps, so let's first prepare them by selecting all 3 photos in the current frame.

2. With the 3 photos selected, locate the Design panel on the right. To the right of the W and H fields, click the Constrain proportions button . This ensures our photos maintain their aspect ratios during resizing.

3. Select the entire frame by clicking on the frame name 1 (visible at the top left of the frame border).
4. Create your slide variations by pressing Cmd–D (Mac) or Ctrl–D (Windows) twice to generate a total of 3 frames representing different slide states.

5. Notice how Figma intelligently increments the frame names automatically:

   • 1 for the leftmost frame
   • 2 for the middle frame
   • 3 for the rightmost frame

6. On frame 1 (representing the first slide):

   • Select the left arrow button.
   • Press the 3 key on your keyboard to instantly set the opacity to 30%, indicating this navigation option is unavailable.

7. On frame 3 (representing the final slide):

   • Select the right arrow button.
   • Press the 3 key to set its opacity to 30%, showing users they've reached the end of the sequence.

Adjusting the Design of the First Slide

Now we'll configure the visual hierarchy for our opening slide, emphasizing the featured content while maintaining clear navigation cues.

1. On frame 1, click to select the left rainbow photo.

2. We'll scale this to match the prominence of the center photo. In the Design panel:

   • Set W to 700 and press Return (Mac) or Enter (Windows) to apply. Due to our earlier constraint setting, the H value will automatically adjust to 700, maintaining the square proportions.

   • Set Y to 65 to establish proper vertical positioning.

3. Select the center beach photo on frame 1.

4. Reduce this to a supporting role by setting W to 587 in the Design panel.

5. Center this photo horizontally within the frame by clicking the Align horizontal centers button at the top of the Design panel.
6. Create visual harmony by aligning the beach photo vertically with the featured rainbow photo. Hold Shift and click on the rainbow photo to select both images.
7. Click the Align vertical centers button to align their vertical centers.
8. Select only the rainbow photo.
9. Ctrl–click (Mac) or Right–click (Windows) on the rainbow photo and choose Bring to front to ensure proper layering hierarchy.
10. Select all 3 photos, but avoid selecting the arrow buttons.
11. In the Design panel, set X to 370 and press Return (Mac) or Enter (Windows).
12. If that moved all photos to the same position, press Cmd–Z (Mac) or Ctrl–Z (Windows) to undo immediately.

13. Instead, click on the Mixed value in the X field, add +286 to create Mixed+286, and press Return (Mac) or Enter (Windows).

    All 3 photos will shift as a unified group to their optimal positions:

    

    Pro Tip: The math here isn't arbitrary—we determined that X should be 370 using center alignment, then calculated the offset from the original position (84): 370-84=286. While you could achieve this with guides or manual positioning, learning these calculation shortcuts will make you significantly faster at precise layouts.

Adjusting the Design of the Last Slide

The final slide requires a mirror approach to the first, creating visual balance while highlighting different content.

1. On frame 3, select the whale photo (positioned on the right side).

2. Scale this to featured prominence in the Design panel:

   • Set W to 700
   • Set Y to 65
3. Select the center beach photo on frame 3.

4. Reduce its visual weight by setting W to 587.

5. Create vertical alignment by selecting the beach photo, then holding Shift and clicking the whale photo.

6. Click the Align vertical centers button to align them perfectly.

7. Select only the whale photo.

8. Ctrl–click (Mac) or Right–click (Windows) on the whale photo and choose Bring to front for proper layering.

9. Position the whale photo precisely by setting X to 599 in the Design panel.

10. Select all 3 photos (excluding the arrow buttons).

11. In the Design panel, click on the Mixed value for X, add -229 to create Mixed-229, and press Return (Mac) or Enter (Windows).

12. The photos should shift cohesively to create the final slide layout:

    

Making an Arrow Button Work

With our visual design complete, we'll now transform these static screens into an interactive prototype that responds naturally to user actions.

1. Switch to prototyping mode by clicking Prototype at the top of the right panel.
2. Position your canvas view to clearly see frame 1's arrows and at least a portion of frame 2—you don't need the entire second frame visible for this step.
3. On frame 1, click to select the right arrow.
4. A blue connection node will appear. Drag this blue circle directly to frame 2 to create the navigation link.

5. The Interaction details panel will open on the right side. Make this crucial change:

   • Change the Animation setting from Instant to Smart animate. This creates smooth, contextual transitions between your frames.
6. Test your work by clicking Present at the top right, or use the keyboard shortcut Cmd–Option–Return (Mac) or Ctrl–Alt–Enter (Windows).

7. Click the right arrow to experience the smooth slide transition.

   The smart animate effect provides sophisticated motion, but let's explore how different easing curves can enhance the user's emotional response to the animation.

8. Close the presentation tab or window to return to editing mode.

Custom Easing

Animation easing is often the difference between a prototype that feels mechanical and one that feels delightfully human. Let's refine our transition's personality.

1. If the Interaction details panel isn't visible, click on the Click interaction under the Interactions section to reopen it.
2. In the Interaction details panel, change Ease out to Ease out back.
3. Launch the presentation again by clicking the Present button .

4. Click the right arrow to experience the new transition feel.

   To replay the animation, press the Left Arrow key to return to the previous frame and click the arrow again. Notice how the "back" easing creates a playful overshoot that snaps back into place—this adds energy but may feel too aggressive for our content.

5. Close the presentation and return to the Interaction details panel.

6. Change Ease out back to Custom bezier for maximum control over the animation curve.

7. Shape the easing curve to match this configuration:

   

   Understanding Bezier Curves: The left handle controls start velocity (ease in) while the right handle manages end velocity (ease out). Steeper curves create faster motion, and extending handles beyond the bounding box creates overshoot effects for custom bounce animations. The numerical values below the curve editor allow you to recreate or share exact easing settings across projects.

8. Test this refined animation by clicking Present .

9. Click the right arrow to experience the gentler, more sophisticated bounce effect.

   This custom curve maintains the engaging overshoot while feeling more refined and intentional—perfect for professional applications.

10. Close the presentation to continue building out the full navigation system.
11. Complete the arrow navigation by wiring up the remaining buttons. On frame 2, select the left arrow and drag its blue connection node to frame 1.

12. Continue the connections on frame 2:

    • Select the right arrow and connect it to frame 3.

13. Finish the navigation loop on frame 3:

    • Select the left arrow and connect it to frame 2.
14. Deselect all elements by clicking in an empty area of the canvas.
15. Launch a comprehensive test by clicking Present .
16. Navigate through all slides using the arrow buttons to verify your complete slideshow functionality.

17. Close the presentation when you've confirmed everything works smoothly.

Adding Keystrokes

Keyboard navigation significantly improves accessibility and provides power users with efficient control methods. Professional prototypes should always consider multiple interaction patterns.

1. On frame 1, select the right arrow button.
2. Create a new connection by dragging the blue node to frame 2.

3. In the Interaction details panel, configure keyboard control:

   • Change On drag to Key/Gamepad
   • Click on Click to select and press your physical Right Arrow key to bind it.
4. Clear your selection by clicking in an empty canvas area.
5. Test the keyboard functionality by clicking Present .

6. Press your Right Arrow key to advance to the second slide with the same smooth animation.

   Note: Figma's default arrow key navigation typically jumps between frames instantly, but our custom keystrokes override this behavior to maintain the smart animate transitions that create a cohesive user experience.

7. Return to editing mode and systematically add keyboard controls for all navigation points.

8. On frame 2, configure the left arrow:

   • Connect to frame 1
   • Set trigger to Key/Gamepad
   • Bind to the physical Left Arrow key

9. On frame 2, configure the right arrow:

   • Connect to frame 3
   • Set trigger to Key/Gamepad
   • Bind to the physical Right Arrow key

10. On frame 3, configure the left arrow:

    • Connect to frame 2
    • Set trigger to Key/Gamepad
    • Bind to the physical Left Arrow key
11. Clear your selection and launch the presentation with Present .
12. Thoroughly test both left and right arrow keys to confirm seamless keyboard navigation throughout your slideshow.

13. Close the presentation once you've verified complete functionality.

Adding the Ability to Drag

Touch and drag interactions are essential for modern interfaces, especially on mobile devices. This final interaction layer makes your prototype feel native across all platforms.

1. On frame 1, select the rainbow photo (the featured image).
2. Connect it to frame 2 by dragging the blue node.

3. In the Interaction details panel:

   • Change On click to On drag to enable swipe gestures.

4. Frame 2 requires bidirectional navigation, so we'll add two drag interactions:

   • Select the beach photo and connect it to frame 3.
   • Change the interaction to On drag.
   • Create a second connection from the beach photo to frame 1.
   • Set this interaction to On drag as well.

5. Complete the interaction chain on frame 3:

   • Select the whale photo and connect it to frame 2.
   • Change the interaction to On drag.
6. Clear your selection and launch the final comprehensive test with Present .
7. Test the drag functionality by swiping right-to-left on the rainbow photo to advance to slide 2.

8. Experiment with all the drag interactions across different slides, testing both forward and backward navigation.

   Your slideshow now supports the complete spectrum of modern interaction patterns—clicking, keyboard navigation, and touch gestures—creating a truly professional prototype experience.

9. Close the presentation when you're satisfied with the comprehensive functionality.