Animating your UI designs in Keynote in 7 simple steps

Motion in UI design isn’t new—but it’s definitely the next thing you should be getting familiar with. The future’s bright for those who can design and guide people with motion.

To get you started, I’ll show you how to mock up the animation in the video below using Apple’s Keynote. Along the way, we’ll cover principles you can use to create custom interactions that’ll add a whole new level of fidelity and interactivity to your prototypes.

Want to follow along? Download the source files.

Step 1: Design your beginning and end states

Animations in user interface design have a beginning, middle, and end. Since the middle’s where all the action happens, you’ll want to start designing your animations with their beginnings and ends. And that’ll usually happen in your favorite design program, be it Photoshop, Illustrator, or Sketch.

While you’re designing, identify which elements will move or change in your animation and export them individually. Then export everything else in a single base layer.

Here’s how that works with our design. Since the blue background layers (including the header bar) don’t change in the animation, you’ll export each of them as their own asset, and save out everything else separately.

Step 2: Fire up Keynote

Open a new blank Keynote file, click Document in the top right corner, and change your slide size to a mobile screen size, like 750×1334 for an iPhone 6.

Step 3: Position your assets

Now drop in your images and set up your screen to represent your interaction’s beginning state. If an asset gets in your way or isn’t part of the beginning state, just drag it off the canvas for now—you’ll animate it on to the canvas shortly.

Step 4: Start animating

To animate an object, select it, then click Animate, then Action, and add a Move animation.

Keynote will automatically add a 50% opacity layer next to your current one—it represents the “after” state of the object. Drag and position it somewhere else to create an animation.

Click Preview to see how it looks, then tweak your duration and acceleration settings till it works like you want it to.

Then just repeat the steps above for each part of your design. And feel free to experiment with the other animation options in the Action panel.

Because you’ll be animating several objects at once, you’ll want to click the Build Order button at the bottom of the Animation panel to give you more control over the animation sequence.

Step 5: Perfect your build order

Things will probably look a little weird, slow, and clunky until you address the build order. When creating this type of animation, you want things to be happening at pretty much the same time, which is where this panel really comes in handy.

See the With Build 2 option above? Set all your animations to happen “with” the original animation to create a smooth sequence. If some animations need more time to trigger, you can play with the Delay.

Step 6: Export your animation as a video

To add the animation to your prototypes, shoot it to Dribbble, or use it somewhere else online, we’ll need to turn it into a video, then a GIF.

Go to File > Export to > QuickTime, then change the format to Custom and type the width of your design. Keynote should get the picture and fill in the height for you.

You’ll also want to change the compression to Apple ProRes 422. Otherwise, you’ll have some color differences from your original designs.

Step 7: Convert the video to a GIF, then drop it in InVision

I’ve already written at length about optimizing your GIFs from video, so I’ll keep this short.

Open up Photoshop, go to File > Import > Video Frames to Layers… and pick the video file Keynote just created.

Then go to File > Save for Web… and export it as a GIF. If you plan to use this in a prototype, set the looping options to play only once, instead of forever.

And boom. Now you’ve got a prototype-ready animation to wow clients and stakeholders with.

But wait, what about Magic Move?

Keynote has a really neat feature called Magic Move that tracks an object’s changes across multiple slides.

So if your “beginning” slide contains everything you need to create the “end” slide, just duplicate that slide and rearrange the elements to represent the “end” state.

After that, return to your “beginning” slide, click Animate and add Magic Move as the page transition.

Depending on how complex or detailed your animation is, Magic Move might be a great choice, but here’s a comparison of how it worked out for my animation.

That’s all for now, but be sure to tune in for part 2 of this series, when we’ll look at creating animations using ScreenFlow!

P.S. We’d love to see what you come up with when you put these tips to use! Shoot us a link to your prototype on Twitter at @InVisionApp. Who knows, we might just retweet you!