3.8 Exporting in Adobe XD
Let’s now look at how to export assets and artboards in Adobe XD. We’ll also quickly touch on exporting to third-party apps like Zeplin, Avocode, and ProtoPie. Let’s begin.
1.Introduction1 lesson, 01:20
2.The Basics of Working With Adobe XD4 lessons, 56:12
3.The Advanced Functionality of Adobe XD8 lessons, 1:13:40
4.Prototyping With Adobe XD2 lessons, 15:57
3.8 Exporting in Adobe XD
Welcome back to the course. In this lesson, you'll learn how to export assets and artboards from Adobe XD. We'll also touch on exporting to third party apps like Avocode, Zeplin and ProtoPie, so let's begin. Right here, I've loaded a UI kit called the fresh-food-ui-kit. I got this for free from the Adobe XD official page. I just go to this address, UI Kits, and it's this one right here by Daniel White. So, we can grab the kit for free from that address. And let's say that I want to export some images and some artboards. Well, this is actually super easy to do, to export an artboard. You would simply select it, and then go to the Menu item, Export, Selected or you can press Ctrl or Cmd+E, depending on your operating system. So do that. You can choose the format, PNG, SVG, PDF, or JPEG. Let's choose the JPEG, you can choose the quality, what are you exporting for? If you export for the web, you have the option to choose whether these were designed 1x ratio, 2x ratio, design as just 1x ratio. So that's how they'll be exported. And then, you would select the destination folder, and then you would hit export. And just like that, we now have a JPEG file with the exact contents of this artboard and it's even named the same as my artboard. Now, in XD, I can do something really cool, I can go to export without selecting anything. I can go to the File menu, Export, and I can export all artboards, same deal. Choose the export parameters here, let's also do web, and let's create a new folder here. Call this artboards, select that, and let's export all of them. And XD is actually pretty fast. It exported all of my artboards in no time, and then you can go through them. And notice that it exported a normal version at 1x but also a 2x version of the same artboard. That was pretty cool, very, very fast. Now what about exporting an asset, for example this image here. Well, it's exactly the same thing. Going here, Export, Selected, or use Ctrl or Cmd+E. And if you have multiple items, for example, these icons. Let's select them from here. I can use Ctrl+E because I'm on Windows, let's export these as SVGs. And depending on the format, you have different export options here. Let's hit Export, and now, you'll see that in my export folder, I have three SVG files for those icons that I just exported. Now what if you don't wanna do this for every single asset you have in your project because, take a look at this UI kit, for example, what if I want to export all of the images from here? Well, just selecting them one by one could be time consuming, so what you can do is actually mark items for export. Okay, so let's take this page, for example, right? I wanna mark a couple of items for export, this X icon for example, I'm gonna select it. I'm gonna scroll down in the inspector, and there's a little option here called Mark for Export. So I'm gonna click that. What else? Maybe I want this icon. Well, I can do the same thing or I can right-click it and I can choose from here, Mark for Export, or I can press Shift+E. What about these images? I can select these. Again, Shift+E. Alternatively, I can also select an element, I can go into the layers panel and when I hover on a layer, the very first option is this, Mark for Export and I can click this little icon, On all the items that I want to mark for export. So once all of this is done, what I can do is go to the File menu > Export > Batch, or Shift+Ctrl or Cmd+E. So that will select all of the items that are marked for export and it's gonna bundle them. So let's say I wanna export these as PNG files. And let's create a new folder here called Bundle. Export, XD is gonna its thing. And now, let's find that folder, there it is. Now, you'll see that all of the items that were marked for export, notice there are several other items, already marked for export, but they were all, Exported as PNGs including the ones that I selected. So that is batch export. Now, there are other ways to share your assets or your artboards in XD. If you go to the share tab, you'll see that all my artboards are selected. And I can choose from view setting, I can choose development. I can choose where, or for what I want to export these web iOS or Android. Let's choose iOS. I can mark all of the assets as downloadable, so the ones that are marked for export will be downloadable. And then I can create a link. All right, and link is now created, so let's go ahead and copy it. And when we open this link, it's gonna take us to this page where we can see all of the artboards. We can comment on them and we can go into this mode. And here, we can see all of the assets. So all of the images, all of the colors that are being used, all of the character styles, all of the interactions, these are for prototyping. But to copy any of these, you just click, and now just copy the color. You can click on this orange, you can choose format and you can download it if you want. So this is another way to share assets with other people, with developers, or with members of your team. Finally, I wanna quickly talk about exporting assets to third party apps like Zeplin, Avocode or ProtoPie. You see, XD can export to these apps very easily, you just need to have XD and those apps installed on your system like I do here. Here's Zeplin, here's Avocode, and all you have to do is go to export. And you can choose one of these, let's say Avocode, for example. So depending on how large your XD files are, it's gonna take awhile. But once everything is loaded, you can double-click all of the items and then you can inspect your design files. And this is what Avocode is doing, Zeplin, they both do the same thing. They allow you to inspect design files. So for example, you can select one of these elements and you can see okay, how its positioned, what size it has. It gives you some CSS styles for it, it can even export assets for example, I can grab this icon and I can export it from here. I even have the original layer structure. Same thing goes for Zeplin, you go Export > Zeplin. You first need to create a project for this, so let's do that again, right? You would select our project and export, you choose the size that you wanna export these at. And you actually have to select some artboards. So let's actually select these three, and export to Zeplin. And just like that, you can now access these files in Zeplin. And you can do the same thing, you can inspect them, have a look at the colors that are being used, at sizes and so on and so forth. ProtoPie is another third party app you can use with Adobe XD, and ProtoPie is a great app for creating very high fidelity prototypes. And we actually have a course on that, make sure you check out the lesson notes. You'll see all the instructions in that course of working with XD and ProtoPie. And that's how you can export XD assets to images or third party apps. Now, let's move on to the final chapter of this course, which is dedicated entirely to prototyping. And in the next lesson, you'll learn how to create and share prototypes. So, I'll see you there.