Export assets

- [Instructor] When it's time to share your work with other designers or developers, of course you can share your XD document. And then for example I can select this guy, hold Cmd + 3 to zoom to it, and if I hold option as I hover over elements, designers and developers can see distances, and see how things are positioned. But if you really need to export very specific assets, you can then, let's say I want to export these icons here, you can then go to, make sure you make your selection there, and you can go to file, export, and here what I'm trying to do is export that icon as an SVG for my website.

So I can go to my, let's see, let's go back to exercise files, I'll create a new folder here called assets, and in this case, I need SVG, 'cause it's a vector. I can select SVG here. This case only has vectors, I don't have any image linked, but if I have an image, I can have that SVG, that image in my SVG embedded as Base64, or it can be a separate link as a PNG that's linked to this file.

And I can even optimize this code so it's going to minify it, it's going to make it smaller. All the big words will become letters, and smaller words so that it downloads a lot faster, and I'll give it a name of pin-icon.svg. Export, now I have that SVG ready for developers to use in real applications, and if I do now a bitmap, I can select the bitmap, and then I can hit Cmd + E to export, and now I need to do as a PNG.

In here I have some presets for PNG, I have design, web, iOS, and android. If I select design, I'm going to get one asset at 1X. If I select web, I'm going to get two assets, 1X and 2X, and this is really interesting because in this moment, if you really need to have a 2X file that has good quality, you have to import that in XD in the first place as 2X. So let's say you want to have an image that's exported to 1X and 2X, make sure you import it in 2X into XD, decrease the size by half, and then when you export, it's going to export 1X very nicely, and 2X very nicely.

If you have iOS here, it's going to give you three assets, 1X, 2X and 3X, and if you have android selected, it'll give you all the necessary file sizes for your PNG here. I'll do web, I just need 1X and 2X, and if I hit export, and if I look back in my finder, now I have developer at 1X and developer at 2X. So developers can use that in real projects, and of course, if you need to export as PDF, you can export one individual element as PDF, or multiple elements as PDF as well.

So that's it, that's how you share specific assets with designers and developers to make that application come to life.