Design your app with Adobe XD CC using resources from UI kits and icon sets.
add-emoji_1000x560

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.

add-emoji_step1

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.

add-emoji_step2

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.

add-emoji_step3

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.

add-emoji_step4

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

10/31/2018

Adobe Stock contributor: SFIO CRACHO

Was this page helpful?