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.