Let's now start exporting our assets. And that's why I like this style guide because we created everything we need right here. And we can simply select all of it, but click on the Design tab first. So select all of them, hit Ctrl E. And for the file, use SVG styling presentation onto which or internal CSS you can check with your developer what they want, but they usually use presentation attributes. So everything as as it was presented, you can check right here, if you want to make your size optimized, but before it because he says VG, it's already optimized to a point you can hit change right here. And I want to select our assets folder, select folder, hit export, and you're done.

And if I jump back into my folder, jump into assets. You can see icons right here, and it's going to select all of these icons which are inside this folder and create them as one And if you don't want that, you can hit delete, and you can ungroup this. And then with them selected, like so, you can hit Ctrl E, SVG and hit export once again. And if we jump back into our folder now, you can see all of them are separate assets, like so. So you can have it either way, they can copy the code directly from the SVG file if they want to. But if you want, you can do it like this as well.

So just speak with them and learn what's more easier for them to use. So is it one file or is it separate files now because you extracted all of them and export them into this separate folder, because we don't have any other additional icons that we didn't export, you can simply use this asset folder and don't export any other icons from any work in your design. So basically, you have finished with your eyes. cons just by creating this style guide, and I think it's a fantastic addition and just improves your speed massively while you're working. Next up, let's use home screen. So you can select this image for example, hit Ctrl command e choose JPG from here, locate the home folder.

So here it is right here, select the folder, hit export. And what we want is open this up and you can select him like so. So lamp one lamp to land three, hit Ctrl E, and what we want is PNGs because these were PNGs originally hit export, and you can close all of these folders up if you want. You just want to export one background. So hit Ctrl E, and you can export this as a JPEG. So hit export.

And it's going to replace it because this first one is our image. So let's change that. This is going to be our hero image like so. Sorry I made a typo like this Ctrl E, JPEG export, and I can jump into our folder, locate the home. Here it is, and simply delete this one because we need this image like so. So click right here, hit Ctrl E, JPG export and now it's going to export this because we need this great background included as well.

Next up wrong combinations. So you have living room bedroom kitchen, select all three and you don't need to select the image because we already selected it. So we have Image, Image and Image. Now you can select like this and paste it in like this, paste it in like this and paste it in because it replaced the name of the image once it was masked With this image, so simply select them controlee, JPG export. And finally, let's select this last one, which is a video controlee hit export. And there we are.

So as you can see, it's really easy to export all these images. Now what we have right here are these sofas, so you can always open all of them. So so for one sofa two, and you can also select one of these background images. So for three and simply hold your Ctrl command key, select all of them, like so hit Ctrl E, and then change right here and this is called category screen. So located right here, Select Folder hit X, and not jpg, but PNG because all of them work, PNG, hit export, it's going to export all of those images. And as you can see, it's quite easy to move between these screens.

So you can select both of these circles or just one because they are Same. You can choose materials and choose frames, circle it Ctrl E. And you can export them as a PNG, for example, but it's in the search filter screen. So just make sure to export everything correctly. So search filters, Select Folder export, and you can export it that what. Now as for the buttons, you can export it in two ways. So you can export the button as it is now.

So Ctrl E, and you can export it as a PNG like so. Or you can export the button without any text on it. So it's really up to you and up to the developer to decide how they want to include all of this. Next up we have room combination, so hit Ctrl E to export this image and we can use JPG for it. So room combination screen located right here, from combination select and export. What we need right here is this sofa, so control He can use PNG export.

What we also need are these colors so select all three colors Ctrl E is fine. You can export this card BG so Ctrl E, export PNG and you can also export this lamp if you want to. So locate it right here Ctrl E, PNG export and there you go you have finished because we copied and use these colors in both cases. So let's move on to selected item screen. And what we want to write here is to export boat background as well as image so we can export them both as PNG Ctrl E. And you can change this to be selected item like this. Select Folder PNG export.

What we also want are these colors so select your colors like this Ctrl E PNG, that's fine. And finally, what we want are these two images. So this image as well as this image, so this is going to be image number one. Image number two, select both of them Ctrl E, PNG export, and we don't need them inside of the folder, you can simply copy everything down and paste it out, but I want to make it nevertheless. So let's use hero image so main chair hero image Ctrl E SP PNG just changed the folder because this is selected item adjusted. Here it is select the folder export.

And what we want are these colors so open up the color folder. And now you can see the advantages of these folders and organizing everything properly. Because you can see how this works. Well and as you can see, we are just eight minutes And how much we've finished so far, so you can really work with it a lot more easily. So Ctrl E for the button and finally, because we did it before, image one and image two, so that they can access it easily inside this folder as well. And let's quickly go ahead and finish up with everything else.

So right here you can select one background, so Ctrl E, and change the location. So this is the order details, like so. Click Select Folder, export, and you can locate these images. So open up your folders. So main chair, software, one lamp one Ctrl E, PNG export, we need to export this button as well Ctrl E like so. And finally we need to export this frame.

So how can we do that you can locate the frame. So here It is right here. And you can export it and simply hit Ctrl E SP mg export, and they will place it like we did now but in the code next to each other, and they have these icons in the assets panel text we don't export. You can also export the text if you want to, but I found it's not necessary because it's a waste of time and they will use the text in the code anyway later. For this screen, let's jump inside control e BMG change payment located where it is right here. Select the folder and export.

So I made a slight mistake was locate the payment and export the entire screen which you can do if you want to, and I'm going to show you at the end how you can do that too. But for now, we want to select the credit card we want to select a PayPal and we want to select The button Ctrl E bng payment export. And let's quickly just double check if it is like it should be. So if I open up this credit card, it's going to open up in my image viewer right here. And if I drag it to the screen, you can see it saved it out as a PNG with a transparent background and a shadow. Let's move on to start locations Ctrl E, change delivery files, store locations, select the folder, hit export, it's going to export the entire screen.

So store locations. Let's delete that real quick. And what we want from here is the map so controlling PNG export. And finally what we want is this button as it is so located right here so directions like so Ctrl E as big because they might want to use it as well as well. Discard BG so Ctrl E export and this top background. So Ctrl E, PNG export.

And there we go. We have created everything except for this menu screen and inside of it, so you can just locate the BG background Ctrl E, change, find the menu folder right here, here it is select the folder, hit export because we just want this background to be exported from here, as explained before we have this X icon prepared already. So that's it for the exporting assets part of this course and one final thing I want to show you is how you can simply select all of them hit Ctrl E, once again, you can use PNG but I'm going to use JPEG, change the folder delivery files and simply deliver them to here. Hit export because this way is going to be easier to your clients as well as your developers to take a look at the screens as they are. And you can also jump inside each and every folder and extract this design into that particular folder.

Now if you have more than one size, so this one is for the iPhone 10 and 10 s, but if you have for example, for Xs max or for any other device to include in the future, then you can create a folder. So let me quickly jump in and show you that. So inside of this storage locations folder, for example, you can have these assets in different folders. So each folder can have sub folders. So store locations will have sub folders for iPhone 10 and Xs, then another folder for iPhone xs and Xs Max, and so on and so forth. So, you can have your organization done like that.

So once again, they have the assets which contains all of the icons. They have 10 different folders for 10 different screens and they have the best inside. And finally they have JPG screens right here. So if they double click on any of them, they can simply open them up and simply look at them as they are right here. So that's it for the exporting assets part. And in the final video of this series, I want to show you how you can then package all of it and deliver it to client.

So I'll see you there.