This one just has one art board, so now we can double-click on that to go into it. 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 could take a couple of minutes, so I'm just gonna skip forward till that's done. Now it's gonna go through a process of converting the file into a format that Avocode can work with. I'll just drag this onto the interface, yeah, that's gonna upload the file. And in those source files you should find a file named design.xd, so like this. As part of your access to this course you should receive some source files. We are gonna be working with XD, so we'll select this. So down along the bottom here, these are the different types of files that you can work with. 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 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. 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. I'm just gonna download the Linux app, and I'll show you how to work with it in just a moment. Then you'll be able to grab the download here for whichever operating system you need. To download the desktop app for your operating system, go up here to this DOWNLOAD button. So you can definitely use that and have access to everything you need to get through this course. That's all I'm using to go through this process with you. So head to, sign up for an account, you get a 14 day free trial. ![]() 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. However, of course, you run through this process using any operating system you like. In this case, we're gonna be working with an XD design and I'm gonna be going through the coding process using Linux. 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. So it can work with XD, it can work with Sketch, it can work with Photoshop. The other feature that's really great about Avocode is its ability to work with files from all kinds of different design software. So you can run it on Mac, you can run it on Windows, and you can run it on Linux. 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. There's two features of Avocode 3 that I particularly like. And in this course, we're gonna be coding up that design with the assistance of the hand-off tool Avocode 3. In the first one, we put together a code friendly web design. ![]() This is the second course in our two-part series. Hey, this is Kezz Bracey with Tuts+, welcome to XD to Code with Avocode 3. 2.1 Setup, Import Design, and Configure Preferences
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |