Adobe XD: Create an animated progress bar tutorial

In this Adobe XD UI design and animation tutorial I show you how to create an upload button that will animate into a progress bar and then animate back into a button once complete.

Progress bars are a fundamental part the UI designers toolkit. They give the user excellent feedback that something is happening, be that a file uploading or a software installing.

For my design I’ve used a colour palette that’s bright and vibrant just for the purpose of the tutorial. In your own work it’s important to consider the hierarchy of colour on the screen and use this to determine the right colour to use for the progress bar.

This tutorial teaches you some of the fundamentals of Adobe XD, notably how to use auto-animate to transform shapes between artboards. Unfortunately you can’t do this with component states yet, as ‘time’ isn’t a trigger function, but hopefully in the future!

#AdobeXD #UX&D #UIdesign

❤️ Subscribe to the channel:

🐦 Follow UX&D on twitter:

💵 Buy design resource files:

Duration: 00:09:52