Happy Emoji Release Day at Figma 🎉 | Figma Blog (opens in new tab)

Figma introduced emoji support in 2017 after users repeatedly requested it, emphasizing that emojis had become essential to modern digital communication and interface design. The main technical challenge was ensuring consistent rendering across operating systems without sacrificing visual quality. Figma chose individually cached, 64×64 full-color PNGs, providing sharper and more memory-efficient results than Slack’s single large sprite image.

Why Emoji Support Mattered

• Designers need to preview interfaces with the same visual content users will see in real products.
• Emojis communicate tone, emotion, and nuance in advertising, messaging, email, and social media designs.
• Some teams reportedly left Figma because the feature was missing.
• Native browser rendering was unsuitable because emoji appearance varies between operating systems and platforms.

The History of Emoji and Unicode

• Emojis originated in Japan in 1999, when Shigetaka Kurita created 176 pictorial characters to supplement text.
• Competing mobile carriers developed incompatible emoji sets, causing inconsistent rendering.
• In 2009, the Unicode Consortium standardized emoji identifiers alongside other written characters.
• Unicode defines the character code and general design guidelines, but companies remain free to create their own artwork.
• As a result, the same emoji can look substantially different on Apple, Google, Facebook, Twitter, Samsung, and other platforms.

Why Cross-Platform Rendering Was Difficult

• Figma is a collaborative, cross-platform application, so Mac and Windows users need to see identical designs.
• Depending on each operating system’s emoji library could make the same file appear differently to different users.
• Visual inconsistencies can alter an emoji’s perceived meaning, creating communication problems.

Figma’s Rendering Approach

• Slack’s approach used a large PNG containing Apple’s emoji set and displayed relevant regions as needed.
• That method was fast but limited by lower color quality and poor scalability at larger sizes.
• Figma rejected the sprite-image approach because designers are especially sensitive to low-resolution visuals.
• Instead, Figma used separate 64×64 full-color PNG files for each emoji.
• Individual emoji files load slightly slower the first time they are used, but are cached for faster subsequent use.
• This approach provides higher resolution and uses memory more efficiently than one massive image.

Figma’s solution prioritized consistent, high-quality rendering over the fastest possible initial load. For design tools and other visually demanding collaborative applications, individually cached assets can be a better tradeoff than relying on platform-native rendering or low-resolution sprite sheets.