Adobe XD Carousel Animation Tutorial



In this Adobe XD tutorial, you’ll learn how to create a simple carousel animation prototype.

First, we design the main screen UI and individual cards for a meditation app. After you finalize the design for one card, copy and paste it, drag and drop to change the photo, and update any text. Make sure there’s an artboard for each individual card. In this design, show the previous and next cards peeking through on the sides of the main card, so the user knows this is a carousel they can scroll through.

Once your design is complete, switch from design to prototype mode. Select the first artboard and click on the home button so it turns blue, this means it’s the first screen of the prototype. From here it’s pretty simple. Click on the card to the right of the main card, drag it to the next artboard. Be sure not to connect it to any specific element but the entire artboard.

Use the Drag trigger, Auto-Animate action, be sure the destination is the name of your next screen. You can play around with the easing, I use Ease In-Out for this prototype. Continue the same process for all cards. Connect the right are to the artboard on the next, connect the left art to the previous artboard. Since Adobe XD remembers your settings, you won’t have to change them (unless you wanted to create a different animation). When you’re done, press the play button to preview your prototype animation.

WATCH NEXT
How to animate gradients in Adobe XD: https://youtu.be/t1iysvG2rJA
How to create fixed position when scrolling: https://youtu.be/1Kr2V67ZkN4
How to make a drop-down animation: https://youtu.be/-uwGY66JQYU


WORK WITH ME

Want me to review your portfolio and offer feedback? https://monicagalvan.co/shop/portfolio-review

Have questions you want to want to ask me about design? Book a call with me: https://monicagalvan.co/shop/consulting


ABOUT ME

Hello! I’m Monica, a designer living in San Francisco, California. This channel is a place where I share all my design and creative side projects. By sharing my process, I hope to help you learn more about design!


SOCIAL

Instagram – https://www.instagram.com/themonicagalvan/
Pinterest – https://www.pinterest.com/themonicagalvan/
Dribbble – https://dribbble.com/monicagalvan
Website – https://monicagalvan.co/


About this video:

Duration: 00:03:04

source