Skip to main content

Export Code Using Design Specs

Lesson 89 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

Export Code Using Design Specs

Lesson 89 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

89. Export Code Using Design Specs

Lessons

Class Trailer

Getting Started

1

Getting Started with XD

02:21
2

What is UI vs UX

06:19
3

The UX Brief & Persona

11:22

Wireframing Low Fidelity, Type, Color & Icon

4

Wireframing (Low Fidelity)

01:58
5

How Wide for my Website

13:06
6

Existing UI Kits

07:49
7

Working with Type

09:09
8

Basic Colors & Buttons

14:14
9

Free UI Icons

11:45
10

Footers & Lorem Ipsum

05:27
11

New Pages & Artboards

04:20
12

Class Project 01 - Wireframe

11:11

Prototyping a Website

13

Prototyping & Interactivity

08:53
14

Create a Popup Modal

07:57
15

Prototype

02:54
16

Groups & Isolation Mode

02:30
17

How to Use Components (Previously Components)

17:19
18

Production Video - Left Nav

03:52
19

Repeat Grid

05:27
20

Updating Components & Repeat Grids

08:54
21

Prototype Tricks

06:03
22

Navigation Tricks & Tips

04:48
23

Class Project 03 - Components

04:07

Prototyping an App

24

Mocking Up an App

09:40
25

XD App on Your Phone

08:04
26

Fixing the Position

01:01
27

iPhone & Android Status Icons

03:10
28

Production Video - Login

06:45
29

Sharing Wireframes

13:32
30

Recording Your Interactions

03:13
31

Class Project - Wireframe Feedback

01:21
32

Mood Boards

07:43
33

Class Project - Mood Board

00:59
34

12 Column or Grids

04:57
35

Working with Colors

09:02
36

Tricks for Using Colors

06:34
37

Gradients

03:50
38

Class Project 06 - Colors

02:14

Text & Drawing

39

Use Web Safe Fonts

18:00
40

Character Styles

06:59
41

Font & Text Tips Tricks

05:43
42

Plugin Lorem Ipsum

05:39
43

Paste Properties

13:15
44

Class Project 07 - Text & Buttons

02:21
45

Draw Custom Icons

04:13
46

Strokes & Lines

14:28
47

Pen Tool

14:34
48

Drawing Practice

07:15
49

Production Video with Tips

12:27

Working with Illustrator, InDesign & Photoshop

50

Illustrator in XD

09:34
51

Class Project 08 - Custom Icons

01:49
52

InDesign in XD

11:38
53

Pros & Cons for Images

03:58
54

CC Library Connection

11:01
55

Adobe Stock

05:20
56

Free Images

01:48
57

Masking

06:44
58

Photoshop in XD

08:41
59

Infographic

12:12
60

Class Project 09 - Hi-Def Mockup

05:38

APP Design

61

Mobile Phone Mockup

18:08
62

Class Project 10 - Mobile Website

01:24

Placeholder content & Plugins

63

Hidden Features for Repeat Grid

05:17
64

Plugin - Content Generator

04:29
65

Plugin - UI Faces

03:15
66

Plugin - PhotoSplash

04:31
67

Plugin - Copy Cat

03:19
68

Advanced Asset Panel

04:37
69

Advanced Symbols

07:52

Micro Interactions

70

What are Micro Interactions

07:21
71

Button Grow

06:13
72

Animated Image Gallery

06:39
73

Full Vector Change

08:19
74

Class Project 11 - Micro Interactions

05:12

Prototyping Advanced, Voice Interactions & User Testing

75

Time Delay Transitions

04:42
76

Popup Menu or Modal

12:16
77

Animated Mobile Side Nav

03:26
78

Drop Down Menus

03:24
79

Drag Transitions

07:19
80

Number Ticker Scroll

06:51
81

Alexa Voice Commands

09:37
82

What is User Testing

16:53
83

Unmoderated UX Test

12:07
84

Class Project 12 - User Testing

02:23

Pitching to clients & customers

85

Mocking up in Photoshop

09:21
86

ProtoPie

02:40
87

Add Animation Using After Effects

09:39
88

Export Images & Assets

12:56
89

Export Code Using Design Specs

10:49

What Next

90

Class Project 13 - Roar Cycles

10:29
91

Conclusion

05:32

Final Quiz

92

Final Quiz

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

Class Materials

Bonus Materials with Purchase

Six Completed Files
Exercise Files

Ratings and Reviews

Haseebullah Johar
 

Thank you, Dan Scott, for providing such a beautiful Adobe XD course. I completed the course today and noticed a couple of things that are missing. I want to share them here so that you can upgrade the course, which would be helpful for us. Hover state and toggle state. Dragging pages from 1-2 to 2-3 and then back from 3-2 to 2-1 with dragging is not working. Another thing is that we learned scrolling the website from top to bottom, but scrolling or pushing things from right to left has been completely omitted. These are the things I have noticed, and I would like you to upgrade them so that we can improve our Adobe XD skills.

Student Work

RELATED ARTICLES

RELATED ARTICLES