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: • How to animate gradients in Adobe XD
How to create fixed position when scrolling: • How to create fixed position when scr...
How to make a drop-down animation: • How to make drop down menu animation ...
---
LINKS
Want 10% off Field Notes? Use code MONICA10 https://fieldnotesbrand.com
Present your designs and artwork in a professional way, check out the Modern Frame Mockup Bundle: https://monicagalvan.co/mockups
Need help wireframing? Check out the Wireframe Kit: https://monicagalvan.co/wireframes
Try Skillshare free for 1 month: https://www.skillshare.com/r/user/mon...
---
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 – / themonicagalvan
Pinterest – / themonicagalvan
Website – https://monicagalvan.co/
---
About this video:
