Lessons

Lesson Info

Exporting Assets

During this we've just kinda been using images, and I've scaled images in such a way that they make a little bit more sense for this. If you are, if you're designing something like this and you look at it and you're like You know what, all I need is I just wanna send people maybe a PDF of this, I just want them to look at it and sign off, or whatever it is. Or maybe I wanna take this screen and I wanna save it as a ping. Just a picture, and I wanna send it to marketing. Or do something like that. We can just take what we have and save it out. We can export these assets. If you are going to create production-ready assets for an app, via android or ios, or you did a web design and you wanna be able to take the images and the content you created, save them out so you can actually go use them in your devtools, then we need to kind of think a little differently here, okay, all right. Let's do this. I'm gonna go in here. What I wanna do, is I wanna export an object. I wanna export the logo, ...

okay. Suppose we need that to use for our app, the developer's asking for it, or whatever. I'm gonna click on an object like this, logo here, if you come under file, on Windows it's gonna be the hamburger, that menu in the corner up there, you're gonna see that we have export. Now we've got three different kinds of export options here. We have, export batch, which is batch processing. That's pretty new actually. We have export selected, which is something we've been able to do for quite a while. And that's actually whatever you select out there in the design, that's what's gonna get exported in a certain file format, I'll show you those. And we have all, all Artboards. Let's actually do this first. I'm gonna take back what I said. I'm gonna show you how to make a PDF of all of this. So just choose all Artboards. What it's gonna do, is it's gonna allow you to export in every case here as four different file formats. We have png, svg, pdf and jpeg. Now right now if we wanted to save a PDF for instance of our design, just choose PDF, it's gonna take all the Artboards and either make a single PDF file or each Artboard is gonna be a separate PDF file. Okay, you decide what you wanna do. And that's it, that's as simple as it gets. You just export all artboards essentially. No matter what content is selected out there, for me. If I wanna choose another format I can do the same thing. If I wanna make each artboard a different png file, I can do that, okay. Now in the case of the actual icon or the logo, here's what I'm gonna do. I'm gonna click cancel, okay, I've got that logo selected, and what I wanna do is instead of exporting all the artboards and just save it as images or pdf for instance, I'm gonna come under file export, and choose selection. Or selected, there we go. Now what XD is going to do, is it's going to take whatever you selected, it could be multiple assets, multiple objects, whatever it happens to be, and it's gonna export them in a format we want. Now just to quickly break this down I'm sure some of you are aware of these formats. But you're gonna see that we have PDF which is great if you wanna save this logo as a PDF go for it. It's a single PDF file with a page in it. If you wanna save it as JPEG, JPEG in here essentially what we have is we have design quality, which is setting it you know how small the file size is, but you're kinda sacrificing quality the lower you go in quality, you also have, this is new actually, we have design which means just, just take that thing and make a JPEG out of it, which is a pretty bad idea right if we wanna use it on the web or use it in an app we're probably not gonna do that cuz it's not vector anymore. If we wanna use this on a website and we want this thing to be a JPEG which I'd probably pick a picture to choose for JPEG, we can actually create, if you look in here, it's gonna create two x, two assets for us. One, at a 100%, and one at 200%, so we're talking retina screens. This is awesome, it really is. It means that if we're creating a website, we care about retina, if you guys know about retina, we're gonna actually generate two assets and we're gonna have the non-retina screens are gonna look at the 1x, or the 100% size, okay, and the retina screens are gonna look at the use the 2x size, which is twice the pixel density horizontal and vertical, all right. So that's, that's pretty cool, that's something we can do. The designed at feature we'll talk about in just a second here that's designed at 1x or 2x. Now if you use the standard artboard sizes in XD, you use the default sizes like we did, we just picked an artboard size and said bam let's design, that's called designing at 1x. If you decided to design at retina, or high DPI, maybe that's your workflow, I'm not telling you to do it I'm just saying if you decided to do that, you probably took the artboards and made them twice the dimension, twice the width and twice the height at least and that's pretty typical or standard. If you designed at that size, which is called retina, or high DPI, you designed at 2x. You need to tell XD what you designed at for it to get the images right, okay. If you're not sure, if you guys just used the standard sizes just keep it at 1x. You should be pretty good, all right. All right. I wanna say this is svg. So I'm gonna choose this format svg. Svg is scalable back to graphics, and it's for vector content, it's useful for web, app, all kinds of things and we can use it so that we can scale this content and make it look great, okay. That's the amazing thing about this. If you have image content, like a raster picture image type thing selected with the vector content, it's gonna embed it or link to it. Okay, most of us will embed that. I'm not doing that right now, all we have is vector content selected, we don't need to worry about it, and we also have optimize. So optimize is a great feature, it just means make the svg as small in file size as you can. If you work with developers you need to check with them make sure that's cool, okay, that works. All right. What I'm gonna do is just go out and export it. Logo. Now you're gonna notice here that's it's saving it as logo. And that's because we named it, remember, we named it in layers panel. On Mac, and I haven't checked on the latest update for Windows but on Mac, you can change the name of whatever you export right here this asset. On windows you haven't been able to do that, so you need to make sure that the layer name is what you want the actual asset to be exported as. Okay. All right I'm gonna export, and we did that earlier, just making sure we know that. And we've got ourselves an svg file, which if I go take a look, click on my desktop, there it is right there, so there's the svg. It's white on white, you can't really see it, but we can now take that production ready asset we can take it and send it off to a developer or wherever we need it to go to work. All right. Now let's talk a little bit about exporting raster content, for something like ios. Now this is pretty important for web, for ios different things like that. A lot of times we're gonna export into png format. Png format is, pretty good. Sometimes it can be bigger file sizes but it's something that we're gonna use for ios. That and jpeg too, kind depends on what you're doing but if I click on this asset, I'm gonna mention something here. When we place this in here, either one of these actually, we placed it at a much larger scale, or much larger size. As a matter of fact, let me show you this. I'm going to go out to my desktop and show you the images that I placed here, that I worked with. So I'm gonna go and find, what was it, place old mill, there we go. Now the way we work in XD, if you want to ensure that raster content, that images like this, are good for production ready assets meaning you can use them later on, if we're developing an app, if we're doing it for ios, we typically want to take our images and we want to place them at three times the size we're going to be using them in XD. That may seem insane, crazy, like why would I do that? The reason why, is because remember when I said that all your image content, if you just import or drag drop it's gonna be embedded in there? If we have an image in there that's just perfectly scaled to the artboard which is like 300 and some odd pixels wide, what's the artboard size? Let me look. 375. If I put an image in there, made it and that's what it was in photoshop, now I'm talking a raster image. And then we export it later on as png for instance to go to our app, XD is going to take that image, and basically if we designed at regular old default sizes which is called 1x or non retina, it's gonna make it three times. We're going to have three of those assets. So one at the original scale, one at twice, and one at three times. It's probably not gonna look great, okay. If you care about production ready assets, you wanna make sure that you are placing enough image data in here meaning your images, if you're going for ios, you're gonna go three times the size in photoshop if you're gonna use 'em in XD, okay. If you're gonna go for Android, they're gonna be bigger, okay, it's like five times the size. I mean, they're bigger, okay. You're gonna test things out, honestly, you've got to try it out but you're gonna export, you're gonna see what it looks like if it looks bad, frankly, you're gonna try again, you're gonna put another image in there for instance. You can do something like that okay. All right so we placed that image, we scaled it down quite a bit. It's three times the size we need it, so it's ready to go. I'm gonna come up to file, I'm gonna go to export, and I'm gonna go to selected. That's gonna allow me then, if I choose png for instance, I'm going to my Apple from ios, I can choose from four different options here. I can choose from design, which just basically it means take that image and make a png. That's it. At a 100%, okay. Whatever size it is now, just make a png out of it, that's it. That's great if you want to send it to marketing or something, for them it's something to look at. If you choose web, it's actually goin to make two versions of that asset as a png, it's gonna make one at a hundred percent which is what you see in XD and it's gonna make one at twice the scale or twice the size. If we place the image in there at three times the size we've got plenty of data okay. It's all there, cuz it's embedded, it's just gonna, XD's gonna now what to do with it and make the right images for us. And if you, once again, if you use the default sizes for the artboards, you designed at 1x. If you purposely went in and made those artboards twice as big or bigger, you're designing for retina and you probably know what you're doing, so you designed at 2x okay. We designed an app for ios, so I wanna get my pngs for ios. So if I click on ios, you're gonna see we have to tell it, did we design at 1x which is default, twice the width and height, or three times the width and height, essentially. We designed at one. That means all my images need to be three times the size I'm using them. We scaled 'em down but all the image data is there. What XD's gonna do right now is it's going to make three pngs for me. It's gonna make one at the size you see in XD, one that's twice as big, and one that's three times as big. I'm hoping I make sense. It's a lot to ingest, it really is. But if you care about production ready assets. If you're just doin' this to make it look good and for somebody to kind of look at a design you're gonna totally go over to a production and start making all this stuff separately, then you don't have to worry about a lot of this. But you need to keep in mind your assets are images when you place them. Vector content is vector content. As long as its pure vector you can save as svg and you don't have to worry about scaling it, okay, that kind of thing. It's just when you get into the raster formats like png and that type of thing. Now android like I said before, if you are designing for android, your artboards would have been different scale sizes depending on what you chose and you're gonna see that we have a series of scaling or sizes in here, so you've gotta make sure that you've got enough pixel data in there to work. So I'm good. I choose ios, the images I brought in were three times the size, we should be good. I know I'm kinda beating that over the head a little bit but it's important if you want these to be right. I'm gonna go out to my desktop and make sure that we're there. And I'm just gonna export. And if I go take a look, you'll see, there are the three pngs. And if you wanna go, I'd open those up in photoshop and take a look at 'em. Honestly a lot of us will actually do some post-processing on these if you wanna call it that, we'll compress them further, that type of thing, it depends on your process and what you need to do, but you've got your three images right there. All we need to do is we need to select the images we wanna export as, png like that, we can do 'em all as one export selected. Another great way to do this, let me show you this. I'm gonna go back to XD. Suppose that we needed to take these two images, these two raster images and I wanted to export them both as png, for ios, which is what we're doing right. Instead of doing them all separately, you know, we're selecting them all like that. What we can actually do is we can mark these, so I can come in and click on one image, and we can do what's called batch export. If you look on the left over here in the layers panel you can see that we have this mark for batch export icon. If I click on that I'm marking it, and now everything that I wanna batch export in that same file format using the same settings, I can mark for batch export right now. This is really useful if maybe you're working on icons and you keep making changes, or things like that. You know you have to keep exporting versions or options or whatever, you can mark 'em all and then export 'em all as svg and everyone that's marked you don't have to select them again. You'll find the ones that are marked and you can save them all in the same file format with the same settings. So I'll click on this image here, and I'll do the same thing, I'll mark it for batch export. Now, I'm gonna go up to file, and I'm gonna go to export. This is the best part. Once you mark some of these assets for batch export, now that's the key, you're not gonna see this menu item until you do that, once you mark some you can then choose batch. Remember, it's gonna be the same file format. So I'm goin to go to batch. I'm gonna choose png, ios, designed at 1x like I said, I can go out to my desktop now I'm overriding some of the ones I just did. I wouldn't normally do this, but I'll click export. And it's gonna say replace, sure, thank you. Now if I go out there and take a look, I should have all six of those images ready to go. Of course I would normally put this in a folder, that way it's more organized, wherever you need to keep them, that kind of thing but it's, like I said. If you are making changes doing things and you batch export all of these, you can export them all as one file format, the ones that are marked. You can always change it. You can always say you know what, I'm gonna turn off the batch export for this and this, next thing I'm gonna do is I'm gonna start batch exporting some of these icons here maybe. So I'll set these up for batch export. And if they're all in the same artboard you can select a series of 'em or just go over there and start clicking on batch export for things if you wanna do it that way. There's a couple different ways. So, you can export content like I said. Depends on how you wanna do it. All the artboards, individual objects, or try and batch them out but it's important to understand that when you export, if you want production ready assets, you've got to kinda set things up the way you want it, okay. So that's good, that's great. Take a look at the images in the files if you get them and you can kind of see like I said, you need to set them up with the right pixel amount, pixel information so you can get it to work.