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.
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.
Create swipe gestures to simulate realistic user interactions in your mobile apps.
Note: Project files included with this tutorial are for practice purposes only.