Adobe XD Auto Animate Playoff: Design. Rebound. Win!

  • Save

I had such a fun time working on this project! Adobe XD is prevalent in both my work and personal life. While I mainly use it for prototyping web pages and apps (which is its primary purpose), I thought i'd test its boundaries—and it definitely delivered.

I wanted to tell a story using XD's auto-animate feature.
Some highlights are:
—The color choice is meant as a nod at Dribbble
—The constant, quick motions are meant to show how fast building in XD is
—The waves within the phone are inspired by Howard Pinsky's mana bottle

This was the first time I built something in XD with such heavy animation. Like, wow. It can get pretty complex if you let it! I definitely learned the hard way a few times about creating a solid naming cadence, and making sure to only animate like objects (ie: shapes & shapes, paths & paths).

Tip!—If you are using boolean operations, convert to a path afterwords. In my opinion, it eliminates any chance for confusion down the line.

All in all, this may be one of the most complex projects i've created in Adobe XD and I hope you enjoy viewing it as much as I did designing it!

If you wanna see a better quality version, check it out here: https://www.behance.net/gallery/72713339/Adobe-XD-Auto-Animate-Playoff-Design-Rebound-Win

keyboard shortcuts: L or F like