From Sketch to Xcode: Creating an iOS 10 Sticker Pack

An easy method for creating custom sticker packs.

Source: http://www.apple.com/ios/ios10-preview/

Why Are Stickers Important?

iOS 10 sticker packs are one of the many new features with iOS 10 coming soon. Specifically, Messages is getting a lot of new features including sticker packs.

Stickers are not a new thing. Apps like Facebook Messenger and Snapchat already provide users with stickers to send. They’re fun, provide even more emotive description to a transcript, are accessible to the young and old, and are also really easy to create.

They can also be monetized. Line, for instance, is making ~$20 million per month by selling stickers. Some other facts about LINE include:

• A typical sticker pack costs $1–2 with each set being 10–12 stickers.
• On average LINE user sends an average of 389 million stickers, both paid and free, each day.
• That’s 9% of the total number of messages sent daily on LINE.

Stickers are also a great way to brand yourself. For instance, we all know Kim K made some stickers for Facebook Messenger and even her own iOS keyboard app helping her expand her entrepreneurial brand.

Stickers are becoming the next big thing after emojis.

So, let’s get to making our own sticker pack.

Note: This article is primarily geared toward the illustrator or designer who doesn’t code on an everyday basis or work in Xcode as a simple way to launch a sticker pack.

First, Download the Sketch File here:

jshmllr/iOS10StickerPackSketch

After Downloading

Let’s open the file, and first choose our default size for the stickers.

Since the system default is medium, I’m going to choose that.

Next duplicate the artboard of your choosing. For this example, I duplicated the medium sized artboard five times for five stickers in my pack.

duplicate artboards for as many stickers as you need

https://ui8.net/products/smashicons-flat

Our next step is to pull up your sticker assets. Perhaps you’re using Sketch for iconography and sticker design. Perhaps you’re using Illustrator. Either way, use SVG files if possible or a high res PNG with transparency.

For the sake of simplicity, I’ll be converting 5 of these emoticons by UI8 into stickers for my pack.

Let’s scale the icons and center them in the artboard. Ensure to provide an appropriate amount of padding for the sticker asset and also keep in mind that the asset needs to be under 500kb.

drag and drop, scale your asset, and center on the artboard

Export those icons next.

Note, the artboard is set to not include a background color on purpose for exporting as your sticker will possibly be placed in the iOS transcript on top of both photos and messages.

Because of this, it is recommended to test your sticker pack on many different colored backgrounds, photo examples, etc.

Now on to Xcode

We’ve got things exported from Sketch, so it’s on to Xcode now; but, don’t be scared.

If you don’t have it yet, head over to Apple’s developer portal to download Xcode 8.

With Xcode open, create a new project and choose the option Sticker Pack Application.

Choose sticker pack application, give your pack a name, and begin the project.

With the window open, look to the left and choose Stickers.xcstickers and then Sticker pack. This is where our sticker assets will live.

Drop the PNGs you just exported in there.

Note: PNG 24-bit with transparency is the best file format to use for stickers even though .JPG and .GIF are supported.

To the right, to the right

Here they are!

Final Step Before Testing

Our final step before testing is to create our Messages sticker pack icon. This is also included in the Sketch file. Yes, it’s this easy—no code required if we provide the app icon and the assets.

With Sketch open, create your sticker app icon within the template.

There’s an included mask with each artboard size needed for the asset.

Then, with the layers selected, export the artboards to a folder.

With the layers selected, export the artboards.

We then open Xcode and navigate to iMessage App Icon so we can drag and drop the icon images in the space to the right with all of the empty boxes.

iMessage App Icon

After things are uploaded, let’s run the iOS simulator and test things out!

opening sticker pack

With the iOS simulator open, launch Messages and navigate to the app store section to see your sticker pack present.

sending test sticker

You can even stack a sticker on top of another sticker or existing photo.

stacking

Lastly, You’re Ready To Submit for App Review

Check out: https://developer.apple.com/library/ios/documentation/LanguagesUtilities/Conceptual/iTunesConnect_Guide/Chapters/About.html#//apple_ref/doc/uid/TP40011225-CH1-SW1

and specifically submitting the app for the entire process —

https://developer.apple.com/library/ios/documentation/LanguagesUtilities/Conceptual/iTunesConnect_Guide/Chapters/SubmittingTheApp.html

Congratulations on launching your sticker pack!

Thanks for reading, and definitely let me know what sticker packs you’re creating for iOS 10’s launch on Twitter @_jshmllr.

If you’re an illustrator or business and want to partner to launch your sticker pack, reach out to me at joshua@jshmllr.com.

References:

My Sketch file— https://github.com/jshmllr/iOS10StickerPackSketch

Original documentation about the interface guidelines and messages sizes.

Messages | Apple Developer Documentation

Resources - iOS Human Interface Guidelines

The 2016 WWDC videos about launching a sticker pack can be found here:

Building Sticker Packs - Tutorials - Videos - Apple Developer

iMessage Apps and Stickers, Part 1 - WWDC 2016 - Videos - Apple Developer

iMessage Apps and Stickers, Part 2 - WWDC 2016 - Videos - Apple Developer

I’ve also found these additional sketch & walk through resources from other authors:

Cheat Sheet for Creating iMessage Stickers

From sketches to the iMessage App Store: How I got my stickers published in 8 days (Part 2 of 2)

michaellee (Michael Lee)