The course is part of this learning path
This course covers how to implement a range of design features within your iOS app. In order to do that, we're going to use Adobe XD, and you will see it in practice.
Learning Objectives
- Learn how to draw icons and logos within your app
- Use UI kits to help you when building your app
- Understand the free resources that you can use as templates for your own apps
Intended Audience
This course is intended for anyone who wants to learn how to develop apps on iOS.
Prerequisites
To get the most out of this course, some basic knowledge of iOS development would be beneficial. We recommend that you take this course as part of the Developing Mobile Apps for iOS learning path.
Hi, within this lecture, we're going to see how we can use plugins. So, in order to do that, come over here to UI menu and choose plugins from that menu, so that you can see the plugins menu on the left hand side. In fact, we have seen that before when we try to go over the overview of the Adobe XD, but we haven't seen what it really does. Now, we're going to see it. For example, I have some plugins over here but most probably you don't have one. So, you can just add one by clicking on that button and searching for one over here. For example, I'm going to show you a faces plugin so that you can create very good design by bringing in some people faces in your project. So, let me show you how it goes after you open these plugins. All you have to do is just come over here and write UI faces. Okay, so in here you will see the install button. If you click over here, it will just install the plugin and you can see it on the left hand side. So, I'm going to create a new artboard over here so that we can use our new plugin inside of our new artboards. So, let me come over here and just click on the UI faces and it will present you some options. So, here we choose what kind of options, what kind of faces that we may want to bring in our project. For example, in the first section, you see the sources. So, this gets it's faces. This gets some people's faces from pexels pexels.com. So, those pexels.com actually provides some royalty fee images so that you can use them freely in apps, for example, IMDB.com, RandomUser.me. So, I'm just going to go for that as an example. And you can actually choose the gender and age as well. So, I'm going to go for 18 to 30 and for gender, I'm going to go for a male, and emotion will be happy. So, you can just choose a hair color. And here we have some advanced features as well. For example, if you don't choose randomize, it will bring the most popular faces that he that it can find. But if you choose it, it will just be random. And in the optimize it will try to fit the faces into your images or into your shapes or into your whatever you may want to try and bring in those faces. If you don't choose it, it will just try to do its best. Okay, so after you do that, you can actually hit on the apply faces, but it won't work because in order to make this work, we have to create some shapes. We have to create some views first. So, I'm going to come over here and not over here. Actually, I'm just going to come over here and bring in a circle. Okay, so this will be the shape that I'm then I will be filling in. So, after you choose the shape, you can apply these faces and you will see it will fill the shape with some face. So, that's good. But I don't want only one single face. So, I'm going to repeat this grid and I'm just going to repeat this like that, okay? But as you can see it won't change the picture. So, I want some different faces on different circles. So, what I'm going to do, I'm just going to create a circle one more time and before filling this in, I'm just going to repeat this grid or you can just do copy and paste as well. But repeating this will be much easier, okay? And then you can actually adjust the space over here as well, or you can try to move this a little bit to the left and you have to click on one of these circles, but I don't I can't seem to click on any one of them yep like that. And after that, of course, you can just expand it vertically as well. Okay, so let me come over here and try to repeat this grid. So, let me do repeat grid one more time, this is working. And here you go. Now, I have a lot of circles over here, which is good. So, I can move this into a central way like that and here you go. I have a lot of circles in order to fill this upbeat faces. You have to ungroup every circle over here, okay? The UI faces don't work on groups very well. So, now I have to choose everything from here and try to apply U faces one more time and here you go, we couldn't do it. So, I believe we still have some groups. Let me just right click over here and say ungroup, so that we would have individual circles and then try one more time. Okay, now, if I say apply faces here you go. Now, it's filling all the circles with different faces in the options that we have specified. Okay, with the options. So, now I have some faces for male and female faces between the age of 18 to 30 and with the hair color of blonde and brown as exactly as I specified. So here you go. It's doing a great job now. Now for example, let me bring in some rectangle over here to use as a cover because we're going to use this as a splash screen for a dating app, okay? So, I'm going to choose a blue color over here. Okay, of course you can go with another design as well, but I'm just going to do that. I'm going to choose this and just give some transparency to that so that we can see the faces, but we will have a cover as well like that. Okay, and I'm just going to make this a little bit bigger so it will cover everything over here and on the top of everything, I'm just going to bring in a text and for example you can bring in your logo or icon of your app over here, I'm just going to go for a dating app and of course I'm going to edit this a little bit so it would look much better right now, we can't see this text as you can see, we have to change the color of this text and change the size of this text. So, let me come over here for example, let me do 40 and I believe that's too much. So, let me do something like 30 for example, and that's good, so let me make this a little bit bigger so it will fit. So, let me change the color here, so, let me make this white and I believe that's better. But we have to make this bold in order to see this in a very clear way, so, let me give some shadow, and let me come over here to regular and make it bold and here you go. Now we can see it and in fact we can try with other fonts as well like that or like that. So, it looks good. Of course it can be much better. But the main point is that we have used the plugging in a very easy way, and we managed to create a split screen, or and welcome screen in less than one or two minutes. Okay, so, it's very easy to use this plugins and it's actually very good looking. So, we're going to stop here and we're going to see other examples of plugins in the next lecture.
Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.