Form Design in Figma with Interactive Components

[Music] what's up everybody gary simon here so today we're going to be checking out form design in figma so we'll take a look at the ui ux basics of designing effective forms and also how to prototype them using figma's interactive components beta feature now this means that you will have to apply to have access to this feature there's a form and a link there down in the description here on youtube and once you i submit this form it's a real simple form it could take a few days up to a week in order for them to enroll you all right but at that point you'll be able to use the interactive components beta feature in order to create form designs and other really cool elements alright so as always if you haven't yet make sure to subscribe and let's get started now wait one moment if you're interested in form design and ui ux you also might be interested in front-end development which allows you to take your designs and make them a reality in the browser and other devices if that's the case you should definitely check out the sponsor of this video scrimba.com they've recently launched their front-end development career path which is a collection of courses that cover html css javascript react and much much more as you see it's over 75 hours of awesome content there are hundreds of interactive coding challenges and it's all geared towards helping you go from beginner to someone that's hireable as a front-end developer so click on the top link here in the youtube description to get access to the front end developer career path at scrimba.com okay welcome to this lesson where we're going to create a form and the forum's purpose is to collect a person's name their email and also a checkbox to specify whether or not they want to receive a newsletter and then finally a submit button so that's three different form elements and that's going to be two text fields also a check box and finally a actual button for submitting so here we have a just a basic skeleton user interface and we're going to put a form right here and we're going to also put all the various states of these three different form elements and put them in components with variants as well all right so we have a lot of work to do it's really fun once you start to get the the idea of you know accurately prototyping all this stuff and you get to see it become a reality uh when you hit the play button in uh and actually get to interact with it so what we're gonna do here first is all labels need to have or all forms rather all they need to have a heading of some sort to inform the user what this section's about so we're going to put in just a piece of type here and i'm going to put in i submit your details now we can't see it because it's white so we're going to go ahead and make this black all right and where i'm going to choose to align this is not to the very edge right here if we can zoom up you can see it's a very soft white there's not much contrast i'm not going to put it there i'm going to put it right along the side here so the best way to do that again would be to hit shift r drag out a ruler and make sure both of these elements are right up against it all right that's great okay so right here i think that's pretty good position we can always adjust things afterwards with shift r to get rid of that again um and now we're going to go ahead and design the first form element which is going to be collecting the user's name all right so we'll go ahead and take our type tool left click and just we're going to put in name all right so let's go ahead we'll make that black as well and what's the issue now we don't want to have a name field a label a form label be as big as the actual form title so that's issue of visual hierarchy we're going to scale that down in order to really increase that visual hierarchy or that separation so i would say roughly around 18 i i for the size would work pretty well and we have enough of a distinction where these two fields you know our eyes are clearly drawn towards this heading right here now let's go ahead and then take the rectangle tool and then we will by the way it's probably worth it to get our rulers out so shift r and we're just going to drag out a field maybe right around this size or so remember you don't want to have a field too small and you also don't want to have a field that's too large based on the the type that's going to be inside of it so what we can do now is i shift r get rid of those and we have to make a determination what color do we want this background to be well first of all so here's a design tip this background is is not gray it's actually it has a let's click on this here so i can get access oh i think right now it is oh it's because it is locked sorry about that i'm going to move all those things inside of there all right so this right here this artboard or this frame has a color here and it's it's it's very it's not gray it's it's very light as you can see but it has a little bit of this green hue in it right so you don't want to use in a context of like a light by hued background color like this you don't want to use a gray they just it just it just doesn't look good at all so what we want to do is we'll grab this background color and now it's the same exact color as the background and you could come down here maybe make it a little bit like that if you wish or you can make it white but now this obviously does not contrast hardly at all so let's use a stroke so for the stroke you could just leave it black or you can do the same approach where we take the eyedropper we get this color and then we pull it down somewhere in this eye the darker area because you definitely want to make sure it we can come right near the center and that way we can get more of the color in there so this to me looks pretty good so we also have to make the determination if we want to have rounded uh corners so if we zoom up enough by holding ctrl and the mouse scroll wheel we can see these little dots we can pull them in let's just go with five or so and that value is right up here all right so that looks good so let's say this is how we want the form element itself to look and here's where it's starting to get important to start using good practice in terms of adding your styles and so we can see we have two different sections where it has a fill and a stroke we also see the little styles i icon on both of them so you can add your stroke and your stroke width and your stroke subtiles essentially over here so we click on it hit plus and then we can give this a a suitable name that's relevant based on what's happening here so we can add the name we can just call this right here default stroke just create the style and now we'll have the ability to reuse that and in a single area change it and it will change across all instances of this future component we also can add this white right here so we can go ahead and hit this and then hit plus and we'll say form background we'll create that style all right great so let's also make a consideration about an error state so one thing that's important to always design for so that your developers your front end developers will know what it looks like is an actual error state uh on top of a focus state as well so we're gonna do those three things so when i what we'll do is we'll we'll design for the error state right now um and then we'll do the focus state once we get to the variance section because the focus state i'm planning on just taking the stroke and increasing it from one to three pixels that's the only difference in fact this is what that will look like so when somebody clicks into it it's just going to make it but much bolder and by much it's only two pixels but it there is a big difference if we go from that to this now when it comes to the error state we're going to add um some information in an icon down here um and then we will also change the color of this uh outline here to red that way we have plenty of visual cues to let a person know that there is an issue with the information that has either not been entered or has been entered but incorrectly um into this particular form element so let's go ahead and right click we'll go to plugins and iconify make sure to install that uh by going to browse plugins if you don't see it it is free and then we will shoot just type in warning and i'm going to take this one right here drag it on sometimes they're real big that's okay just hold shift alt left click and drag and make sure you don't flip it upside down there we go and we're gonna put it right here now size is real important you really don't want this icon to be this big simply because i it competes for too much attention visual hierarchy for the name field so well before we scale it down let's go ahead and um actually let me let me lock that group right here there we go oh that is inside of there sometimes i'm going to leave things like this in when things get screwed up so i can show you how to fix it this is inside of that group where i didn't want it to be so i'm going to drag it out and now it's there and now we can't select the rest of this stuff because we don't want to change that okay so let's go ahead and we're just going to click right somewhere next to it it's okay if it's not in the correct position initially and i'm going to put in sorry you have entered incorrect data just something generic like that will work just fine um of course we don't want it to be the same size as our headline clearly so we need to scale this down a lot so let's go to 18 and you probably don't even want it to be the same size as your name and you certainly don't want it to be as bold um so what we can do is we can take this down to regular and then we can come down to around 16 and that's a lot better we could probably scale this down just a little bit more and we'll also make both of these red so remembering that we want to we really want to stick with uh what makes sense in terms of uh reusing and adding these things to styles so we're going to make the fill red and then we're going to add this i right here and we're just going to call this error we'll just call it error that's fine right there for the color and then we will choose this and choose error as well now also when it is in the error state this will also change from default stroke to error but we'll do that when we get to the actual variance section so we want to make sure everything's pretty much uh positioned how we want it at this point and now we can go ahead and we can take these these elements here let's first group these up so ctrl g by selecting both and now we have three elements we have our name our rectangle right here we can also rename that from rectangle 12 to text field by double clicking into it and then we have this element so now what we can do is we can right click and we're going to create an auto layout to this and this will become important in the future and you'll see how and then finally we can right click we're going to create a component and then we're going to come over to variants and we're going to click plus and now we've created the variant from it so let's drag it over here this time it's a little hard to see what it looks like on this background so let's go ahead and just take a frame and we're just going to wrap a frame around it and we'll give the same frame the same background color so the background color over here hasn't been added to the styles so let's click plus and we'll choose background and then we can come back here we can click this and then choose background this will be the default state and it's named default by default over here as you can see in property one and for the default state of course we don't want to show the error so we'll double click into this and right here under the layer section we're going to click this eye icon alright so now when we click back into it it's just selecting this portion the next state let's go ahead and duplicate this and let's move this down actually so let's move things around a little bit and i'm going to pull this down we'll take this element and well let's take this top one and just push this over here this will be the focus state like i mentioned so we're going to double click into it change this to focus and then double click into the form element itself and we'll change this default stroke here up to three and there we go and that's good um and then also we'll go ahead and make this one we'll change the default stroke to error and you could also choose to change the name to error as well i'm not going to choose to do that i think these two right here would be more than sufficient for appropriately identifying and communicating to the user which form element has been incorrect so right here we're going to double click into it and change this to error and that looks pretty good right there if you wish you could add a hover state to this as well but for now i'm just going to leave it i as is right here so in this little frame right here um we can also give this a label and we can just kind of name these although it's kind of self-explanatory what's happening but we can put text fields these aren't used in the prototypes themselves this is just an area for us to see our different components and such all right so what we'll do now is we're going to go to prototype and then we'll double click into this default and so when somebody clicks into this so on click is the type that we're going to use we want to change to our focus right here and that will work well and then we have to find a way to figure out how to show an error state um it's a little tricky depending on how you've structured your form and how you laid it out and you'll see what i mean but what we'll do is on the focus date we'll drag a connection here and then we'll just use a key so when somebody uh if you click where it says click to select and hit the whichever key you want to activate this hit enter so mine will be the enter key and when somebody uh clicks enter while this is selected it will take them to the error state and then maybe if they click escape or enter again you would have to communicate this this information to uh the stakeholders who are who are making the decisions about your design it will take it back to the original state so we'll change this to keypad and maybe we'll just hit escape all right so let's go ahead and give this a shot here and in our assets it's frame two right here you might wanna rename frame two to uh components all right and then we'll come back here and we will drag notice this says frame one that's also not ideal either so if we go back here we'll change this to i text fields all right so come back drag this on and here's our first text field so let's go ahead and click play and we'll see what happens so somebody clicks into it we showed the hover state or not the hover state rather except what i mean by that is the focus date and then we'll hit enter there we go and then we'll hit escape just to get out of there all right so now we're going to put in the email form as well or field rather we'll duplicate this ctrl d we'll drag it down and we're going to double click to change this to email and that's looking pretty good right there email is one of those fields you also don't need to add a placeholder value people pretty much typically know it's whatever at whatever dot i com.net or dot org so that's pretty good right there now here's one of the problems that i mentioned um when it comes to prototyping this particular the error state so if we go back to this and i hit enter notice how close it is to this there's not enough white space now you could try to account for that by pushing this down but now there's too much white space in my opinion while it looks good here when that air state is not there there's just too much white space between these two elements what could work if you wanted to accurately or not accurately but if you wanted to demonstrate what this might look like you could put it to the side and that's fine but then again it kind of breaks the layout so what i would suggest doing is one of two things you can create a more elaborate prototype where you have different frames that i simulate just that you know the entire form as a part of a frame and then in one frame you have this changed by the way or to like uh let's see here you have it change to the error state um and then you can create an on click and it will naturally push things down what you can do is we can take both of these elements and we can right click and choose uh auto layout so that way if you want to change this to an error it will naturally push this down i'm as you would want it to or as you would expect it to so however even doing that it still doesn't move it down once in prototype so perhaps that's something that they will address in the future all right great so now let's go ahead and do an actual i let's do a check box down here all right so for the check box if you recall it is just a typically it's a square so we're going to take the rectangle tool we can hold shift and the size of the check box obviously is pretty important it needs to be big enough for people to easily click on it especially tap with their finger but not so big that it throws off the flow of the design so what we'll do here is we're going to choose to add the fill which is the form background color and then also the stroke which is the default stroke and also notice how we have rounded corners here you want to have that same sort of aesthetic applied to your other form elements as well so they were five and that would work fine but i think because this is such a smaller square essentially we can probably get away with making that three and it still works just as well all right so we'll say that this is the default state now we're going to create a component that also has an interactive component variant to it but first we need to get all the layers that we're going to be using um before we get to that stage so let's go back here to our layers and this time we're going to use the pen tool for the first time so we're going to zoom up here we can see the little it might be hard to see on the video but there's little like a pixel grid tiny little squares right here and that can help when it comes to creating your designs so i'm just going to choose like right around here left click hold shift and shift allows you to do perfect up and down or sideways uh or 45 degree angle lines so hold shift and then come out here to a 45 degree angle line left click hold shift again and then maybe we'll come out to like right around there all right so once you're happy with it you might not be but once you want to get out of this mode hit escape twice and then you can double click to get back into it to be able to make adjustments so for instance if this anchor point right here if you click on it notice it's blue um we want it maybe it's too too long you can use your keyboard arrow keys or you can use the mouse to adjust it as you deem fit essentially so now we're going to get this into place maybe we'll scale it up by holding shift alt maybe we'll also increase the the stroke and we could choose to make it black and that's perfectly fine and then we could also choose however just to make it the same i stroke i right here like default stroke and there we go all right so this here is looking pretty good this is basically centered we could also take both of these elements right click and choose to add auto layout all right so this is looking good and now let's put the actual label so the label next to it is going to say i want to receive uh updates via email or something like that so we'll take down we're going to leave the size there but it is competing way too much for space uh for for for i for your eye is attention based on these form labels right here which are arguably more important so to reinforce that visual hierarchy we'll just take this and change this to regular and perhaps change it to a size of 16. so once those are lined up notice i have you know pretty good white space between this element here there's also a good white space between these elements all right this is looking pretty good so once you have it where you want it we can go ahead and take this and really you have to you have some decisions to make i do you want just the checkbox to be a component in and of itself or do you also want to have the label be a part of the component for flexibility you could probably choose just to use this uh checkbox option with without it without this label but i think i'm going to include both of them because i don't imagine a scenario in which there isn't a label to the right side of a checkbox so we could take both of those and we'll right click we can add an auto layout in between you know in and of themselves and we can also look at how these are structured here so if we come out here we'll choose to center that there we go now this is vertically centered it was off slightly then we can right click create a component and then also add our variants all right so now we'll drag this down we'll duplicate this text fields will now become check boxes okay and now we can create a few different states so this time we'll do a hover state for these the first one will be a hover so we'll double click into it we'll change this to hover all right so on hover the only thing that's going to change is we'll come over here and we'll change our form background we'll detach that from the styles we'll go ahead and grab with the color picker this color right here and we're going to go lighter like right around there so that's going to be the hover state and we can also change this and we want to make sure we're going to add this to our style so click plus and we'll just do form background hover and then create style double click it okay it's it's named hover all right let's uh duplicate this and for this one we're going to make this one where it's actually checked in now by default let's make let's hide this so we'll just for the layer section hide this one do the same thing for this one now let's do the actual checked version so we will duplicate this and we'll just say checked for the property double click into here now for this this time you may not be able to select it here you just kind of have to come out here and choose to turn that layer visibility on and then finally let's also go ahead and choose a pressed state so we'll take this we'll duplicate it and we'll choose pressed and for pressed what we can do is simply invert the color scheme so we can double click it in here and for form background we're going to change it to default stroke or not default stroke i think maybe we could still do that let's see here yeah let's just leave that default stroke and then for this we can change this to form background and then this is our press state all right so we have some work to do for the prototyping so let's come out here prototyping section with the first one selected this is simply a hover so it's not on click it is while hovering all right and then while you're hovering what's the next action that could occur well i suppose it would be while pressed i or it would be this right here the pressed variant so we can drag this down here and i guess it would make sense to reverse the order of these um and then this is going to be while pressed or while pressing all right and then this one will be right here it's going to go up to this one right here which is the the checked option and this is going to be mouse up all right so it's pressing and then mouse up it goes back to this state and then if somebody clicks this once it's been checked it will go back to this over here and so this is on click all right that was a lot of uh you know prototyping connections but it should work we'll see if it does now let's select this make sure this is named appropriately from frame three to check boxes we'll go back to our assets we will drag this in all right and let's give it a shot hover click there we go so hover click you can see now it gives us a press state we let go it's now selected and then we can unclick it very very cool and by the way let's see what's happening here why did that oh i think because we didn't refresh this that that was showing up all right there we go so now yeah if we hit enter escape escape okay all right so now what we'll do is let's go ahead and add finally a button down here and we'll create a component for that as well so we'll go ahead and what we could do is just double click this i want the button to be the same size as our text field essentially so i'll just come over there and i copy that and i will paste it now one thing you have to be worried is making sure that it doesn't fall into one of your frames so i'm just taking it out there i just drag it out and it's not it's not inside of you know one of these uh frames or anything like that so now what we can do is let's take their button now the button a good call to action which is what the button is um it really needs to stand out well so leaving it like this and styled like that would confuse people because they might think even if there's a label inside of it which there will be you might think it's some type of text field so you want to style your your elements differently from each other so what we'll do here instead of form background we can change this here i to default stroke and then now we have a button that really works well you don't have to extend it all the way out although you can um you certainly would want to in most cases if it's on mobile and you don't have a lot of space to extend it all the way out but we're on desktop here and we have quite a bit of space so we can just choose to push this here and again leaving it this large there's nothing wrong with it either so it's kind of a subjective preference based on the text that's inside of it so for the text that's inside of it um this is also an important i kind of like a ux idea and that is your your button copy never just put submit a lot of people want to put submit or click here you want to your button copy should reflect what's happening uh when a person or what happens or what will happen when a person submits their form or of some sort so for us we can just make it um something like start the course all right so that works well we can take uh our styles here and [Music] all right the color we have to make sure that we're we have good color contrast i kind of want i'm leaning towards white so what we can do is we can change this to well we could use an existing style that we know works already so for the form background we can just make that color all right and then we'll get this uh centered up here pretty good with how we want it i think i like the looks of this as is but first we need to check that contrast so if we go right-click plug-in stark again stark is a plug-in or extension that you can install for free and we're going to click on check contrast so this is actually pretty good 4.16 um to one ratio that works just fine all right so now we're going to take both of these right click choose auto layout and again if you want to adjust the size of this and all that let's come over here make sure this is centered now we pull this out and it will adjust accordingly i think right around here is probably pretty good now we're going to take it again right click create a component and then a variant so now let's go ahead and take this drag it out we'll drag this over here and this is going to be button and let's do a couple states let's do a hover and then also a pressed state so for the hover we can choose to make this lighter but again we don't want to go too light to where it messes up the uh the contrast between it so what we can do here is let's take i this and detach it and then just make it a little bit lighter is a stroke on it so we can remove that as well and if we take both of these elements and we go to check the contrast we're still at 3.0 uh that was almost perfect pretty much you wouldn't want to go too much less than that all right so now this is going to be named hover and then we will duplicate this and then we'll do a pressed state all right so a press state when somebody you know has their finger tapped on to it when they this only shows up when there's actual contact with the mouse button or somebody's left clicking or actually tapping so this right here let's change this to press and you can do you can really change up the design when a person's pressing on it to really let them know that this is the actual element that they intended to select so we can come down here and make this pretty dark maybe right around there and then we can add this and call this pressed background all right all right so we have them all named up pressed hover and default let's go to prototype this will be hover and this right here this will be while pressing and then when it is finished been pressing so we'll do on mouse up it'll go back to the original state all right great coming along so now what we can do is we can come and go to our assets up notice it says frame three get in the habit of changing those so we'll go back here we'll just call this button go back to assets drag this button on all right i think i might want to move this a little bit closer all right so your your call to action button after part of your form you can really stand to separate that out more than the main uh elements in terms of of of white space uh just because it's it's the final step um and you can give it that space so let's go ahead and see how this works so notice it just changes lighter when we hover our mouse over it and then on click it'll go back all right everybody hopefully you enjoyed that make sure to subscribe if you haven't yet check out designcourse.com and i'll see you soon goodbye [Music]

Channel: DesignCourse

Views: 3,130

Rating: 4.8681316 out of 5

Keywords: figma form design, figma form design tutorial, figma forms, designing forms in figma, figma form prototyping, interactive components, figma interactive components, figma textfield, figma checkbox, gary simon, designcourse

Id: ZWwE0GWEXDc

Length: 36min 33sec (2193 seconds)

Published: Wed Oct 06 2021