Xcode 8: How To Create an Animated iMessage Sticker

I’ve finally have little bit of time set aside this weekend to work on a fun side project. Ever since I saw my friend @chiuki‘s Fit Cat app on the Android Watch, I knew I needed to have it on my Apple Watch and @chiuki agreed to let me make it.

Fit Cat displays the cutest cat designed by the amazingly talented @VPoltrack based on your step count. If you’re lazy, the cat is sleeping or playing with a yarn ball and if you’re fit, it can sing karaoke or climb a mountain. It’s seriously the cutest.

Of course when I started my new project, I opened the Assets Catalog, and was immediately tempted to create Fit Cat stickers. After all, wouldn’t it be fun to share these with your friends?!!!

It’s easy to make static stickers, but I do have different animation frames for Fit Cat. I remember them mentioning animated stickers in the iMessage Apps and Stickers, Part 1 WWDC Talk and that it’s easy as well, but the Xcode UI for it is completely unintuitive, so I’m writing how to do it here so you don’t have to figure out where in the talk they mention it like I had to.

Create a Sticker Pack

The first step is to create a Sticker Pack. This is just right clicking in your Assets Catalog or clicking the + sign at the bottom, and choosing the New Sticker Pack option:

xcode create sticker pack

Create Sticker Sequence

This is the part that’s a bit unintuitive. The Sticker Pack comes with a default Sticker, but it’s a non-animated one. I tried to go to the sticker’s Attributes Inspector to change it to an animated one, but that’s not an option.

The trick is that you have to right click on the Sticker Pack folder, and select the New Sticker Sequence option. If you right click within the sticker area, you have to first select Add Assets, then New Sticker Sequence (which is where I got stuck).

xcode create sticker sequence

Add Stickers

The final step is to add the stickers! This part confused me yet again, because there is an outline for only Frame 1 and I was confused how to add other frames of the sticker:

Xcode Sticker Sequence Frame 1

Apparently to add additional frames, you just drag in the images next to the first frame! Duh! Great example of how a bad UI makes you feels stupid as the user!

The end result was a fencing Fit Cat!

Xcode Sticker Pack

My favorite part is the play button on the final sticker. Love seeing the animated Fit Cat sticker in fencing action!

Customize the Animation

The animation was a bit too fast for me. You can customize it by going to the Attributes Inspector on the Sticker Sequence as expected:

Xcode Sticker Sequence Animation

And you can see all your changes live right in Xcode!

I ❤ iMessage Stickers!

Enjoy the article? Join over 20,000+ Swift developers and enthusiasts who get my weekly updates.