In this part of the course, we are going to start with exporting our assets, because we need to send these files that we were working on to our client as well as to their developer. But before we do, we have to make a few changes. And we have to prepare them in order for us to send them to them. So let's start with creating a style guide. So if I zoom in a bit closer to here, now this file was named icons, but I can simply double click right here and create a style guide. Like so.
And this style guide is going to contain icons that we use, as well as colors and fonts. So to do that, I can simply extend this artboard down and remove this. So I can include the logo right here, like so. I can maybe even make a duplicate of it and maybe make a logo bigger. That's not a requirement, but you can do that. If you want to And now simply position this in the middle to make it a bit more appealing.
And let's move it to be somewhere around 130 just to give us a bit more space. And you can also do it with these icons simply hold Shift, and maybe you can do it like this, so 45678 910 and create an even spacing. Now let's use colors. And what we are going to do is use the rectangle tool but click on the assets panel, and we have 246 colors in total. So you can create a nice rectangle like this, position it to be exactly the same distance as these two were before so 100 like so and then make six copies. So you can use a repeat grid and do like so for example.
And you can leave the spacing like it is if you want to or you can simply groupid remove the borders and then simply go one by one and choose these colors. So go like this, like this. Like so. A B and finally, this is f f as it was, and just create a nice border for it. Now let's include some text, so Presti click right here. And this first one is FC 7800, like so.
And you can include it right here. Make sure it's in the middle and simply increase the size to 10 or maybe even 16. So it's easily readable, make it white, because all of our colors except for the white color are white. And you can position it like so double click here and type in. Zero, B, zero, B zero. B for this one, and hold ALT key to duplicate it again.
Select all this so this one is 858585. So these colors are quite simple. So nothing major really. They'll click right here. And for this next one we have 717171. We have eB eB eB for this one.
So it's Eb, eB eB, like so. And finally, because this is a white one, let's use this color and simply type in ff ff ff. So that's it for our colors. And you can also group all of this hit Ctrl G, jump into the Layers panel and type in colors. You can organize it a bit better. So these two logos will go all the way down.
And finally, these colors We'll go all the way down. So you can group all of your icons, so it's fine the cart icon. It's this one. So it's order, group it like so. Select all of them like this Ctrl G, they'll they type in icons, when this is just for the developers, so that they can easily copy values from here and not to go inside your design all the time just so that they can use colors. Now, let's include some fonts.
So you can press D and jump into a spell so you can see which fonts you need to include. So this one is open, sans, and I think it's semi bold. Like this, simply select it from here. So semi bold, this is one word like this. And you can use this, just make it 18 like it is here was this it like so and make sure it's 100. Same like these other ones were like this.
And you can make a copy of it. So simply Ctrl D, and position, maybe 23456, maybe create like this. Make all of them be left aligned. And this is going to be 14, and it's regular. And you can use this open science 14 or regular to create a paragraph of text if you want to hit Ctrl D, and then simply move it 60 down like so. Create an area text like this maybe up to here.
Then simply lower it down, like so, jump into our plugins lorem ipsum filled with placeholder text, insert text. And that's it for this Maybe because it's the same, maybe we can make it 40 pixels down, like so, jump into our Layers panel, select all of the text and simply order it the correct way around, like so Ctrl G, move it down. And this is our text, like so. Next up what I want to create our shadows, because we use some shadows, if you remember, for all of these items, so what we can do is simply select one of these so Ctrl C Ctrl V right here, position it like so make sure it's 100. So like this, and what I want to do is include some shadows, so you can use shadow, jump right here and if you remember, it's five 510. Press Enter, jump into your shadow, locate this, select this color, it's 25% and you can So select it, hit Ctrl D jump right here and maybe make it 60 for example, and you can use two, two, and five, because that was our lower shadow.
So you can create those two, you can jump into the Layers panel, select both of them Ctrl G, called these shadows. And finally, what I want to include our gradients, so what you can do is duplicate these two, so Ctrl D, moved it like so. And these are going to be gradients like this, and maybe make the distance 100 so that we can keep everything nice and smooth, looking nice as it should. You can lower this because we didn't have any animations. Sorry illustrations. So we are going to end with our shadows.
So what you can do for this first one is simply locate this one hit, copy, hit paste on this one, and do the same for this one. So copy it, this one right click paste parents. And what we can do is leave the shadows as they are because we use the shadows there. But if you want, you can make an alternate copy of those and create one without shadows. And while we added we can do that as well. So Ctrl D, and maybe you can use these two like this.
And use these other two simple make them 60 like this, or 40 position, this 140 and you can move all three, like this. So it's 40 pixels all the way around. And maybe we can can do the same for this one to 40. And now we can move to gradients to be 100, like this. So I like to order my files like this, just so that developers can then know and have a greater view and nice view of everything I used inside of this design. So for these two, we are going to remove the shadows.
And on these two we are going to leave the shadows in why so because that's what we used inside of our prototyping phase, if you remember. So for these two, we don't have any shadows and for these two we do. So that's it for our style guide, you can hit Ctrl E, locate your deleted files folder if you want to. And you can simply select this as a PDF, jpg, png however you want and hit export. And you can also leave it as it is as a style guide and they can access it And finally, we Hit share a bit later on. And I'm going to show you how developers and clients will be able to access all of this information inside of Adobe XD in the shared file.
But it's always nice to have a second copy hardcopy, if you want, if you wrote so that they are able to access it at any time, maybe they're on their phone, they don't have internet connection, but they just want to quickly check some of these files up. And they will be able to do so because you export it as another file, so either JPEG, PNG or PDF. In the next video, I'm going to quickly show you packaging structure and how you can package your file to the for the client delivery. So I'll see you there