Subscribe or Login to watch video

Login or Subscribe to watch video

8 - How to create forms, checkboxes & buttons in Adobe XD


Questions & Comments

Dan Moynihan - 5 months ago

XD now has underline in the text options

ALL ACCESS: $12 per Month + Cancel anytime   

Video Transcription

Hi there, in this video we're going to make some Input boxes and some Checkboxes, and a Button. We'll also look at creating our first Character Style. So let's go and start creating now.

The first thing I want to do is, I'm going to grab the Rectangle tool and just divide off a bit of space. This is going to be my On Boarding Box. It's above the fold, it's my most important. It's asking people to kind of become a member, or at least test their course. So what I'd like to do is-- I'm happy with the white Fill. The border here, I'm going to change it a little bit to be dark. You know, I said don't spend too much time picking fonts and colors. I can't help myself sometimes. I've just picked a slightly darker gray. I'm going to use this gray throughout the course.

See this little '+' button here, I hit '+', it means that it is easily accessible. We'll do the same thing for down here, I'm going to click on the Navigation. I'm going to click on the Blue, and I'm going to add that. Just so that it's nice and easy to reuse. What I'm also going to do is-- see this little dot here? He can be dragged around for your colors. I'm going to drag him to the top left, so he's fully white. Don't worry about this navigation at the moment. So I've got a white color at least there, and a full black. So I'm just dragging it all the way to the bottom left, clicking and dragging past that corner. So I've got at least some basic colors to start working with. I'm going to set him back, my navigation back to the blue. Now why am I using blue? It just happened to be the one that's on the template and I'm reluctant to go pick the brand color to use. Maybe the green from the color, I can start using. No, you could use black and white, that's fine.

So this is going to be my On Boarding box. What I'm going to do is just lock it, 'Command L', or 'Control L' on a PC. Actually a bit of Type at the top here first. So this is going to be where my On Boarding message goes. It's going to be kind of a-- I'm going to make this just a larger font. So On Boarding message goes here. I try not to add any actual dialogue or actual marketing material here. Again, just to keep it simple. Give an idea of what the title's going to be used for. So now I want a text field or an input box that I'm going to go and get from my template. So here is my Wireframe, I was looking around and I've found on-- there's a Form section, and then I guess it's just picking the style you like the most.

So I'm going to grab this one here. I'm going to copy it, jump it back into my Option here. And it works for me. Instead of 'Entered', I'm going to put in 'Name your course'. I'm kind of just going over my thing that said no marketing messages, or no actual Type. I couldn't think of a better way to describe without actually writing the text in this case. So in terms of the text, I'm going to keep everything gray. Just to keep our boring consistency through it all. And I'm going to add a little '+' sign here by just clicking once, hitting '+'. Selecting it, I might make it a bit thicker, so it can be seen. 'Bold'. Size wise, probably needs to be up, '30' even. All right, 'Black arrow', move into position.

Next thing I want is a Checkbox. You can like, dragging this thing around, really wants to snap to stuff. Normally really cool. What you can do is, if you're finding that a little bit hard is to let go of it, and just use your keyboard. I'm using my arrow keys on my keyboard just to move it around. You can hold 'Shift' and use your arrow keys, and it moves in big chunks, and without it, just moves in small little pieces. So now I want a Checkbox. So I'm going to jump back into my Wireframe. There's one right there, that will do. So I've got him. I'm going to copy it, move it across. That's going to be somewhere there. Great. And I'm going to double click him, and I'm going to say "Use Sample Video". I'm going to use my code that I'm using throughout.

Next I'm going to put in equals. Equals '='. And I'm going to put in a Button here. So I'm going to go find a nice plain Button, hopefully. And it's just a matter of looking around, and going "There is a Button there for me." I'm going to ungroup these. That's for one unit, I'm going to copy it, move it across, paste it. And that's what I'm going to use. And this one is going to be-- this one says 'Preview'. What I might do is, select it, make it centered. Now you'll notice that actually it's not connected, it's grouped to the outside box but not kind of connected. So I'm going to ungroup it so that I can drag it to the middle here.

Now in terms of the font size, I've decided to go for a larger-- what have I got here? 14. So I've got 16 and 14. So I might actually make this bit more consistent. So you, you, you, and you all are going to be 14 as well. I feel that's a better font size. There's something weird there, I'm going to get rid of them. Now one of the things that happens to me when I'm designing here is that, you can kind of see, I find it hard to see both the edges, I want to stay at 100% so I'm designing at the right size, but it's hard to see both sides. So we're going to have to turn this on and off if you're working on, like this screen here is a MacBook Pro. And I guess that's 15" so this screen's not quite big enough. If you're on 13, you got lots of trouble. But hopefully, maybe you might be working on an external monitor and that's what I normally do when I'm not recording. I just have an extra bigger 4K monitor that I plug into to work from. And yes, all right. I'm going to at least make this centered, and there, it looks nice.

One of the last things I forgot to do is-- You can skip on now, we're not getting any more exciting. I am going to add a little option in here that's meant to say, 'Choose your file'. And a '+', cool. I'm going to use the same font and stuff as this. So what I want to do is actually dive into a bit of Style. We're not going to use Styles too much at this level. So with it selected, I'm going to ungroup it. So I can select on just this Type. I'm going to open up what's called my Assets panel. So here in Assets I can have something called Character Style. So it's like Character Styles from other products like Illustrator or InDesign. If I click on it, it's just like a pre-made size that I get to reuse really easily.

So if I click on him, and click on him now, they all match, and if I update this one by right clicking it, and going to 'Edit' and say, later on I decide, actually 16 needs to be used, you can see, everything goes and gets updated. You can see, this one wasn’t part of that Style, but XD did some Hoodoo magic where it kind of reaches into the document and finds ones that are exactly the same and updates those as well, so it's super useful. So actually I'm going to turn this back to 14.

One thing I might do to make it look like a link that can be clicked is do an underline. Weirdly you can't do underlines yet in XD. It's kind of an inversion one, so we're going to cut it a little slack but it's kind of one of the important ones, so I'm going to get the Line tool and fake an underline. And to kind of indicate a bit of hierarchy between that being the most important, and this being like the next bit I might actually use a slightly different size, 14, and adjust this in. And I can go underneath. So you can choose that sample video or choose your own file. Then when we get to our kind of High Fidelity version I'll be able to kind of show that a lot more and clearer kind of fighting without my-- I really want to spend some time making this look as an option, like a second option but we're going to leave it there for the moment. All right, so let's get on to the next video.

ALL ACCESS: $12 per Month + Cancel anytime