Engineering

Dan Wood

ยท

Mar 18, 2022

Designing a custom, inclusive emoji picker

One of my favorite aspects of the Remotion software is the ability to send and receive Emojis to and from my colleagues.

Our emoji sending includes custom animation for certain characters (such as a bicycle ๐Ÿšฒ or rocket ๐Ÿš€ moving from one side of its window to the other, or raised hands ๐Ÿ™Œ moving up in celebration).

We even replaced certain emoji (e.g. fireworks ๐ŸŽ†, donuts ๐Ÿฉ) to take advantage of Appleโ€™s particle animation engine for some spectacular effects.

Sending emoji in Remotion is a great way to stay connected to your teammates throughout the day. Fun as a back-channel during a stand-up meeting or informal presentation, or just to say hello.

This week, Apple has released the version 12.3 update to its Monterey operating system, and with that update โ€” along with the update to iOS version 15.4 โ€” comes a new batch of emoji.  

We are proud to share that Remotion already contains support for these new emoji. As long as you and your colleagues are running this latest operating system, you can start sending each other melting faces, salutes, and so much more!

The newest batch of emoji.

Weโ€™re very interested in designing software for inclusion, so a new feature in our software is the support for multiple skin tones in our Emoji sending.

Much like other software that allows you to pick emoji, you can now choose a skin tone that reflects you. You can keep sending the generic yellow emojis representing people, or you can pick one of the five skin tones (light, medium light, medium, medium dark, and dark) and send your emojis that way!

Our emoji picker with medium-dark skin tone selected.

Our emoji picker with the skin-tone chooser visible and light skin tone currently selected.

โ€Weโ€™re proud of our emoji picker โ€” weโ€™ve had to create our own custom picker for technical reasons. (Specifically, Appleโ€™s picker only works for inserting emojis into editable text, so picking an emoji outside of that context isnโ€™t possible).

One improvement we can offer over Appleโ€™s emoji picker (which you use for inserting emoji into text) is that when it comes to the two-tone emoji โ€” such as the brand-new handshake emoji โ€” you can choose a handshake based on your chosen tone in combination with any of the five skin tones.

Notice the skin tone for the hand on the left matches the rest of the single-tone emoji, while the hand on the right varies from light to dark.

A closer look at the two skin tone emoji.

Because weโ€™ve had to do some work under the hood to support our own emoji picker, we thought that it might be helpful to release some of our work to the developer community. So we are announcing our Emoji-Library-and-Utilities repository on GitHub. Itโ€™s open-source (MIT License) for developers to get an easy-to use set of emoji, along with Swift code (in the file EmojiUtilities.swift) for reading our data files and manipulating the emoji to add skin tones where appropriate.

The source code also includes methods for reading the latest versions of the Emoji data from the Unicode Consortium, so more advanced developers may wish to use this as a starting point for manipulating Emoji data for other purposes. (At this point, our repository includes the data and manipulation but not any UI components. Be sure to see the README.md file in the package for more details.)

๏ธ™
"๐ŸŒ„":["sunrise over mountains","morning mountain sun"], 
"๐ŸŒ…":["sunrise","morning sun"],
"๐ŸŒ†":["cityscape at dusk","city evening landscape sunset"],
"๐ŸŒ‡":["sunset","dusk sun buildings"]
๏ธ™

An excerpt of EmojiAnnotations.json, which you can use for captions or searching.

๏ธ™ 
๐Ÿ’ช,1 
๐Ÿฆพ,,12 
๐Ÿฆฟ,,12 
๐Ÿฆต,1 
๐Ÿฆถ,1 
๐Ÿ‘‚,1
๏ธ™

An excerpt of Categories.csv. Each line contains an emoji character with additional information such as whether it supports adding skin tones and what version of Emoji it is first available in.

We hope that this will help foster the sense of inclusiveness in more software! Tweet @danwood or @remotionco with any thoughts. And check out my blog post on why we're proud to be building a native macOS app.

Engineering

Dan Wood

Mar 18, 2022

ยท

Designing a custom, inclusive emoji picker

ยฉ Multi Software Co. 2023

ยฉ Multi Software Co. 2023