How to export code in XD for engineers using Design Specs

Hey there, in this video we're going to export images, and all of our code and everything we need for our website or app to be built by a developer. It's super cool, we can click on things, get measurements, it's all web based so your developer doesn't need any XD experience. They can just go to a website and pull everything they need down. Let's go and learn how to do that now using Adobe XD. 

So we've done our user testing, and now it's time to actually send this out to a developer because XDs are prototyping tool, but it's not an app or website building tool. It's going to give us lots of the information we need to build these. Kind of a blueprint to follow, but it's not an actual app or website itself. So we need to send this off to a developer, or if we ourselves are a developer, like I'm a Web Designer, so I'd use all these elements for my website design, but if I'm working with an app, I'll get help with somebody who knows how to use Hex code. So what I need to give them is a lot of images, and the CSS, and kind of dimensions, and sizes, and fonts, and those sort of things. 

In terms of the images, there's a couple of things we can do. Just say I want to give them all the Artboards, we have nothing selected, make sure you click the background, go to 'File', 'Export', or 'Command E', or 'Control E'. I'm going to use that loads here. So what I can do is, I can say, actually I want to send them PDFs. And the cool thing about it is that it will send them one PDF with all the Artboards in it. I'm going to put mine in the exercise files so you can check them out as well. It's a new folder, and this is going to be my 'Exports'. So, if I put that in there, single file, let's have a quick little look at what pops up. 

So we're in 'Exports', there's my PDF, if I open it up it has got all my different Artboards, all laid out nicely. So that's one way of sharing it. You can obviously, with nothing selected, 'File', 'Export', have a look at not just PDF, but you might export a bunch of JPEGs. And that will export those out as well. But let's say I just want to send one Artboard out. What I need to do is click on the Name so I adjust my Home Page out, or let's say I just want to send the app out so I'm going to send this one, then if I go 'Export' I can decide, say I want to send them a JPEG I can decide on the quality-- I'll leave it really high. You'll see, it pulls the name of my Artboard. Save it in there, easy peasy. Let's have a little look. There you are. Cool. 

Next thing I want to do is export individual elements. So, you've got a couple of options. Let's say I want to export all of these. It depends if you want it to be one big unit. So if I select them all, I've got everything selected, and then if I go to 'Export', you save them out as a JPEG, and let's see what happens. Let's have a little look. It did every single thing, all separate. So that might be what you want. All the lines, all the different icons. The whites, you're not really going to see them but they're all separate elements, so that's not what I wanted. So goodbye, you guys. You'll also notice that it used the naming convention from my Layers panel. So, to make yourself life a little easier, if I click on this, you can see, here it's called 'Rectangle 25', if I double click this, I can give it a name, and that will be the export. Let's say I want to set it as one big image so I'm going to select it all, and what you do is that you just group it. You'll notice that now it's a group, I can give this group a name, and this might be my 'piggy-bank'. 

Make sure you use hyphens or underscores just to save time for the developer on the other side. They don't want files that have spaces in them. And then I can click on this, and hit 'Export' or you can right click it in Layers panel, and click 'Export'. Down the bottom here-- you can't see it. It doesn't really matter which way you go. See it's given it a name, 'piggy-bank.jpg'. Let's have a little look now, it's just one file. One thing you will notice is this little bug with-- that was a cropped image in there. It's exporting everything, including the cropped image. I can't work out a way of fixing that at the moment. So that's just something, you can see this circle kind of hidden in the background there. Even though it's cropped off it's still included in the Exports, you'll have to trim that out with something like Photoshop or Illustrator, whichever you're using. 

Now when it comes to exporting we've kind of just jumped over. If I go to export that image again and let's say I want a png. In here, I get to decide what sizes I want. There's this thing called 1x, 2x, 3x. So, design just means I'm going to bring it out, the resolution it was made at. Often Web Developers want two sizes. They want one for regular screens, and one for high res, high dpi retina screens. So, it will give you regular size version plus one that's double the resolution out automatically. They want three options, they want triple the resolution, and Android. They've got some massive xxxxx HD dpi. They’re going to make massive ones. So you need to figure out if you're going for iOS or Android. Let's have a look at say, the web one, because we're dealing with this page here. If I hit 'Export' I've got piggy-bank.png, and then there's this piggy-bank.png. It's got it at 2x, means it's double the size as this one. And if you're not a Web Designer, don't worry if you are, this is the solution at the moment for dealing with high res or responsive retina screens. It makes browser do all the work, which is super useful. One thing you might find is occasionally. I'll export to jpg and it's just a little bit of a blurry edge. 

Say I want to export these two guys, so I'm going to select them both, hold 'Shift', grab them both, group them, and over here, I'm going to give them a name this is going to be 'mute-'. Actually I'm going to start with Icons, so all my icons stay together. A little easy to use. Now if I want to export them I just right click him over here, click 'Export', and you might find that occasionally-- it happens less and less now but you might get a little bit blurry edges with a png. Just that hint of blurriness, and you're like "Man, it's crisp in here, why isn't it in there?" The two options to get around that is exporting and we're going to export. If you export a png the easiest way is to go to SVG. I know that it was vector, it was scalable, it has all its anchor points, this lovely-- SVGs are Scalable Vector Graphics. If you've never heard of them before it's really to do with-- It's just like the new EPS. It's an easy, interchangeable format that browsers love. They'll load on websites, so it's not just gif, png, and jpgs now. You can use SVG, they're scalable, great for logos. That will make sure that there's no kind of fuzziness. 

