Articles, Blog

Pro Tips from Creative Pros: Heather Weaver on Auto-Animate in XD | Adobe Creative Cloud

October 30, 2019

– My name is Heather Weaver. I’m a web developer and designer and today I’m gonna be showing the Auto-Animate functionality. What Auto-Animate does is it takes the state of one art
board and it automatically figures out how to transition
to another art board. And when you’re using
the auto animate tool, essentially you wanna
think about each art board as a key frame in your animation. So I’m going to make a
copy of this art board. And bring it down here. So the first step that we want to do in this contact form animation is take this little orange circle and expand it to fill up the whole screen. We want this element to expand
up from the bottom right. So I’m going to increase the size and I wanna make sure
that the position is fixed so that it stays in the same place no matter where they initiate it from. And then I’m gonna go ahead
and change this tap transition over to this art board here. And now, rather than using a transition, we’re gonna switch the
action to Auto-Animate. And what that’s going
to do is it’s gonna look at this circle here and
transition it to this position. So I’ll stick with a
simple ease-out easing, but I am going to up
the time to one second. And then we’ll go ahead
back to this art board. Play the prototype and it does a really smooth transition. So Auto-Animate, it’s a
really great new feature. It makes things feel much truer to the way that they’ll actually
be in final production and I hope it will help you bring your designs to life in a new way.


  • Reply Megolab ID February 6, 2019 at 3:25 pm


  • Reply 에르의뜰ഒElwingsഒ February 6, 2019 at 7:34 pm

    Thanks for a great video.

  • Reply Milan Pantelic February 13, 2019 at 12:42 pm

    I thought that was a guy. Then I was like what???

  • Reply transgreaser ftm February 13, 2019 at 3:54 pm

    They gave a great quick tip overview! Thank you Heather McKinnon! Cool new feature! ✌️

  • Leave a Reply