Alberto Orsini
Design Leader and UX Specialist

Blog

Elevate your designs with emoji 🦄

There are a few pioneering moments which paved the way for human development. The legacy we leave behind, history as we define it, little ticks in time. The fall of the Roman Empire, the invention of the railroad, putting a man on the moon, the invention of the internet and the creation of emoji. 🎉

Many variations exist from which to pick so we can express our #millennialism; and that is something to think about. The difference between :-), :), (: and 🙂 could mean missing out on a friendship, losing the chance of a second date or the horror of being ridiculed by your youngest sibling — to think you used to be the cool one…

giphy.gif

So whether you decide to choose from the classic selection of emojis, the revealing KIMOJI or a mind-blowing animoji (not sure, but I think you need a black turtleneck to use these), we can all agree we're past the point where words are enough to express ourselves. 🦄

How do I use emoji in my designs?

I recently posted some designs I've been working on to my Instagram Story. To my surprise, I got asked by a few other designers about the use of emoji in my design file. While built into MacOS, somehow this feature remains somewhat hidden. Here's how you can start using emojis right away:

1. Create a text layer

This could be in any design software like Photoshop, Illustrator, Sketch or Adobe XD.

 This is a selected text layer in Sketch.

This is a selected text layer in Sketch.

2. Go to the Edit menu

With your text layer active, go to the Edit menu at the top of your screen.

 Edit > Emoji & Symbols

Edit > Emoji & Symbols

3. Select Emoji & Symbols

Your bottom option should be Emoji & Symbols. Go ahead and click on that.

4. Select the emoji that best describes your situation

Tip: One thing I ❤️ is that you can actually search for the right emoji by typing on the search bar as opposed to having to swipe through endless panels of emoji.

 I can find, I can search. It is CRAZY!

I can find, I can search. It is CRAZY!

5. Click on the emoji of choice

This should automatically add it to your text layer. Like any other text, you can change the properties such as size, kerning, line height, etc.

 Bro…

Bro…

Bonus 1: If using Sketch, emoji can also be used as text overrides within the Override Properties.

 Say whaaaaaaaaat?

Say whaaaaaaaaat?

Bonus 2: This is not limited to design application either. For instance, I can insert an emoji right here in this text 🤘🏼, and in any other text application such as Twitter.

Screen Shot 2018-01-30 at 6.29.08 PM.png

The bottom line

While simple, this is information everyone needs to have in their arsenal. Do not get caught in the future without the right emoji in place.


I am a designer, an entrepreneur, and a dad. I consult with clients of all sizes on design, product and team strategy.

You can find me on TwitterDribbble, and Instagram.

If you found this useful, feel free to share with your friends.

Have something to add? Leave a comment.