How to export code in XD for engineers using Design Specs

Course contents
SECTION: 12
Working with Illustrator 10:07

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

89 lessons / 10 hours 32 quiz questions 17 projects Certificate of achievement

Overview

Hi there! My name is Dan & I’m an Adobe Certified Instructor. I’m here to help you learn Adobe XD efficiently and comprehensively. XD is a fantastic design tool used by industry professionals to product high quality & functional mockups. By the end of this course, you will be able to produce practical and effective User Experience (UX) and User Interface (UI) designs.
 
Throughout the course I’ll invite you to participate in a real-life freelance project which I’m working on. It’s a project that requires a fresh website and mobile app interface. This will prepare you for dealing with real world projects if you choose to move towards a UX/UI career path.
 
This course is aimed at people interested in UI/UX Design. We’ll start from the very beginning and work all the way through, step by step. If you already have some UI/UX Design experience but want to get up to speed using Adobe XD then this course is perfect for you too!
 
First, we will go over the differences between UX and UI Design. We will look at what our brief for this real-world project is, then we will learn about low-fidelity wireframes and how to make use of existing UI design kits.
 
I’ll go over all of the essential tools necessary for creating excellent wireframes, including: type, colours, icons, Lorem ipsum, artboards, prototyping, models and popups, symbols and repeat grids. We will even make use of the new prototyping app so that you can experience your prototype on your mobile device.
 
An important part of maximising your UX Design workflow is being able to utilise other software such as Photoshop and Illustrator. This is why I’ll be teaching you how to make use of both to help boost your XD productivity.
 
One of the awesome new features of XD is micro-interactions. I’ll be teaching you all about those and how to use them to grow icons and scenes. This is one of the parts of web design that’s growing and being adopted rapidly so you won’t want to miss out on learning it early.
 
There are two class projects for you to complete during this class, these will help develop your skills and will give you something for your own portfolio.
 
It is now time to upgrade yourself & learn Adobe XD. 


What are the requirements?


  • You will need a copy of Adobe XD 2018 or above. A free trial can be downloaded from Adobe.
  • No previous design experience is needed.
  • No previous Adobe XD skills are needed.

What am I going to get from this course?


  • 87 lectures of well-structured, step by step content.
  • Learn to design websites & mobile phone apps.
  • Work with fonts & colors. 
  • Prototype your designs with interactions. 
  • Test on mobile phones. 
  • Send your designs for feedback & commenting.
  • Export production ready assets. 
  • Create your first UX brief & persona. 
  • Create quick wireframes. 
  • How to use premade UI kits. 
  • Learn professional workflow tricks & shortcuts. 
  • You will get the finished files so you never fall behind
  • Downloadable exercise files
  • Forum support from me and the rest of the BYOL crew
  • All the techniques used by UX professionals

What is the target audience?


  • This course is for beginners. 
  • Aimed at people new to the world of design & user experience. 
  • No previous Adobe XD experience is necessary.
  • For anyone that needs to add ‘UX Design’ to their portfolio.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files

Transcript

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.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024