Design in Sketch Then Animate In Keynote


We know design is important in today’s uber tech world; but it still happens, in many teams design thinking ends up at a stand still once the deliverables are passed down the chain to marketing or development. Recently, with the rise of rapid prototyping tools, designers are gaining more traction when it comes to stakeholder meetings. Designers want the best experience for users, and we also want to collaborate with our teams by bridging the gap from design to development as much as possible. Now, we have an opportunity to take what is in our mind and flesh it out in real-life scenarios. Welcome user interface animation. Everyone loves animations, and they’re not just for use in the movies anymore! Stakeholders, folks on Dribbble, and of course the end users of software that we design for all enjoy useful animations. With meaningful animations, we can pass off our designs to the powers that be and then off to development giving us more influence for the outcome of our products.

The Setup

Keynote is one of my go-to applications when it comes to microinteraction UI tools. It’s definitely not the end-all-be-all of rapid prototyping, but it’s a swift way to audition different effects and create a software narrative. Keynote is free, and works seamlessly with Sketch or any .svg file for that matter. A simple drag and drop of an asset allows a designer to build the interface quickly, so we can get to the animation stages even sooner.

Note: Sketch and Keynote are for OS X only.

The Goal

We want a swift way of auditioning meaningful animations to pass off to the development team. I’ll be showing you how to create a simple FAB confirmation button using the build and transition features of Keynote. This will all happen in one slide. The end result will look like the .gif below.

Setting Up Keynote

First choose the standard white presentation theme.

Standard White Theme

After the presentation opens, we’ll want to customize the slide size. On the top right of Keynote, select the document inspector, and then choose custom slide size. The dimensions 1080 x 1920 will work great for HD animations in portrait.

Now, with Sketch open, simply ⌘+ C and ⌘+V or drag and drop the various elements from Sketch to the Keynote template to build the layers.

Copy & Paste the elements to the Keynote slide from each static file
The final result after copying everything.

Now, wasn’t that easy? It may look like a mess, but let’s get to building! Keynote handles builds and transitions separately. Builds consist of three parts: a build in, animate, and build out feature. Transitions are between slides. For our interactions, we’ll be focusing on the build feature. Each item has to come onto the page, animate, then it may or may not disappear afterwards.

All in all this animation is 38 builds.

As you can see, the send mail button is already present for the user to push on stage. The primary action could be useful as a plugin or in-app action for support, feedback, or a primary email action for an email app.

To create an action, open the animate inspector for the object, the action and click build order to see the list of builds.
Let’s animate the button being pressed. It is two builds that scale up and then down.

To animate the button being pressed, pull up the build inspector. Let’s adjust the speed. First it will scale up then it will scale down. Feel free to play around with the speeds. You may prefer a more elastic approach, longer bounce time, larger scale, etc. Keep in mind, builds happen simultaneously or with a delay. We’ll get back to that in awhile.

Animate the mail icon disapparing as the button scales beyond the viewport to reveal the form.

After we animate the button press, we’ll then have the button disappear and morph into the form with input fields. This is simply the circle growing and moving a percentage beyond the viewport. To smooth out the movement, adjust the timing and the path by which the circle moves to a more central location in the viewport. You can see below with the red line how the circle moves inward.

The circle grows and moves to the center of the viewport simultaneously.

Next, we’ll want to introduce the form fields now that the background is in place. Observe how the build inspector changes from an after build to a with build 6 option for the lines coming onto the screen. This allows multiple elements to come on screen at the same time. Note: this can occur the same when items are being removed from the view.

Observe now how the form fields pop onto the stage.

Now that we have our form, let’s fill it in and scale the form text — in material fashion — and show some input. For each form field, rinse and repeat the below builds.

The form name and line has to scale simultaneously.

Now that we’ve changed the form and shrunk the inputs, we’ll need elements to begin disappearing to confirm the user’s input of the form.

The shrinking of the form inputs happening simultaneously.

You can see that the opacity and dissolve methods are perfect ways to have our elements disappear off stage.

Opacity + Dissolve works magic for disappearing elements

We’re almost there! The final step is to get our background scaled down to normal button size and have it confirm for our user that the email was sent successfully.

Shrinking the background, animate the final pop to achieve email success
It does look crazy without previewing, but the animations are complete! You made it.

With the final builds in place, the background shrinks in place and we have ourselves an animated form input. You did it! Now, can the developers? Yes, of course they can. Our point, once again, is that we could bridge the gap between what we intended to dream up in six static frames to one fluid animated concept in Keynote.

From Static To Animated

Static Images in Sketch
Animated version in Keynote

Tips

Keynote has handy guides like any image editor. Check them out by simply dragging from the edge of a ruler to the presentation slide to line up elements.

Drag from any ruler to the presentation slide to create a guide.

The help menu of Keynote also provides very insightful details as to how the program is intended to function.

As pictured, the animate objects section provides insightful knowledge toward animating existing objects on screen.

Final thoughts

UI animation is like theatrical performance. Each item is staged to have a purpose and tell part of the story. Keynote is a fine tool for being free, and it can audition small animations very well. It’s another item to add to the designer belt of rapid prototyping tools.

I hope this walk through was helpful! Definitely let me know of any feedback, and send me a tweet with your own creations @_jshmllr.

For your own experiments —

Download the keynote presentation here: http://cl.ly/071R3E3y3C1L

Download the sketch file here: http://cl.ly/0f3j2Q2c3d2q

Download Keynote (free), Sketch (free trial or $99 full)

Icons used are from the Material Design icon pack here: https://www.google.com/design/icons/