7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 2.5 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.6 Choose and Preview in a Handoff Application Designed for Coding

If you’re passing your design on to another person for coding, it can be in both of your best interests to choose a handoff application: a program catered specifically to web coding that can open compatible design files and give a coder what they need to complete their task.

Here, we’ll look at using Avocode for this process. We’ll start previewing our design in it as we go to ensure that, once imported, the design will appear to the coder as we expect it to. We’ll also talk about workarounds if there are areas of inconsistency.

Related Links

2.6 Choose and Preview in a Handoff Application Designed for Coding

Hey, welcome back to Code-Friendly Design with Adobe XD. In this lesson, we're gonna talk a little bit about using handoff applications as part of the workflow that takes your design into the hands of the coder and gets it into the browser. So in the same way that a design application is catered very much to the design process, a handoff application is catered to the coding process. In place of all the design tools, you instead have tools that allow the coder to access the information that they need to translate into code to easily export images and assets. And by having the designer using a design optimized application and the coder using a coding optimized application, you can typically both get your jobs done a lot quicker. And another consideration is that your coder may not be on the same operating system as you. So they may not have access to that design software that you use, whether it's XD, or Sketch, or whatever other software you use. But a handoff application is more likely to be available on all three major operating systems. And they typically have a browser version as well, making them very accessible. There are three handoff applications that are the most prominent right now. One of them is Avocode, another is Zeplin, and another is Sympli. In this course, we're gonna be referring to Avocode. Because as I mentioned, Avocode is gonna be the software we use in the second course of the series. But you can decide between you and the coder that you're working with, which application suits you best. For the purposes of this course, there is a free trial for Avocode. Or if you want to try out one of the other services, then they have free tiers that you can use. So choose one of those and then go ahead and get yourself an account, download the desktop application, or log in to web version of the handoff application. And then we're gonna check out the design as we've been working on it so far in that handoff application. All right, so here we are in Avocode. And we're just gonna call this project Testing. Make sure Web is selected and hit CREATE PROJECT. Just get rid of this welcome screen, we don't need that just yet. And now because we're working with XD, we're gonna select this tab down here. Now browse for the file that you've been working on so far and that's gonna get uploaded to Avocode. So you can watch it's progress uploading up here. And then it's gonna need to go through a second stage, where it processes the file from XD into Avocode format. And the reason that we wanna do this now is so that we can keep tabs on what the coder is actually gonna see and make sure that what we're doing in our design is what's actually gonna come out on their screens. And then if there's anything that's not quite the same, we can ensure that we have a workaround for that at the time that we handoff our design to the coder. And this can take a couple minutes, so I'm just gonna skip ahead to when the file is ready to use. All right, so now our file is ready to jump into. Let's go and double-click to open it up. It's gonna separate each of the art boards in your design, so click on the art board that you want to preview. Close this down. We don't need that right now. And now here is what the coder is going to see when they receive your design. You can see that everything looks almost the same. All the colors are right. Our shadows come in right. This content area here has come in correctly. But the edges of our image are not quite correct. It's almost the same. Here's our original, just looking a little more crisp around the edges, whereas Avocode hasn't quite been able to exactly reproduce that blur effect in XD. In fairness, that blur effect is not a super common effect in design software. But it just shows why it's a good idea to jump in and have a little look at the preview and make sure that it looks the way you really want it to look. So what's the solution for this? Well, what the coder would do in this section is they would grab this group here. And they would export this whole image as JPEG. So then it would look exactly the way you see it here. And the only reason that this doesn't look exactly like it does in XD is because Avocode can't reproduce that blur effect. So what we need to do is go back to our design. And we'll make an export of this section ourselves, which will then bring back into the design already rasterized. So then, instead of the coder seeing an approximation of this effect here, they'll see a rasterized version which will then look perfect when they export it out themselves. So we'll go into our One folder here, we'll select our onebg folder. We're gonna right-click, and then we're gonna say, Export Selected. In this case, you can actually export this image as a full size PNG. You'd normally export as a JPEG to try to get some compression and file saving in there, but that's now what we want. The coder is gonna do the exporting as a JPEG. What we want is for quality. So go ahead and pick an export location, and then hit the Export button to rasterize that layer, right, and now we wanna bring that layer back in. So we're gonna go to this menu up here. And we're gonna hit Import. And now we're gonna grab the PNG that we just exported, and import it back in. And we're actually gonna drag this all the way to the bottom of this stack. We're gonna hide this layer here. And now we can drag our new rasterized image up to the correct location. And so now it looks the same, if we were to turn this on and off, our original version, there's no change. But now the handoff application doesn't need to try to recreate those blur and darkening effects. So save this, gonna get back to Avocode. I'm gonna hit this button to go back. And then I wanna go into our testing project here, and then hit these three dots at the top right of our design and choose Upload version. And now I'm gonna replace the version that we have in here with the changed version. All right, so that's updated, I'm gonna go back in. And now that image looks perfect just how we designed it to look. And now when the coder actually exports this image, it's gonna look identical to how it looks in XD. That might seem to a degree like it's a bit potentially out of the designer's has to be looking at the handoff application. But the thing is, if you don't do this stage, if the coder gets A version of the design with this in it, there's nothing that they can do at that stage to fix it up. They will still need to have to come back to you and ask for an exported version of the image. Or you would have to notice that there was a difference after the coding process had already been done. So it can be really helpful to get a little bit proactive, and make sure that everything is shipshape before you actually hit that handoff point. In the next lesson, we're gonna look at another thing that can come up quite often as a gotcha if you're used to designing for a different environment than the whip. And that is making sure that everything has pixel perfect alignment. But there are actually already a couple of imperfect alignments in the design that we've done so far. And you may or may not have noticed them as we went along. So in the next lesson, we're gonna check out how you can fix those alignment issues. And we're also gonna set up a couple of methods that we can use for the rest of the design process to make sure that everything that we put in from here on is perfectly aligned. So we'll go through all of that in the next lesson. I'll see you there.

Back to the top