Making GIFs in Sketch + Invision

Interactive prototype + a bit of movement in thoughtful places = the best of both worlds

I’ve been using Invision a lot lately. I’ve been using it for everything from sharing an idea for a single transition to prototyping an entire app. When creating a prototype to show how an app works, there are often parts of the experience that can benefit from a tiny realistic dose of movement. Like these:

  • IRL actions the user is taking. Capturing a photo or video, scanning a credit card.
  • Connections being made, IRL or on a device. Logging in with a social account, requesting a service, an activity tracker logging a heart rate.

This is where I’ve turned to Sketch to make GIFs. It’s possible to communicate the experiences listed above by clicking through a few static comps. So why take the time to make GIFs? Here’s why I do it:

  • To emphasize key actions. Simulating the experience of what’s actually happening helps differentiate actions the user is taking (like capturing a photo) from actions better shown in clicking through wires (like selecting a photo from a camera roll).
  • To help it feel real. Bringing some movement to an Invision prototype gives it some life. Invision is a phenomenal tool to communicate flows and experiences. GIFs give us control over creating custom interactions and experiences. GIFs + Invision is like the best of both worlds: interactive prototyping tool + a bit of movement in thoughtful places = impactful ‘ah ha’ moments.

It’s possible to have a lot of control and create beautiful GIFs showing custom interactions (Invision wrote about it here). So why use Sketch? Here’s why I do it:

  • I’m already there. I can create a GIF directly from the software I’m already using. There’s no break in my workflow.
  • It’s fast. It takes <10 minutes to make a simple animation.
  • Constraints keep me on task. My goal in creating these GIFs is to communicate a key action. There are constraints on pace and no easing options, which is fine. I don’t want to spend time creating something high-fidelity, I want to create something that adds clarity to the experience and that’s about it.

Here’s how I’ve been making GIFs:

First, download the Generate GIF plugin here. (Thanks to @nathco on GitHub for making this wonderful plugin.)

  1. Create a new Sketch doc for the GIF only (this part is important, the plugin exports all boards in the file) and copy over the screen from your design that you want to animate.
  2. Create art boards labelled in the order you wish to export them. Shift elements on each board to achieve the transition or animation you’re looking for. Sometimes I use 20 boards, sometimes 8. It depends on the complexity of what I want to show. Below, my goal was to simulate the experience of taking a photo: pointing the camera at an object, bringing the object into focus, deciding on an angle, and capturing the photograph.
  • Go to Plugins > Generate GIF. There are a few options here, for looping and timing. I’ve been mostly sticking to 100/200ms so far.
  • Ta da! Check it out:

Is anyone else using GIFs in Invision? Are you using other software to make them? If you’ve found a way you ❤ please share!