Simple animated GIFs in Sketch with AnimateMate

As I’m currently the sole “design” resource at my job, I occasionally get requests for some help that is outside my usual purview. My usual being drawing lots of boxes in various shades of grey. Ah, the glamorous life of user experience designer.

The latest was for some simple graphics and mockups to support a marketing blog post. Easy enough, I can handle geometric shapes and text. Fire up Sketch, and voilà.

offer

and yes, the shortcode works

“Great, now how about some thumbnails for the emails? Maybe with a loading bar?” Sure, no problem. Back to Sketch.

Like this?

Like this?

“Perfect. But you know what would be fun? A GIF where the loading bar is actually…loading.” Hmm, ok…

Which brings us to the actual topic of this post. GIF creation wasn’t something I was actually familiar with. At least not from scratch like this. I knew people used Photoshop to do it, but that felt like overkill in this case. Particularly because I don’t have CC installed on my work machine, so that would be a hassle. But I knew, as with most problems, I’m rarely the first person to encounter a problem. Plus, Sketch users love their plugins, so I was willing to bet someone had already created the solution. Google didn’t let me down, and led me straight to AnimateMate.

Straight from their website:

“You know feeling when you just need a simple animation for your awesome concept and you realize that it’s a huge process to move all assets into some other application? That’s a lot of hassle!”

Dang right it is! Tell me more. Sizzle reel go!

Looks great to me. Download, install, click on the plugin menu in Sketch, and…realize I have no idea how to use it. I mean, I remember keyframes from my previous life as a video editor (a whole other story), but I was just clicking randomly here. Oh, there’s some instructions on the GitHub page, and even better, a video! Video wins.

Ah, that makes sense.  So back to sketch. I’ll have to add a few extra bits to allow for the movement of the loading bar, but I understand the principles of what I’m doing now. Add my bits, set a keyframe, move the bar, keyframe, repeat, done. Export the result, and…

It moves!

It moves!

 

There you have it. While not a solution for everything, if you just need a simple animation, Sketch can handle it with some help from the ever expanding world of plugins.