Iconography

- [Instructor] Now let's talk about icons. Here I have the Apple UI design resources iOS 11 UI kit. And you can see that I have two artboards. This cry being how I should design icons for iOS 11. If I double click on this layer here, I zoom into that art board. And here you can see I have all the guidelines here for icons for iOS 11. I start with the big one and then I can scale it down to one x, two x and three x for the iPhone seven plus.

And here the big one is 1024 by 1024. Some designers like to do it this way in one artboard. Some designers prefer to do it in separate artboards because that helps with exporting in XD. Let's now jump to our project and see how we can start working with icons. First of all, I am going to create another artboard using the artboard tool so you can select that here or you can click A. And then I will draw another simple artboard to be my icon set.

Here I can change the name by double-clicking on it's title and I'll name it icons. And now I'll create a grid to be the placeholder grid for my icons. So I will select the rectangle tool. Draw an icon here. You can do 44 by 44, that's pretty safe. Then I can remove the border. I'll get some light grade going on there. And what's the best way to create a grid here? The repeat grid. So I can select the item I want to repeat.

Go all the way to the panel there, create repeat grid. And then I just repeat my grid here. I'll do it this way too. And then I can select the entire grid and I can center it. Anytime I have something selected and I use the alignment tools here, it aligns it to the artboard. Cool. Now I can right click on this guy and lock it so I cannot move it any more. It's pretty safe. And now I start designing our icons.

I'll do one icon here in XD. And the first one I would like to do is the pin icon for maps. So I'll do one circle, another circle. Then I will select both elements and I will center them. And here I have boolean operations in XD. I can select the second one to subtract. Now there are two elements combined creating this subtraction. And this is non-destructive, so I can select and unselect at anytime. If I double click here and enter, I can get to the anchor point.

If I select this anchor point and move it down and I double click on that anchor point there, I get rid of of the handle. So by double clicking you get rid of handles and you can double click again to get them back. In this case, this is looking pretty good. Now that I am happy with this icon, I can remove my border. And I'll use that pink that we had in our color pallette from my design system. Perfect.

Now I can move it all the way there into my panel. And I can align it in the middle here, perfect. And I can even add a shadow to make it look to pop a little bit, awesome. Alright, i can also bring icons from Illustrator and Sketch and different tools. So let's go to Illustrator. Here I have a couple icons that I designed before. Let's say I want to use this one. I can then select it and copy.

Go back to XD and paste. And I can align it there. I can move it. And I can select that color. So everything here remains editable. I'll add the shadow before I forget. And everything is editable. I can change things here. So if I copy and paste from Illustrator, everything keeps stays preserved. Awesome. Another resource I would like to show you as you create more icons is this one. So if you go to introtoicons.com, this is a one hour training created by Matt Smith, a great designer.

And you can lean how to create icons from scratch. A lot of theory, good theory on icon creations. And have all of your icons in Illustrator then you can copy them and bring them into XD. Very easy, intotoicons.com, a great resource. And the other resource I would like to show you is called the noun project. So if you go to the noun project dot com. Here you can download and install the tool. And at any point you can call it.

And it's this cool panel here where you can search. So let me keep XD open here. Let's say I want to look for surf. I really like surfing. I like this icon. I can then select it, right click, copy as SVG. I have to have SVG on my clipboard. And then I go to XD and I paste. And everything remains editable again. I can edit the anchor points. I can then use that color.

I can then resize. Wonderful so that's my icon for surf. So now that you know how to do colors, typography iconography in XD, let's learn how to use symbols to make you project even more powerful.