By Howard Pinsky
Hey everyone, I'm Howard Pinsky. And in today's Adobe XD video, we're going to take a look at building out a sign up form using components. Let's get to it.
All right. Here we are, back in Adobe XD. And we're going to start the process of creating our sign up form. And to start, we're going to grab the good old Rectangle tool and draw one out across this artboard, right about here. Now to give the shape a little bit of style, we're going to go ahead and round out the corners, somewhere around... let's say 32 pixels. And then in the Properties Inspector, let's go ahead and define a color. We'll choose a nice vibrant blue for this particular sign up form. With the rectangle in place, we can go ahead and start adding some content on the inside. And kicking things off, let's grab the Text tool, shortcut Key T, click and type out: Sign up. Now, at the moment it's a little bit too small and a little bit too hard to see. So I'm going to grab the handle on the bottom, drag it on up, and then over within the Properties Inspector, I'm going to switch the color over to white.
Now, we went with Sofia Pro in the last video. So let's go ahead and switch this up to Basic Sans. And I think Bold should work well for this header. I'm going to go ahead and make sure that it's placed in the center of our box. Now, down below this header, we may want some additional text to let users know what they're getting into. So, with the Text tool, one more time, I'm going to drag out a text box across the container. And I already have some text copied to my clipboard. So I'm simply going to paste. And you're noticing, it's probably a little bit too large for sub information. So, within the Properties Inspector, I'm going to drop the size to around 28. And I might drop the weight as well, just to around SemiBold. And because this is defined as an auto-height text box, I can also adjust the width by pulling in these handles. Now I may want one more text layer right underneath that's going to be a little bit smaller. So I'll duplicate this down and then double-click and type out something like: Click on each box below to enter your information. And this is going to be tertiary information. So I'm going to drop the size even more. I'm going to drop the weight as well and then pull on these handles just a little bit until it all fits on one line. Alright.
Our text is complete and now we can start moving on to the text fields right underneath. And to start that process, I'm going to grab the Rectangle tool one more time and draw out a box across this container. And to keep consistency with a container in the back, I'll round up the corners to about 8 pixels. Now, on this line here, there's actually going to be two text boxes. One for First name and one for Last name. And the reason I dragged out a longer text box is so that I can very easily use some math equations inside of the Properties Inspector, to make sure everything lines up really nicely. So in the width field, I'm going to go ahead and type out /, or / 2. Then I'll go ahead and type out one more minus 8, just to pull It in a little bit. So if I do go ahead and duplicate this over to the right, we now have everything lining up nicely. But before we do that, on the inside we may want one text layer. And this is going to be First name. I'm going to place it over top of our text box. Make sure to sample the blue in the background, using the shortcut key I, and then for the text properties, I'm going to bump it up in size, just a little bit and bump it up in weight to around SemiBold, and make sure that is left aligned. So our first text box is looking pretty good.
And now, what we want to make sure to do is to use components so that we can quickly add more and then update them, if necessary. So with both of these layers selected, the First name text layer and the container inside of your Libraries panel and your document assets, you can go ahead and press the plus button right here, which will create your component, which I'm going to name Text Field.
And as indicated by the solid diamond at the top left, this is your main component. So if I duplicate one over to the right, you're going to notice, we have a hollow diamond, which is an instance of the main component. And this will allow me to dive in and make overrides as necessary. So, this will be: Last name. I can do the same thing for one more, right over here. Drag this on out. Dive in, type out: Email address. And we'll do one more, which will be: Phone number. The beauty of using components is, if you wanted to change the styling you would simply have to edit your main component, which is this one right up here, again with a solid diamond. Dive in and make changes as needed. All right.
Down below these text fields, we may want some additional options so that a user can select a date and a time. And we can kick this section off with a small header. So with the Text tool, shortcut key T, one more time, I'll go ahead and type out: First available dates and then in brackets, (click to select). The size of this text layer is pretty good but what I might want to do is drop the weight of the (click to select) portion to around Regular. And very quickly, I'm going to launch the Preview at the top, just to take a peek and how we're looking. Great.
Now, right below this text layer, we may want to add in some available options. So with the rectangle, one more time. I'm going to drag one all the way across, just like we did before. Round up those corners ever so slightly. And on this row, we're going to be having three options going across. So like we did earlier, I'm going to use some simple equations, divide by 3 and then bring it in by about 8 pixels, one more time. Now, this first option is going to be our selected option. So I'm going to go ahead and grab my Text tool, type out: March 2nd. I can select the n and the d and apply Superscript. And just like we did with the text fields at the top, I can go ahead and position this. And if I needed to, I can actually select this text layer right here, copy it to my clipboard and then paste the appearance. And of course if you have that character style saved in your libraries, you can use that from there.
Now, one additional thing I'm going to add to this particular option is a bit of a shadow. So within the Properties Inspector, I'm going to go ahead and enable it. I'm going to bump up the size to around 21, 22, and then blur it to around 24. And then if I'm feeling a little bit adventurous, I'll go ahead and add a little bit of color, just to separate it from the background. And with our chosen option complete, we can actually go ahead and create another component. So I'm going to select both of these layers, like we did with the text fields, create a component within our assets or within the Properties Inspector over to the right. And I'm going to name this: Options. And with that done, we can now create an additional state for our non-chosen option. So within the Properties Inspector, I'm going to press the plus button, create a new state, and I'll call this Inactive. And with that created and selected, I'm going to dive into this particular component, select the background container, and then within the Properties Inspector, I can start defining the styling. I'm going to start by sampling the background color, and then dropping that down a little bit. I might want to add a little bit of a border. Again, I'm going to sample the background color and tweak it ever so slightly. I'm going to turn off the shadow. Then I'm going to set the text color to white. And now we have our Default state and our Inactive state. And what we're able to do is drag out additional ones across the artboard. And these two can be set to Inactive. And I can dive on in here. This will be the third and this will be fourth. And with these all in place, what we're able to do now is select all three of these options and this text layer, duplicate all of these downwards, and now we can use these for our time. So I'm going to dive in here. Change this to times. Dive in, maybe this one will be set to Inactive. We'll do 8:00AM. This one will be set to our active state: 8:30AM. And then over to the right, we'll do 9:00AM. All right. We're almost complete.
Now, right at the bottom, we may want one more text layer and a button. And to make that process a little bit easier, I'm going to duplicate this text layer from the top down to the bottom. I have some more text copied to my clipboard. But for this one, we may want to emphasize the time. So I can go ahead and select this text here, drop this to around Regular. And then finally, we can wrap things up with our button. Things are a little bit squishy right now, but we're going to adjust some spacing in just a moment. With the rectangle, I'm going to draw one out, round out the corners. And then on the inside, Click to confirm. Sample our blue, pop it in the center. And then, if we're going to be using this button on several forms, we can go ahead and turn this into a component as well. Now, like I mentioned, things are looking a little bit squishy. So I'm going to go ahead and make some simple adjustments just to clean up this form a little bit. I can also go ahead and, inside the Layers panel, make sure that some of these options are grouped, move them on up a little bit, just to make room for the button at the bottom.
And that's how you build out a sign up form using components and Adobe XD. In the next video, we're going to be prototyping financial charts using Auto-Animate. I'll see you all soon.
Use components in Adobe XD to design a sign up form for a website. In this tutorial, you'll see how to create and style rectangles to design a background and form fields. Next, you'll add text and style it by setting options in the Properties Inspector. Use a simple equation to set the width of the form elements to keep the layout consistent and lined up. Select the text and rectangle that make up a single text field in the Layers panel, then create a component. Duplicate the component to add more text fields to the form. Complete the design by adding a confirmation button to simulate an online sign up process.
