Tina Feijóo
Tina Feijóo
UX/UI Designer at Haiku

Bring animation into Slack with custom emoji

April 18, 2019 - 3 min read

Like many other companies, we use Slack as our go-to tool for the day-to-day communication of our team, which is a lot, considering we work 100% remotely.

Spending so many hours using this app, over time we customized it more and more to fit our needs. Of course we first covered the basics, such as selecting a theme, setting up channels and so on, but eventually we noticed that we didn't have the appropriate emojis within the default palette to properly boost our messaging experience and convey meaning into our conversations.

This is when we took advantage of Slack's Custom Emoji feature to create and add our own. We started out using simple and widely used images and GIFs that were meaningful to our team, like these ones:

Some of our custom emojis in Slack

Custom animated emojis

Then, we took things one step further, and decided to combine forces and use Animator to create our very own custom animated emojis.

Here are a couple live Animator examples we use in our custom emoji library:

Here's how they look in Slack: Some of our custom emojis in Slack

How to

If you're ready to upgrade your Slack experience using Animator, you simply need to:

  1. Design your custom emoji in the Design tool of your choice (we currently support Sketch, Figma and Illustrator).
  2. Import your designs into Animator.
  3. Animate your slices!
  4. Export as GIF.
  5. Add to Slack as a custom emoji!

Tip: To match Slack's sizing guidelines, you can resize your animation's stage in Animator before exporting.

That's a wrap!

If you've made any cool custom emojis using Animator, share them! We'd love to see them ❤️