Let's say you need to go to png. What you can do is, before you do this you can right click your objects, and go 'Align to pixel grid'. And it might just-- you can kind of see it there, can you see, it shifted a little bit. I'm undoing, doing, undoing, doing. It just kind of distorted my vector a little bit. Just so that it lined itself on to the pixel line and that would just give it a crisper edge, so you could do it for everything, like check first, like you could spend forever going through and lining everything to pixel grid. It does deform it a little bit. I'll zoom in a bit more. So undo, you, it depends on how, like with fonts, I find you can't do it because it destroys the font, and the font looks ugly. 'Align to pixel grid' might just tidy up any of those problems. You can see, it does change a little bit. So maybe not for logo, maybe not for text but for things like this that are supportive icons, they're just going to notice the difference. You might be sitting, and going "Yes I notice the difference," but, yes, that's the choice, fuzzy, all pixels or 'Align to pixel grid'. 

The next thing-- so we've exported all our images, we've gone through, exported everything, now we want to send out things like measurements, and color codes, and fonts. So what we can do is, especially for things like buttons. A button should never be an actual physical jpg or svg. It will be created with code. There will be a bit of code that says I am this high, this width, and a fill with this color. It loads really quick, and it's scalable and you don't need an image to load, just a lot better doing it that way. These guys here will have to be svgs or pngs, but let's say we need to give all the dimensions and codes, and how far that is down, and above, that one, so you get everything lining up nicely, there's no excuses from your developer. 

What you can do is you can click on this. I'm talking really fast, I realize, sorry about that. You can go to the option that says 'Slow me down'. Lots of coffee this morning, and I'm excited by these features. This new one here-- by the time you're watching this video, this might not be featured anymore. It's just that newer version. You can click on 'Publish Design Specs' even. Give yours a name. So I'm going to call mine 'InstructorHQ Prototype’ I'll call this one ‘V1’. And we're going to click 'Create Public Link'. Now there's a couple of things you need to do before you click on that - or you can do it afterwards - is that-- I'll show you here. You need to make sure that-- when I was first doing this, if I had this, I go to Prototype, and have my Home set down to this app down here, it's going to export something. Let's have a little look. It's 'Design Specs'. Let's open the link to see what the developer sees. 

At the moment it's only exporting these, a couple of Artboards. So what I need to do is I need to go back into here and I need to set this as 'Home', so Home Page, you're the Home Page. It's going to go through the whole document and export it. The other thing is, I had a couple of problems when I haven't actually prototyped this thing. So sometimes you might need to go through, and just say actually I need you, this Artboard to join this Artboard otherwise it gets, kind of gets left off if they're not connected in some way. That seems to be, but I can't make it happen every time so just know that if you're having problems, just make sure at least these guys are linked to each other in some way using the prototype tool. 

So I've adjusted that. Let's say we have made changes. I can go into here, and go into 'Design Specs' and I can say, either 'Update Link', so that first link that we saw, this one here, will be updated, or let's say we make a version 2 we could then go and kind of make a new link so that you've got kind of a progression. It's up to you how you want to work. Let's say I just want to update it, because it was a bit broken. Kick back, relax. It takes a little while to generate all the assets, and publish them out. We'll speed it up. There we go, I'm going to jump into our 'Mockup', hit 'Refresh' on my page, and you'll see here. Now I love this. This makes life so much easy when you're working with a developer. 

If you're a designer, you can go into the code, you just want to send it off. You have to send off the images separately. I've seen a prototype for something very similar where you can actually just click on things and download the images. So at the moment you have to deal with them separately. What this does is - go back here - So it shows me all my Artboards. The cool thing is I can hover about that, and it shows me the interactions. So the developer knows where-- because sometimes they get really complicated and it's hard to know how this thing all goes together. So this gives them a kind of a visual clue. Let's say I want to go into some of these. I'm going to go into the Home Page, I'm going to go click on it. Here on the right, all the styles, all the colors they can use. You can see, when I hover above them it starts highlighting them in the document which is real handy, to know which is which. And all the fonts they got to use, all the different sizes and styles. 

Over here, nice things that happen is, say they want to use this style, they click on it and you can see, it says 'Color copied', that means that the developer can jump into their code editing product-- I'm just posting mine on a notepad, you can see, it's pasted in there. So nice and easy way to get information into the code. If you're not using Hex, say you're using RGBa, same thing, just change it, click on it jump into 'New Document', paste it, super quick, super easy. Same with this, if I copy, I'll click on 'Roboto', paste it in, just makes it easy working back and forth. They can change from pixels to dp, or pt, depending on what they're using. 

A cool feature, if you got a big document, if you click back on the Home Page you can search the Artboards. I've worked on projects where there are literally 100 Artboards, maybe more. So they can click on 'Marketing' and it will cut it down to the ones they want, they can click on this one. Now when you're hovering around, if I click on an object, it will tell me its height and width, which is really nice but what I really like-- I'm going to zoom in. Find it up here, if I click on this, and then just hover over here, can you see, it actually tells me the position, away from it, because often things are relative to each other. So I know that this button has a spacing of 32 pixels between it. You can change the dimensions. Over here, the points, all these density independent pixels these are quite cool for dealing with super high res images. 

It depends on your developer, they can decide what they need. Pixels is easy, points is easy, these guys here are often used for just mobile devices. So this is a cool little interface. You can email it to them, they update it really easily, and it just means your developer can work really nicely with you as a designer and make sure everything is exactly how you want it to be. They know exactly that you spent 20 minutes trying to work out the rounded corners on buttons or not, and they can follow your design exactly. 

All right, so that's going to be it about getting images through to your developer for the build. Let's get on to the next video.