Published on | Prototyping: From UX to Front End — Medium Anima App

Improve your conversion rates by adding life to your content

Up until today when you wanted to create an animated GIF from your Sketch design, you had to use all sorts of duct tape solution such as using Keynote or other tools that were not meant specifically for this task. Today we’ll talk about a new Sketch plugin that empowers you to create GIF animations from your design, right inside Sketch.

Whether you’re creating GIFs for your Newsletters, Websites, Facebook Ads, or just for fun, this new plugin will cover it all.

“I started using GIFs in my emails a couple months ago. Staggering response in click rates!” — Meg Cowley

Timeline for Sketch lets you select either an Artboard or a Group, and animate the layers within it. There is no need to create an thousands of artboards for each frame or anything like that. It’s much simpler.

Sample GIF from a newsletter to increase Open-Rate

How To Get Started

In this tutorial we will making this simple GIF:

The first thing you’ll do is create a new Artboard in the size that you want the GIF to be in.

The second is to lay out all the layers and texts on the Artboard, in their initial position.

Notice that for all the layers that should appear only later, I set their Opacity to 0. What we should see here is the Initial Keyframe for where the animation should begin.

Now it’s time to fire up Timeline and start making some magic!

Select the Artboard and click “Animate Selection” in the Anima panel under Timeline tab.

And here we are in the Timeline Editor:

Be default, Timeline create a second Keyframe aside from the Initial Keyframe, which is why we see now 2 Keyframes.

Since in this animation we present 4 words, we will need 4 keyframes. So click the plus button and add 2 more Keyframes.

Next we will hide and show layers for each Keyframe.

Note that the default duration for each timeline is 0.2 seconds. In order to change all the durations to 0.6 seconds which is what I chose, I can use the menu option “Change Duration” which allows me to change all the timelines (blue lines) duration at the same time, and more accurately since I’m not dragging the blue line manually.

Here is the whole process sped up:

At this stage when we finish setting up the Keyframes and Timelines, we can click “Play All” (meaning all Keyframes one-by-one), and preview our animation.

Now we can either keep tweaking it or if it’s done, export it as GIF!

Timeline for Sketch: Download

Demo Sketch File: Download

Read about our Secret Plan for Timeline

Join the discussion on Facebook or Twitter.

❤️ Anima team

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

How to Create a GIF in Sketch was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to Create a GIF in Sketch

Cool stuff, every week

More Articles