Create prototypes with emojis from a UI kit

We’re designing an app that will use different elements from the Apple UI Design Resources for iOS. Be sure to download any of the UI kits available for XD to design for your favorite platform.

Sometimes you’ll want to use UI elements provided in the manufacturer’s toolkits. Other times you can make your own fun elements. You can also find variations from Adobe Stock or the Creative Cloud Market. Here’s a small sampling of Grinning Face emojis that we found in various libraries and icon sets.

It’s easy to copy and paste assets into your designs. Here we designed a custom chat component for our application that will use the system keyboard and the Smileys & People emojis set for iOS.

We created a few intermediate chat screens and wired the artboards in Prototype mode using the Auto-Animate action. With Auto-Animate, XD looks for the layers or layer groups with the same name and animates the differences between them. For this design, we grouped the elements in the top half of the artboard and named the group Chat.

Now you can use design elements from various UI kits to save time when designing and prototyping apps.