Designing a smooth user experience is critical for your mobile app. Cynthia Fong leveraged Zhenya Rynzhuk’s design assets to prototype swipe gestures to ensure key elements – like a multi-photo carousel – are working before her app goes live. In this short tutorial, see how Fong ensures the best user experience with swipe gestures in Adobe XD.

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.

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.

Image carousel in a mobile app design displays on two artboards in Adobe XD, one artboard name is highlighted in orange

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.

Layers panel shows text element with callout indicating moving it to a new group, image carousel shows new center image

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.

A blue line connects center photo in image carousel to the second artboard, Trigger is set to Drag and Action is Auto-Animate

Swipe away

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

Hand holds a mobile phone with the design of a music browsing app on the screen

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

12/11/2019

Artist: Zhenya Rynzhuk

Adobe Stock contributor: visualbricks

¿Le ha servido de ayuda esta página?