Add movement to your prototypes with Smart Animate — now in Sketch

We’ve made some big improvements to Prototyping in Sketch lately, and we’ve listened carefully to your feedback — including requests for animation. With our latest update, we’re introducing Smart Animate — the easiest way to bring movement to your ideas.

Rather than give you a step-by-step guide to using Smart Animate, we thought we’d share a few practical examples of how it could work for you. Each one includes a Sketch document to download or duplicate to your Workspace, so you can take a peek behind the curtain and see how we’ve made things work.

But before we dive into those examples, let’s run through the basics.

What is Smart Animate?

Smart Animate looks for layers with the same name on multiple Artboards and animates their changes as you transition between them. If you’ve ever used Magic Move in Keynote, you’ll feel right at home here!

To set up Smart Animate, make sure that any layers with changes you want to animate have the same name across multiple Artboards. When you link from a layer or Artboard to another, select Smart Animate as the Animation type under the Prototype tab in the Inspector. You can also set a duration and easing type to customize how things move.

Our goal with Prototyping is always to keep things simple and fast. But animation is one of those areas that could easily be an app in its own right (indeed, there are plenty of good ones out there already). With Smart Animate, we’ve struck a balance between giving you more options and helping you iterate on ideas quickly.

With the basics out of the way, let’s look at some different approaches to using Smart Animate in your prototypes.

Using Smart Animate to indicate progress

From spinners to skeletons, there are plenty of ways to use animation to give a sense of progress. In this example, we’re using a Touch ID-style fingerprint to help users understand that their biometric data is being checked when they sign in to their banking app.

In this example, we’re able to vary the speed at which different parts of the fingerprint ‘fill up’ because the length of each segment differs, while the overall timing stays the same.

To achieve this effect, we need to make good use of masks, as well as groups and rotation of separate circles to fill up most of the segments. It’s definitely worth exploring the demo document if you want to see exactly how it’s done. You’ll also be able to see how we achieved the expanding glow — a neat combination of layer size, border opacity, and layer opacity.

Using Smart Animate for progressive disclosure

When you’re dealing with a lot of information in your designs, it can make sense to hide some of it at first, and only show it when a user makes a conscious choice to see more. In this music player, we’re introducing more details about an album (track listing, genre, etc.) that aren’t necessary to show in the Library view.

Here, we’re using layer position and opacity to control the direction that different elements animate into view. We’ve also added a close icon that uses a ‘Previous Artboard’ target to play the animation sequence in reverse and close the modal.

Take a look at the demo document to get a better idea of how this one works — especially how we’ve used layer position to control the movement of each element.

Using Smart Animate to add polish

This one is a little harder to explain! Sometimes, that sense of ‘polish’ in your work can come down to the tiniest of details done really well. In this example, we’ve put together an onboarding sequence for a vinyl player companion app. As you navigate through the onboard screens, the illustrations move and change to visualize the playback process.

If you open the demo document, you’ll see we’re leaning heavily on layer position to move elements on and off screen as you progress through the onboarding steps. A handy tip for this is to use the arrow keys on your keyboard to nudge elements out of your Artboard, rather than clicking and dragging. This stops them from being ‘re-parented’ automatically to a different Artboard or the Canvas.

Finally, to achieve the spinning record effect, we’re setting a very high rotation value for the vinyl’s label and color layers — this way they rotate multiple times during the final transition.

Using Smart animate in navigation

Of all the use cases for Smart Animate, this one is a pretty common one. In this example, we’re recreating a classic macOS sidebar, complete with collapsible items. If you’ve been following along with the other examples, you’ll have a good idea of how we’ve made most of this work, but you may also notice we gave the sidebar button a neat hover state.

Like many of the other examples in this post, you’ll see by opening the demo document that we’re playing with layer position here. There’s also a little rotation going on with the chevron to disclose the child items in the sidebar. It’s all fairly straightforward, but the end result is that we can now mimic macOS-style UI animations in Sketch!

Smart Animate is one of those features you can learn by having fun and experimenting with, so we’d encourage you to do just that. Whether you want to add some basic movement, or do something more advanced, Smart Animate makes it possible, but more importantly, accessible.

As ever, we’d love to know what you think of Smart Animate — we’re over in the forum if you have questions, suggestions, or simply want to share something you’ve made with it.