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.
12 hours, 3 redesigns, and 2 cans of Yerbe Mate later—I present to you my final submission.
Behind the scenes
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.
Tips & Tricks
I definitely had to get creative with the exclamation point bit. Here's the breakdown.
1) Create a circle path and animate across two artboards by copy/pasting, and then adjusting the second's rotation to 360 degrees
2) On the third artboard, delete the circle path
3) Add in text containing "!"
4) Convert that layer to a path and rename to the same layer name as the previous circle path
5) Next artboard, scale the exclamation point up to get a sort of popping effect
6) Next artboard, rotate it
7) Last artboard, get fun with it and stretch it out
How did you get the wave effect?
I'm so glad you asked. The wave was created by converting a shape to a path and playing with it from there to achieve that wave look. Here's a quick example:
What are you waiting for?
Get out there and make some cool animations with Adobe XD.