Messaging
iMessage apps and Sticker packs are messaging extensions that let people share content with friends, communicate expressively, and share collaborative experiences.
iMessage Apps
An iMessage app provides an interactive experience within the context of a Messages conversation. iMessage apps enable people to share data and media, collaborate on shared tasks, and play games with one another.
Design an intuitive interface. If your iMessage app provides static content, such as text, photos, or videos, make sure it’s easy for people to browse and select items for insertion into the conversation. If your app is interactive, such as a multiplayer game board or collaborative takeout order, make sure its functionality is useful and understandable.
Provide focused content. For clarity and ease of use, each messaging extension should have a single focus. Don’t try to design one app that combines both stickers and ridesharing, for example.
Provide a fun, collaborative experience. iMessage apps are typically used in the context of fast-paced, informal conversations between two or more people. Creatively leverage this environment to encourage back-and-forth participation through sharing, editing, or augmenting content. If all parties are using the app together, content updates occur in real time.
Highlight interesting iOS app content. Extend the functionality of your iOS app by surfacing its content in the Messages space. Think about what kinds of information people might want to share and how they can interact with your app within the context of an active conversation.
Inset content to avoid cropping. Your app's content is presented in message bubbles with rounded corners, so don't put essential information in the corners.
Differentiate compact and expanded views. Your app appears in a compact view below a conversation. This view should visually distinguish your app from other apps and provide access to frequently used features. People can also open your app in an expanded view to access advanced features or see more options at once. Note that horizontal scrolling isn’t permitted in the compact view.
Allow text editing in the expanded view only. The compact view is roughly the same height as the keyboard. To ensure that users can see what they’re editing, allow text entry only in the expanded view.
Stickers
Stickers offer a fun, engaging way for people to express themselves in a Messages conversation without typing or using emojis. A sticker is an image or an animation that can be sent or placed on messages, photos, and other stickers to add emphasis and communicate emotion.
Design for expressiveness. People use stickers to visually convey moods and reactions. Strive to deliver stickers that connect with people at an emotional level. Consider incorporating imagery, words, and phrases to add new dimensions to conversations.
Think globally. Messaging is a universal form of communication. Aim for stickers that have broad, international appeal.
Use descriptive image names or provide alternative text labels. Although they aren’t visible onscreen, image names and alternative text labels let VoiceOver audibly describe stickers, making navigation easier for people with visual impairments.
Add vitality through animation. Although stickers can be static images, animated stickers are a great way to impart energy in a conversation. Be sure to use a frame rate high enough to keep motion fluid.
Test placement possibilities. Users can scale, rotate, and place stickers over parts of a conversation. Make sure your stickers are legible against different colors and imagery, regardless of their position or size.
Consider using vibrant colors and transparency. Vivid colors add richness and excitement to a conversation. Transparency allows meaningful placement of stickers onto messages, photos and other stickers.
Sticker Sizes
Messages supports three sticker sizes, which are displayed in a grid-based browser. Pick a size that works best for your content and prepare all of your stickers at that size.
| Small size |
|---|
| 300px by 300px |
| Regular size |
|---|
| 408px by 408px |
| Large size |
|---|
| 618px by 618px |
Scale stickers appropriately. Although Messages scales larger stickers down if necessary, it’s best to provide prescaled stickers for optimal quality and performance.
Be mindful of file size restrictions. For efficiency, each individual sticker may not exceed 500KB. Note that Xcode saves PNG animations using a 24-bit palette, which may lead to larger than expected file sizes.
Sticker Formats
Messages supports stickers in the following file formats:
| Format | |||
|---|---|---|---|
| PNG | |||
| APNG | |||
| GIF | |||
| JPEG |
iMessage App and Sticker Pack Icons
Like iOS apps, iMessage apps and sticker packs need recognizable app icons.
Keep the background simple and provide a single focus point. Design an icon with a single, centered point that captures attention at a glance. Include a simple background that doesn’t overpower other icons.
Keep icon corners square. The system applies a mask that rounds icon corners automatically.
Provide different sized icons. Your icon appears in the App Store, Messages, notifications, and Settings. To ensure that your icon looks great in any context and on any device, you can provide variations of your icon in the following sizes:
| 1024px by 768px | 120px by 90px | 64px by 48px |
| 180px by 135px | 96px by 72px | 58px by 58px |
| 148px by 110px | 87px by 87px | 54px by 40px |
| 134px by 100px | 81px by 60px |
For additional guidance on designing great app icons, much of which can be applied to iMessage app and sticker pack icons, see App Icon.
To download an iMessage app and sticker pack icon Photoshop template, see Resources.
For implementation details, see The Messages Framework.