Oh, you thought Adobe XD was just for prototyping? Think again. Check out my process for animating in XD—all leading into my submission for their contest. Let's jump into it.
Adobe XD's new feature, Auto-Animate, had just been released. To get the community engaged, Dribbble came up with a challenge to use the new feature. While the challenge was to simply use the new feature, I wanted to take it further by pushing its boundaries.
With the release of Adobe XD's auto-animate feature, just about anything feels possible. XD has become your one-stop shop for prototypes and, now, animation. To kick off their feature, Dribbble announced a challenge which invites users to rebound designs that showcase this very feature.
As a new user of XD—and fairly new member on Dribbble—I took this challenge seriously. I had some XD Daily Challenge skills in my pocket so I could navigate XD, a few years experience of dabbling with animation in Photoshop, and a whole lotta ideas.This project is a true mix of pure excitement, learning on the fly, and pushing the boundaries of Adobe XD.
The question of "Ok, how far can I push this until it breaks?" came up frequently. Not because I didn't believe in XD's abilities, but because I was excited at the thought of getting to streamlining my workflow. Prototyping and animation in one application? Oh, hell yeah.
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. 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). All in all, this may be one of the most complex projects I've created in Adobe XD.
As much as I wanted to dive head first into pushing pixels—or whatever it is that the cool kids are saying nowadays—I knew that if I just took fifteen minutes or so to doodle out a storyboard, the rest would be smooth sailing. Well, smoother, anyway.
I wish I could tell you that I have this perfect, well-thought out process for sketching. You know, one of those: "include these five things in your sketch, and you'll be set!" lists. But I don't. The best I can do is offer what I tend to do in my process of sketching for animation:
"You know it's time to begin digital when the sketch looks good?" you must be asking. In which I would reply: No. I know it's time to stop because a sketch should never look pretty. It would mean I'm focusing on the wrong things and I must already have my foundation completed—OR, I'm blatantly wasting time and I need to start over.
Aside from immediately regretting that intro, little reminder that this was done entirely in Adobe XD. Every shape. All of the motion. Everything. While Adobe XD is primarily a prototyping application, I think many don’t consider its hidden potential. But that’s an article for another time.
Diving right in—I treated each artboard as a keyframe. One of my favorite moments of the animation is when a wave starts to fill the phone screen. This was largely inspired by Howard Pinsky’s mana bottle, and took at least an hour of tweaking it until I was satisfied with it.
Get out there and make some cool animations with Adobe XD.
You can also view this project on Dribbble!