Design Challenge #7
Uploading My Resume Animation in Adobe XD
When designing things for clients, a lot of the time, they want to see something instead of you just explaining it. What is the saying? “A picture is worth 1000 words.” Well, if a picture is worth 1000 words, then, in my opinion, an animation is worth a million. Simple little things like this animation are what make a prototype stand out when showing a client. These things can also be built and coded to actually work the way that they look in the prototype. Now onto the simple steps of how I created this animation in Adobe XD.
I had a lot of fun working on this animation and all it is is some auto animations between frames and some masking. You start with the red bar (can be changed to any color really) and mask it to the rounded rectangle. Once you do that you just make a copy of that frame and extend the red bar a little and auto-animate between the two frames. You set the trigger as time and adjust the timing so that it flows nicely. Everything else is a simple click animation or fade animation. The masking should look like the image below:
Once you get all of that done the finished product should look something like the video below: