I started created custom emojis as a simple way to bring joy to my UX team on Slack. I believe the first one I ever created was for my VP of design, Gregor Moulton, at the time:
It was first intended just as a fun reaction — people started using it on Gregor’s Slack posts. I never expected it to be much more than that, but then something unexpected happened. It was copy/pasted into a slide deck. Then a Figjam file. Then our PM and Eng team asked about it. So… I created more. And more.
Eventually, I had about 45 emojis for my UX team at the time (which scaled up to 80!). And I started seeing something magical — everybody was so eager to use these to personalize recognition, shoutouts, and more. It was also a wonderful moment when a new hire would onboard and discover they had a pre-made custom emoji to welcome them and give their teammates a face to the name.
I started to get frequent requests from the UX team - where could they find these images to use in presentations, Figjam files, etc? After sharing the Figma file many times, I realized this had to be a Figma library. I started a DesignOps Figma library, and the first thing added was these emojis. The cool thing structurally is that everyone was added as variants, which carried over to Figjam - so just one emoji could be dragged in and then changed to any member of the team.
When I eventually started a new job, I created these emojis as a first task leading the team. I can’t begin to overstate how much joy, engagement, and usage they see. I’ve done it for every team I’ve been a part of (150+ emojis as this point!), and will continue to do so.
So, you may be wondering how to create these yourself. Some quick details. It looks like a lot, but it takes me about ~3-4 minutes per emoji now, and I tend to mindlessly do it while watch a show at night.
- Start a Figma file - create a 128x128px frame
- Copy in and resize an image of the person you’ll be ‘emojifying’
- Zoom way in and use the Figma pen tool to quickly draw a rough outline around the face
- Group that layer with the face, and then turn that layer into a mask
- Add fill, remove stroke for that mask layer. Make sure it’s centered in the frame
- Duplicate that mask layer, unmask it, and move it out of and below the other grouped layers
- Add a fun color to the fill, then scale it up by 1.25x, and re-center it
- Duplicate this layer, scale it by 1.25x, adjust the color to be a darker shade
- Rinse and repeat the previous step as needed to fill the frame
- Export as .png and upload to custom emojis on your Slack domain
Happy emoji’ing! I promise, it’s worth it.
More Thoughts
