How to Create a Swipe Gesture in Adobe XD

Designing a smooth user experience is critical for any mobile app. For this tutorial, designer Cynthia Fong used Zhenya Rynzhuk’s design assets to prototype swipe gestures in Adobe XD, to ensure that key elements—such as a multiple-photo carousel—are working before her app goes live. 

 

Zhenya Rynzhuk is a digital design ninja who helps her clients grow their business by using design thinking to improve the experience of their customers. She can create your project from scratch or collaborate on a redesign.

Take a one-minute look at Fong’s process in this video. The steps are written out below. 

Before You Start

Fong provided a fully designed artboard, using design elements created by Rynzhuk, for you to use as you try out this technique. Use this sample file or practice with your own.

Step 1: Set a Destination

Fong duplicated her original artboard. Duplicating artboards in XD preserves the layer names, which is important for the animation to work in a later step.

Step 2: Change Focus

On the new artboard, Fong kept the carousel grouped. Then she double-clicked each image and changed the size and position in the Property Inspector to simulate the images coming in and out of view when the user swipes the carousel. She also moved the text layer from Group 1 to Group 2 and modified the text.

Step 3: Wire and Animate

Fong switched to Prototype mode to define the user interaction. She double-clicked the center image on the first artboard and dragged a wire to the second artboard. Then she set the Trigger to Drag, which automatically set the Action to Auto-Animate. She finished by dragging a wire from the center image on the second artboard and back to the first. XD remembered her previous settings. Finally, she tested the interaction in Desktop Preview.

Swipe Away

Create swipe gestures to simulate realistic user interactions in your mobile apps.

Note: Project files included with this tutorial are for practice purposes only.