Happy Emoji Release Day at Figma 🎉

Happy emoji release day! 🎉 We’re excited to announce that your favorite pictorial minions now work in Figma. Since our public launch in September we have received a ton of requests for emoji support, to the point where some teams even left Figma in protest (I kid you not).

It actually took us awhile to figure out teams were churning due to lack of emoji support. Much like seeing the 1 star Emoji Movie in theaters, few would confess to this openly and admit how much those tiny yellow faces mean to them.

We understand the sentiment — it’s 2017 and emojis are no longer optional. They’re the visual language of the digital world, employed to express tone, emotion and nuance across both consumer and enterprise products.

People building interfaces in Figma need emoji support to get a realistic sense of how their designs will function in the wild. Advertising copy is more relatable with cute smidgens of 😉 or an impish dash of 😜. Texts, tweets and emails would be incomplete without healthy sprinklings of 💃 and 🎉. As Arnold from “Master of None” so eloquently phrased it, “I want kissy or I want red hearts only.”

So, why did it take us so long to introduce emoji functionality in Figma? When it comes to implementation, these fanciful creatures are tricky buggers, prone to mistranslation across operating systems. The standard emoji sets are owned by the Facebooks, Apples and Googles of the world.

If you’re curious about the underlying systems that power these ubiquitous pictograms — and how Figma built our emoji system — then this post is for you.

The history of the glyph

Emojis are glyphs with pizazz. In 1999 they burst into being after an employee at a Japanese mobile phone operator realized the limitations of text. He created 176 characters to help communicate emotion, and the idea took off. Phone carriers watched jealously as emojis spread and soon began building their own versions to compete.

Over the years, communication chaos grew as different carriers failed to render other carriers’ emoji sets accurately. In 2009, the Unicode Consortium stepped in to clean up the mess. For the uninitiated, that’s a non-profit coalition of tech companies and other individuals who release an international set of guidelines for representing text. It provides unique code identifiers for every character of every major language, dead or alive.

The Original Emoji, by Shigetaka Kurita (credit MoMA)
When the Unicode standards committee acknowledged emojis as a pictorial language, they created design guidelines for how to draw them, as well as code that maps to specific emoji. For example, U+1F355, the most beloved of all emojis, is “pizza.” 🍕🍕🍕

As long as applications and operating systems follow the general Unicode guidelines, they’re free to use artistic license to interpret the emoji’s appearance. Thus, Facebook pizza looks different from Twitter pizza, which diverges from iOS pizza, which is a far cry from the renderings of LG, Samsung…you get the point.

Maybe you’ve lived through this struggle: you think you’re sending your Tinder crush a sheepish grimace via iOS, but on their Android device it morphs into a serial killer. Who knows how many hapless victims were ghosted due to an emoji’s cross-platform identity crisis.

The Figma way

This kind of mistranslation is a disaster in communication or collaboration applications like Figma. We work cross-platform, so we need to make sure that designers jumping into a file on Windows are seeing the same designs as their fellow colleagues using Macs. Allowing browsers to render emojis with their own operating system library just wasn’t an option.

When researching how we could implement emojis, we looked to other companies for inspiration. Slack in particular found a creative workaround for the problem. They decided to make Apple’s emojis their product standard and built a massive PNG file of Apple emojis that Slack hosts itself. The Slack app downloads the PNG file to have on hand. Then, whenever a user calls for an emoji Slack only presents the relevant section of the image. With this method, inserting emoji is very fast. However, this is at the expense of color quality and it’s not possible to render these emoji at larger sizes.

Grainy emojis don’t matter much for Slack’s chat screens (you barely notice it), but we quickly realized that method wouldn’t work for Figma. Our users are designers — a discerning visual audience if there ever was one. Low-res anything would drive them crazy and degrade their design process, so we needed a different tactic.

We decided to use 64x64 full color PNGs for each individual emoji (compared to Slack’s all-in-one image). There is a slight delay the first time you add a specific emoji, but we cache it so that subsequent uses are fast. This lets you keep a version handy that will be higher-res than if it had been pulled from one mammoth PNG and also helps make Figma more memory efficient.

💁
And that’s a wrap! We’re thrilled to be releasing this fun new feature for the Figma family.

As a parting note: we love listening to user’s needs, incorporating those suggestions and making the lives of designers a little more colorful. So, please keep sending recommendations our way on how to make Figma a better design tool.

Happy 👩‍💻 🤓 👾!