From a Retro Microinteraction: Loading Animation in Adobe XD

This animation is a throwback to May 2021, when I was testing my skills in creating microinteractions within Adobe XD. It's a testament to the power of the built-in prototyping features, as only four basic shapes and seven states were used to achieve this effect. No external plugins were necessary!

I'm a bit late to the Dribbble party, but better late than never, right? In this post, I'll be sharing the details of the seven states and the prototype settings used to bring this animation to life. Let me know what you think!

For this project, I meticulously defined 7 animation states. Then, I played with the positioning and individual rotation of the 4 shapes to create a subtle, mesmerizing spin animation. Here's the beauty of Adobe XD prototyping: it allows for quick and easy creation of these types of minimal animations without needing heavyweight tools like After Effects.

While I miss the powerful prototyping environment of Adobe XD, especially for quick and easy animations like loading loops, Figma offers a distinct advantage: individual component-level state transitions. This allows for more complex interactions within a single artboard.

Ultimately, both tools have their strengths. For basic, looped animations like this, Adobe XD's prototyping shines. But for intricate interactions within a single screen, Figma takes the lead.

Unveiling the secret sauce! Here are the common settings that bring all seven animation states to life.

This variation explores the power of customization. Individual settings and timing adjustments are applied to each state, resulting in a distinct animation style

What are your thoughts on this animation? Any suggestions for improvement? Feel free to ask questions – I'm always down to learn and collaborate!

Would you be interested in seeing a Figma recreation of this animation? Share your thoughts in the comments below!