2.1 Setup, Import Design, and Configure Preferences

Hey, this is Kezz Bracey with Tuts+, welcome to XD to Code with Avocode 3. This is the second course in our two-part series. In the first one, we put together a code friendly web design. And in this course, we're gonna be coding up that design with the assistance of the hand-off tool Avocode 3. There's two features of Avocode 3 that I particularly like. One of those is that it's fully cross-platform, meaning that you can run it in the browser, or you can run it on any operating system that you want. So you can run it on Mac, you can run it on Windows, and you can run it on Linux. The other feature that's really great about Avocode is its ability to work with files from all kinds of different design software. So it can work with XD, it can work with Sketch, it can work with Photoshop. So if you're in a situation, for example, where your designer is using a Mac and they're working with Sketch, and the coder is using Linux or Windows and they can't access Sketch, being Mac only, then Avocode helps to solve that problem. In this case, we're gonna be working with an XD design and I'm gonna be going through the coding process using Linux. However, of course, you run through this process using any operating system you like. Even though I'm gonna be using the Linux desktop app for this, I just wanna show you the web app version, so that you see that it's all fairly consistent, and you'll see how it's the same interface from one option to another. So head to avocode.com, sign up for an account, you get a 14 day free trial. That's all I'm using to go through this process with you. So you can definitely use that and have access to everything you need to get through this course. To download the desktop app for your operating system, go up here to this DOWNLOAD button. Then you'll be able to grab the download here for whichever operating system you need. I'm just gonna download the Linux app, and I'll show you how to work with it in just a moment. And if you wanna access the web app, what you can do it go up here to GO TO YOUR TEAM and then just click on your name in that drop-down list. So when you first open up the app, whether it's in the web version or the desktop version, you're gonna get this dialog box to help you set up a project. So we're gonna give our project a name. Let's just call it XD to Avocode. We're gonna leave it as a web project. And then hit CREATE PROJECT. We don't really need this welcome video right now, so we'll close that out, and now we're ready to add a file into the Avocado system. So down along the bottom here, these are the different types of files that you can work with. We are gonna be working with XD, so we'll select this. As part of your access to this course you should receive some source files. And in those source files you should find a file named design.xd, so like this. I'll just drag this onto the interface, yeah, that's gonna upload the file. Now it's gonna go through a process of converting the file into a format that Avocode can work with. This could take a couple of minutes, so I'm just gonna skip forward till that's done. [SOUND] All right, so now that's all done, we can double-click on our design here to go into it, and you'll get a different tile for each of the art boards that are in your design. This one just has one art board, so now we can double-click on that to go into it. We'll just click away from the tour video, don't need that. And here's our design in Avocode. So over on the right, we've got a whole bunch of information about the design. On the left, we've got what's effectively the same as a layer panel. This is gonna have the same groups and same layers as we used in XD. We've got a few different tools to work with over on the left, and we'll start by grabbing the hand so we can just skim through and have a quick look at our design. You can see that everything is coming in pretty good form, so that is just about ready to work with. Now, just as a quick note here, you could see that I've got some back placeholder images here. That's because I don't actually have the rights to distribute the images that we used in the first course in our two-part series. So you've got a couple options there. You need to grab a membership with involuntary elements and grab these same images that I used there, or in the same lesson when we put those images together, I provide a link to an alternative location that you could get some images to work with. Or when we come to the lesson where we're gonna be working with these images, you can just follow along. When we come back, I'm actually going to be working with the version of this design that has those images in it. So don't be confused when you see that those black placeholders have turned into photos. All right, so that is web app. It's pretty much the same as the desktop app. But now let's go over a couple of little things that you need to know about if you're going to be working with the desktop app using Linux. Okay, so here is my Avocode zip. To use Avocode on Linux all I need to do is extract this zip. Jump into the folder, and then this is an executable. So all you have to do is just go ahead and run that executable. Once you run it you're gonna need to go ahead an log in. And then once you do, assuming that you already went through the process of importing your design in by the web version, you'll see your project here and you'll be able to go into just the same way that you did online. Now, there are a couple of setting tweaks that you might wanna make. To change the settings for Avocode, go up to Profile Image up here, hit the drop-down arrow, and then go to App Preferences. And this is where there is something that, depending on which distro of Linux you're using, you might need to use a little workaround for. When you hit these drop-down boxes, you just get a black area here. Now, if you don't see that black drop-down on the operating system you're using, then you can skip this section. Otherwise, if you are seeing that drop-down, here's the workaround. The issue comes from a conflict with Electron apps, unfortunately Electron apps haven't been updated in a while to fix this problem. This is something that can happen with multiple Electron apps. I've encountered this in a couple of different spots. So all you need to do is use a terminal to run the app. So just run it normally, but also append the flag disable gpu. And now, when you go to App Preferences, you're gonna be able to choose your settings. So what you wanna do is change your settings, then restart the app without that flag used, because you need to have the GPU active in order to be able to export images. So just turn off the GPU integration to get your settings set up the way you want, then turn it back on again. So you can choose between a dark and a light theme here, I personally prefer the light theme for this. The next thing you wanna do is set up where you want your images to be exported to. So set up a project folder for your site that we're gonna be coding up. Jump into that and anchor it in images folder. And then we wanna set that path as our image export path. Now, you might want to choose Disable image export optimization here. That seems counter intuitive but the reason is the optimization process in Avocode is completely automatic, so you don't get any control over it. It does a pretty good job, but if you need to have more finely grain control, then you might want to export images at full quality, and then compress them yourself. There's nothing else that we need to do in this tab, but we do have a couple of things we need to change in the Code tab here. You can change the settings on a couple of different elements here. All we really wanna work with is settings for CSS. So we're gonna click ADVANCED SETTINGS here, and we're gonna change the unit that's being used to rem. I'll include some links in the notes below this video as to why you should considered using rem as your predominant type of unit in your websites. We're gonna change the line height unit to unitless, which is just good practice. We're gonna leave the CSS selector type as class. You can alternatively choose ID or element. But again, class is good practice. And you can also change the CSS selector text style. I personally like snake case, because snake case selectors are easy to select in their entirety with a double-click in your code editor. So that is everything that we need to change here, and then you can just have a quick look at the available shortcuts. Now that is all good to go. So once again, at this point, if you're on Linux, just close down the application, And then just run it again without using that disable CPU flag. All right, now there's just one more thing that I wanted to show you. And that is that you also have the option to use Avocode inside either VS Code or Atom code editor as a plugin. So I'm just gonna quickly set up the couple of files that we're gonna need. We'll be needing an index.html file. We're also going to need the style.css file. Now, if you jump into search extensions, or search packages if you're in Atom, then you can search for Avocode, and you'll find this plugin here. And then, with that plugin installed, you can open up the command palette, which in VS Code is Ctrl+Shift+P, and then you can choose Open Avocode app. So it's gonna split the interface, and then it's gonna load basically what is the web version of the app in the second pane. So you can go ahead and log in. And then you're gonna see the same thing that you saw online. So you can jump into your design. And now you're gonna be able to inspect a lot of the elements here and view their code. Now, the thing to bear in mind with this plugin is, you don't get access to the full functionality that you do using the desktop app or the web app. For example, you can't do things like exporting images, because you don't get any right-click menu when you try to click on any of the image layers. But what you do get is the ability to very easily copy and paste CSS into your style sheet. And the other feature that's particularly useful is if you select an element and then you start creating a style in your style sheet, you get autocompletion. So let's say I wanna bring in the font family from this heading that's being used here. I can start typing out font family, and you can see that this line here is autocompleting matching this line in Avocode. We'll just show the same thing again. Let's put in the width, and you can see that it's brought in the width that we have showing over here. So that may or may not be something that is sufficiently useful to you. Personally, I like to have a bit more room in my code editor and a bit more room to see Avocode at its full size, and it's made pretty easy to copy over CSS anyway. But I just wanted to you to know that that plug in is there and available if that's something that's gonna be particularly useful to you. All right, so now you've seen all the different ways that you can use Avocode. We've got our preferences set up. We've got our design imported. And by the way, if you do need to import a new version of a particular design, what you can do is hit these three dots here and then hit upload a version, and from there you'll be able to browse for a new version and replace the one that's already there. All right, so now you've seen all the different ways that you can use Avocode through the web version, the desktop version, the code editor plugin. All our preferences are set up, now we're ready to get into the process of actually converting the design into code. And the first thing that we're gonna do as part of that process is export all the images that are currently in the design out as JPEGs, or SPGs, or whatever we need them to be so they're ready for the coding. So for the process of exporting images, I will see you in the next lesson.