Subscribe or Login to watch video

Login or Subscribe to watch video

30 - Production Video - Adding text fields & buttons in Adobe XD


Questions & Comments

No comments

ALL ACCESS: $12 per Month + Cancel anytime   

Video Transcription

Hey there, in this video, it's going to be a production video so we're just going to go through and do some stuff, and what I'm going to do is, this stuff at the top here where we add some text fields, some buttons and we drag this up a little bit, do some amends, we add some Place Holders, and we look at this, which is really cool. It is the feature requests for XD, or bugs. It's a way for you to go through as a user and say we really need underlining, and up-vote it, and look at the other ones, up-vote what you think because whatever gets to the top of the voting pile, Adobe XD would do next. So a handy little thing to go in and say yes we need these features quick smart. All right, let's go in and do it.

So up here, I'm going to add our kind of Marketing Call to Action. I'll probably just use Fairplex, steal him. And this one is 'Quick test drive?' Our easy on boarding. It's going to be somewhere in the middle of the page. You can see, if you drag it around and you get close to the middle, XD's pretty clever. Making sure I'm working at 100% as well. Just so I get a sense of how big this thing is. To move around within the document you can hold down 'space bar', and you can click, hold, and drag. So I'm going to build a text field. You might jump out to something like 'Materials' or 'Microsoft' or some of the Wireframes to get ideas on how Text Frames should look, but actually the default box ends up looking quite good. It's got the right kind of liner around the outside.

What I'm going to do is just change the radius to be 2 pixels to match the rest of the style of this. I'm going to add a simple Drop Shadow. I'm happy with how that looks. I'm going to grab my Type tool, click once, and this is going to say 'Name your course.' With it selected, I'm going to open up my Assets panel. And you need to be 16. Nice! What I might do is, because it's an input field it looks a little bit nicer for you to change it to gray. I'll just lower the opacity. So it's kind of faint in there, so you know you can type over the top. What I might do is borrow some of the stuff from the Wireframe. That was the Wireframe we made. I'm going to copy you, I want you. Bits in here that I want. I'll copy it, and bring those bits over. Mainly I just want you two. So I'm going to go there. And I'm going to go somewhere over here.

So '+', and I'm going to borrow these keys along the top here. I should have borrowed both of them. Come here, boys. All right. For some reason this one here is going to say 'Upload'. 'Upload your… just 'Upload Video'. I have to get these lined up. Looks good. This one here is going to line up with that guy. And this one is going to say-- I'm just selecting these with the Black Arrow and using my cursor to move him across. And this one here is going to say 'Preview'. Center it a little bit. And we're going to have a check box so you can tick your own version. So it's just going to be this. If you hold 'Shift' when you're drawing a rectangle it's a perfect square. Just hold down 'Shift' while you're dragging it out. This one here is actually—

I'll change this to say 'Use Sample'. And this is going to bring us to a point where-- there's no underline, so it's got some pretty basic text options, it's missing a bit. So there's no underline, so I'm just drawing with a Line tool now. And when it comes to these features there's some that are super essential, that you really want and you can't believe it doesn't have. So what you need to do is jump out to, I'll show you, it is this site here, so it's adobexd.uservoice.com. Jump out to there, and it's a way of you going in and ranking stuff, so in here, if you click on 'Search', and type in 'underline', and do a search, you'll find that, dotted underlined text, underline text. So this is something, we need to be able to do this, and you can up-vote it so that the developers at XD think in the sense of what needs to get done first by the votes. You can see these features being started, which is nice. So it's been started a little while go, so it should be done soon. And you can add your comments in here, and abuse them for not doing it as well. This seems to be for-- so be nice, the XD guys are nice. I've met some of the XD developers, and they're really nice guys. They just have a lot to do, it's a new product.

The other thing you might do is just spend a little bit of time looking through and just up-voting the stuff, like in here. This I really want, so you just click on 'vote'. Add your email address, or sign in social media. I've voted for loads of these so far but this one here, I really want, so you can kind of have things like a navigation stuck to the top, so when you're swiping, it doesn't move. It's really good for apps, or mocking up an app. All right, back to XD.

Couple of things I want to tidy up. I'm going to zoom out. I want this actually to be part of this. I'm probably going to just adjust this, maybe we can adjust our Mask. So I'm going to make this bigger, just double clicked on that girl there. I'm going to make sure she's big enough to fit my new square. And she's going to be actually in this square. Nice! And you guys A little trick when I'm selecting something, is I drag a box around everything and then unselect the two that I don't want, which are these two, by holding down 'Shift'. It's just an easy way to grab all. So select them all, then hold 'Shift' and click both of these. Then you got these selected, and if you grab right in the middle there, it's an easy way of grabbing lots of things at one time.

Next thing I want is, there's going to be an odd box here that has two kind of lists that we're using in the product, the client wants. I'm not going to do those just yet, I'm going to add a Place Holder. So, Instructor list will go here. So nothing special. Just a little bit of a Place Holder, so I can carry on with my design. The other thing I'm going to do is grab the edge of it. Double click it, and just make this a lot longer. All right, so nice easy one. Let's get on with building up our Instructor dashboard next.

ALL ACCESS: $12 per Month + Cancel anytime