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 create fixed position when scrolling: [ Ссылка ]
How to make a drop-down animation: [ Ссылка ]

---
LINKS

Want 10% off Field Notes? Use code MONICA10 [ Ссылка ]

Present your designs and artwork in a professional way, check out the Modern Frame Mockup Bundle: [ Ссылка ]

Need help wireframing? Check out the Wireframe Kit: [ Ссылка ]

Try Skillshare free for 1 month: [ Ссылка ]

---
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 – [ Ссылка ]
Pinterest – [ Ссылка ]
Website – [ Ссылка ]

---
About this video:

свернуть