12 hours, 3 redesigns, and 2 cans of Yerbe Mate later—I ended up with this intricate animation, created with only Adobe XD. I would usually have to use After Effects to create something at this level. I was blown away by XD's capabilities, and I immediately wanted to create more.
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.
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
All good things start with a sketch
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:
My sketch process
Think about starting digitally instead
Stop kidding myself and suck it up
Figure out the story that I'm trying to tell
Let ideas flow onto paper
If the sketch starts to look pretty, stop immediately
"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.
Let's get digital
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.
What are you waiting for?
Get out there and make some cool animations with Adobe XD.
You can also view this project on Dribbble!