UI Faces Plugin in Adobe XD
Adobe XD offers web designers a lot of convenience while preparing web designs and preparing web designs prototypes, especially with the plugin support, you can get things done very quickly. Today I’m going to talk about an add-on. Thanks to this plugin, you can automatically fill in the blanks such as profile images or avatars that you have prepared on your website. With the plugin you can use face photos found from different sources in your own works.
With the filtering feature, you can filter the type of faces you are looking for. If you are looking for a happy face, you can filter it. Or if you are looking for a black, blond or auburn type, you can also filter it. Now let’s see how we can automatically fill the profile image field in our web designs and mobile applications with this plugin.
Before the video I prepared such a work. As you can see in this work, it can be an example of a mobile application or a mobile version of a website. You can think of it however you want. What I want to show here is how we can use avatars. As you can see in the design, this is the avatar section. Profile images will be uploaded here. Therefore, if you made this design in Photoshop, we would have to find a profile photo on the internet, but I will show you how we can do this with Adobe XD.
An Addon to Find Profile Images Automatically
First, we need to install a plugin. The plugin is called UI Faces. Here is the area where we will add the plugin. There’s a plugins icon at the bottom left of the program. I click this icon. The field on the left is changing. I open the plugin page by clicking to Discover Plugins button. In this window that opens you already see a plugin called UI Faces. If you don’t see it, you can click the browse tab here and type the name of the application. Let’s write right now. I’m typing and clicking the Enter button to search. The UI Faces plugin comes first. There is a small install link at the bottom left of the area where the plugin is located. I click this. The plugin has been installed. I can close this page.
What is UI Faces Plugin?
In the plugins area on the left, there are plugins installed for Adobe XD. This is the plugin we installed. When I click on it, the details about to plugin are opened. What did we say while preparing to page? The rounded gray areas of the page are where the profile images will be found. I click on one. When I click on it, different options open on the left. Let’s examine these options. The options here are very where we specify the profile image sources that will be added. You may want to get it from unsplash.com or you may want to get portrait photos from pexels.com. And there are various different sites like this one. As you can see, there is also the Donated section, with donated images. There are various options here. Let’s continue by choosing one of them.
For example, let’s choose pexels.com, which we are familiar with, first. When we go down, there are filters here. When you click on the filters, we can determine whether it will be a woman or a man, a happy or a more normal face, or whether it will be black, brown or blond, according to skin color.
When we go a little lower, there are some features in the Advanced tab, there are some filter systems and sorting systems. The first option is the option that determines the order of profile photos that will show you. It will sort by popularity. You can also choose the third option, which allows us to add the profile photo, we will add in black and white color.
Using UI Faces Addon in Adobe XD
Now that we know the UI Faces application, we can move onto the application. Here we have a visual field. Let’s make our filters right away and put a sample photo. I want it to find these photos on pexels.com. We have two options below.
- If we click the Apply Randomly button, it will choose a random photo for us and put it here. First of all, let’s choose this as the first example. When I clicked on it, it presented me with an image like this as a first example.
- Now let’s choose the other option, but this time let’s not leave it to the system. Let’s choose ourselves. I click to Select Photos button. When I click this button, it shows me sample photos on pexels.com. Let’s filter and see. Let’s choose the woman, happy and brown options. I click the Select Photos button. There are the photos suggested to us on pexels.com to expand the filter results, you can also select others to list more different photos. I choose others. Let’s have a look at it. What kind of photo examples will it give us. As you can see, the number of sample photos has increased. Here we can take a look at other photos. I select this as a sample photo and click the Apply button. My image appeared here with Apply. As you can see, we can add profile images quickly.
UI Faces with Repeat Grid
How do these operations work on the grid system? This is what we call Grid. Let me show you by making an example. Let’s define a circular area and I will duplicate this area. For example, there may be a comment fields, we may be designing comments, or we could be making various lists like this. We don’t need to put a profile picture on all of them one by one, because there is a faster method. I drew the circles. Here I click on Repeat Grid. When I click on it, it determines a button below and to the right of the profile area I have drawn. I guess we could call it a button. When I drag that down, I can also increase the spacing between them if you want. And I can also increase it sideways. This is how I created the grid system here. I want to show this.
I will talk about the feature of adding avatars in Repeat Grid systems. I choose one image. I click the Select Photos button. By the way, if you don’t select any of them here, it means that he choose them all. Here I will choose three photos. Why do I choose three photos? Look, it says 0/3 selected here. So I have the right to choose three images. All we had to find was three. Three lines were down. I choose one from the list, and I choose the second. As we can see, I have chosen two. Now I have to choose another one. I select it too and it completes. After completion, I click the Apply button. As soon as I click the Apply button, I can see that the profile images I created with the Repeat Grid are filled automatically. This is how the profile images on Repeat Grids were used with UI Faces.
In this tutorial, I showed you have to add an avatar quickly, with the UI Faces plugin, of course. While preparing your designs, sample designs are also a way to quickly complete demo content. That’s all for this video. If this video helped you out, don’t forget to like, share and subscribe. I’ll see you in the next video.