Lessons

Lesson Info

Export Code Using Design Specs

Hey there. This video is all about something called design specs. So we've signed off our design and XD client loves it. Users love it. It's ready to get built. We need to get all the information held inside the XD document to a developer and design specs allows us to export, send a link to the developer. You can see here I'm in a browser. They don't need X. D. And they see over here are self sufficient. They can download the images that I've marked for export, they can grab the colors, they can grab the fonts, they come down as both S V G s, you can see there, they can download them or maybe PNG s they can find out the measurements and the sizes, corner radius is all that work you've put in as a designer. You don't have to hope the developer can build out. They'll have all the information they need or the code to ensure your design matches their final output. Alright. Let's jump into adobe. XD to work out how to do it. All right. So like in the last video we identify that some things ...

need to go out to our developers are engineers so they need things like images. They do not need that as an image. Okay. They'll develop that in code but what they do need is they need to know is it black is a gray, How see through it is what's the capacity that sort of details and obviously we don't want to write it down or email it to them. We want to allow them to be able to pull it themselves and that's where something called design specs helps us out. So to do it, we go up to publish here. Okay. And we've been doing published prototyping. So this has been great for sharing our ideas with either our clients or our user testers. But that's finished now. Right. Everyone signed it off now. We need to send it to the geek that's going to build this thing or the group of geeks. Okay. So we're gonna go to publish design specs, click on this one. It's much the same format as the other process we're gonna export for Web would have to do a second export for our app down the bottom here. But we're gonna stick with Web, we're going to give it a name, include the assets. So this might not be activated for you. Why would this not be activated for you? It's because you haven't set any images to be exported. Okay. Or batch exported. So let's come back to that in a sec. So this one here, you can see in the last video we identified your part of batch export. Let's have a look at see these guys here. That because they're not added to batch export. You can see this, it's not applied. This is not something that a developer can download. They can see it, but they're not going to be able to download it as an asset. It's up to you what you want to do. Let's say I do want all these fellas and so this one is going to be profile, I'm gonna shift tab, shift tab. Is it, is that even a short cut? It's kind of hard to do. Okay, so I'm going to export these profile photos. Okay, well, so I'm going to select them all and if I click on you, you you you this will be something the developer can actually download and these ones I won't do because I'll, I guess I want to show you that what the differences between them being tagged for bulk being tagged for batch export is versus not. So back to this design. Specs web include the assets, require password is cool. It's not going to go out to public. Okay. I know it's creating a public link. It's just anybody with that link can actually download the assets. It's up to you, whether you're kind of behind the scenes working or maybe part of an N. D. A. Something that needs a password. I don't will speed this up. Why is it actually we won't why is it why is it taking so long because it's actually generating all these assets here. Okay. Ready to go. So it's generating the 1%. Remember we we did Exporting images in the last video we had like times 100 times two it's producing both of those. So if I set this to export to android, it's going to try and create like six different sizes. So it might take a long time. Alright, we're back that took a long time because it's producing lots of art boards, lots of code. And also my internet is real slow. So like when we publish a prototype, we grab, we've got these options over here. I'm going to copy the link so I could just email that now and paste that into an email and send it to my developer and let's have a look at what they'll see. So I'm gonna click on this button here, open a browser here it is here, I'll come back when the page is loaded. Alright, here we are. And there's some bits missing. Okay. So before you save out your design specs or hit the publish button, you need to do two things. Okay, back in your XD mock up, You need to make sure whatever the homepage or whatever the first page you want to be shown, you mean to make sure you're in prototype and you set this little home icon. The other thing is that all the pages that you want have to be connected. So it's showing me all of these. Okay, But it's not showing me any of these guys. Why not? Because there's none of these pages actually go from here down to this one. Okay, So they're separate. So you can publish a separate one. So I can say that's going to be my homepage now, I can publish a second design specs. So a new link, she'll end up with two of them. One for the website, one for the app. I've kept them in the same document here for this course. Just I guess. So we can see it all and it's nice and easy. But probably in a production, I'd keep the app separate from the website. Probably not the mobile version. It's just a mobile website and not a separate standalone app. Keep it together, but separate app, separate document. Okay. So you can see it also hasn't exported anything from my art board. The other thing we didn't really cover is we need to make sure we're exporting it for whatever we need to write. So web for this and I os for that or android. You might have to do these two separately so they can download everything they need if they're doing both. An app going for both platforms, let's have a little look and why this is so awesome. Like I love this because I've got developers. Okay buddies that do the development work for me. I'm a average web designer. I'm okay. I can get by pretty far. But any sort of back end stuff I need help with. So what used to happen before XD is I would send them a mock up say in Photoshop or illustrator, they both do UI design pretty well and I give them access to Photoshop so they can open it. So they had a license. I knew they did? I'd say just grab the assets yourself and they'll be like, I don't want to or can't or it's too much just send me the images and you're like, can you just grab them yourself? No, they'd say you do them, you're the designer. Alright. So from far out here, we can't see a whole lot. So what we're going to do is click on any one of the pages it zooms in and it gives you access. This is the magic side over here. Okay. It's like your assets panel. You can see these are the assets that I've marked to be downloaded. Whoa, I missed the dollar sign in the middle here. So you have to group both of those to make sure the export together. This page has these even highlights them. Can you see that moving over here for highlight the man, let's go down here. There's the woman has all the colors, has all the character styles and it shows me all the interactions. So this is what I've done in the prototyping. Okay, so I can click on it and kind of move around. I want to go back to all screens. I'm going to click on homepage. What you can also do is both the creator. So the designer and the developer is you can add comments now as well. Okay, so you can go through and say like we did when we were doing our prototype? You can ask questions. Things like what I get back lots is, can you make this, Can you make this an asset? I forget to mark something. My developer will send me that. I'll get an email and I can come through and go back into X D click on it, make sure it's marked for export and then just go into here and click update and then it'll be ready for him. Cool. Let's have a little look on the assets. Again, that's what I really like is if you select any of these, you can click more than one at a time. But if I click just the hero man, you can see down here. I can download it as a PNG or Pdf. So good. I'm going to turn him off and just grab this one. You can see I can get SvG or PNG or Pdf. So good. This one here PNG Pdf, it means the developer doesn't have to come into XD and try and get them or ask me for them. I just marked them as batch export. Hit the design specs and away it goes other cool things as colors. Okay, so I don't have to go through, where is he from? You need to figure that guy out because we've got to doing very same thing, very similar colors, but they can click on this. What ends up happening is it's copied into the clipboard so they can open up any sort of like the code editor and it grabs the color awesome look on this one. They can paste it into Dreamweaver or komodo or whatever development program they're using, I'm not sure what's hot at the moment. Same with the fonts here, they can click on it. They can also decide whether they're using points pixels or maybe DP, which is a weird one. They use in IOS, I think, but they can get what they need down the bottom here. It has their interactions as well. Can you see the kind of highlight over here? It's just so that they're like, have I gone? Because sometimes you might they might not explore the whole thing. It just kind of lays it out here. The other thing to do is if they hold down shift, can you see I just tap shift on my keyboard and it kind of highlights the where they could go. They can also just use these arrows. I find that's what ends up happening most, but it updates. And you can see there's my little guys, but you can also see, because I didn't add that to my export. It's not in their same with these fellas. Okay, these just aren't part of the export downloads give them the information about it, like its size and appearance. That's one thing. Let's go back here. I told you that buttons need to be made in code, right? So this, if I click on, it gives them loads of cool stuff, it tells them the rounded corner. You don't want them guessing the color what kind of drop shadow? You spent ages getting the perfect drop shadow. Okay. And they can just copy the code out of here, gives it the height and width. You can also see if I hover above my mouse. This developer can know that it's eight pixels either side, top and bottom. Can you see? And the space between this is 40. So good, click on this font here. Not only does it allow them to get the font and the size and everything perfect. They can actually copy the the actual content and place it into what they're building now. We don't have a huge big amount here but know that you can search screens and that's about. It just gives the ability to pass this information off without having to export everything. Try and think of everything. It's all just here for a developer to use what I find them. But probably the most beneficial is when changes get made, I can make the change next d just do an update and then the developer without having to re link or resend. They'll have access to the updated files, you can add a comment to make them aware of it. It's a pretty sweet process. Alright. That is going to be it. I will see you in the next video