Let users browse content in a slideshow designed with Adobe XD CC.
create-slideshow-header_1000x560

When designing a slideshow, start by creating placeholders for the images to lay out the design. 

create-slideshow_step1

It’s important to consider the context and how users will interact with your slideshow. Will they drag between images, or click buttons to navigate? Experiment by designing different slideshow layouts to determine which is most effective.

create-slideshow_step2

Once you finalize your design, switch to Prototype mode to define the interactivity. You can wire an individual object within a group to the next artboard. Use the Drag trigger to allow users to swipe through available images. Use the Auto-Animate action to animate the selected image as it moves into position. Make sure the object you want to animate has the same name on the source and destination artboards. Then, test the interaction in Desktop Preview and make adjustments until the slideshow works as expected. Here’s the design we liked for our music browsing app.

create-slideshow_step3

Now you can provide users with more content in a format that doesn’t take up too much space in your app.

11/14/2018

Adobe Stock contributor: PhotoPlus+

Was this page helpful?