From Sketch to Xcode: Creating an iOS 10 Sticker Pack
An easy method for creating custom sticker packs.
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:
Let’s open the file, and first choose our default size for the stickers.
Next duplicate the artboard of your choosing. For this example, I duplicated the medium sized artboard five times for five stickers in my pack.
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.
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.
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.
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.
Then, with the layers selected, export the artboards to a folder.
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.
After things are uploaded, let’s run the iOS simulator and test things out!
With the iOS simulator open, launch Messages and navigate to the app store section to see your sticker pack present.
You can even stack a sticker on top of another sticker or existing photo.
Lastly, You’re Ready To Submit for App Review
and specifically submitting the app for the entire process —
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 firstname.lastname@example.org.
My Sketch file— https://github.com/jshmllr/iOS10StickerPackSketch
Original documentation about the interface guidelines and messages sizes.
Sticker packs simply provide static sets of stickers, images that users can send inline as messages or peel off and…developer.apple.com
The 2016 WWDC videos about launching a sticker pack can be found here:
Turn your artwork into a sticker pack for Messages on iOS 10. Learn how to bundle both images and animations into your…developer.apple.com
Messages allows your apps to create an expressive experience within a conversation. Get an overview of the iMessage App…developer.apple.com
Messages apps allow people to collaborate by using your app. Learn how people can work together to accomplish a task…developer.apple.com
I’ve also found these additional sketch & walk through resources from other authors:
If you are just getting into self-publishing iMessage stickers, here’s a cheat sheet that I use to improve my workflow…medium.com
This is a continuation from my previous post, you can find part 1 here which talks about my process for preparing my…blog.prototypr.io