Credit Card Form with Auto Layout - Figma Crash Course

[Music] hello my name is pablo stanley and this is part of a crash course on figma's auto layout in this lesson we'll design a credit card form which is an essential part of a flow but it's really easy to mess up so we'll use auto layout to create a clean and dynamic design that can adapt to different sizes first we'll create a text input component then we'll add the necessary fields and then we'll just put it all together but how do you make it responsive well we'll explore different ways for it to grow or shrink flawlessly okay let's do this okay let's take a look at what we're going to create so this form as you can see it has multiple fields this header has an image and the title and this has a nested alto layout then we're going to create an input field this input field is this one it has its own auto layout but it also has a label so that label will have an auto layout here and then you see here this is like a credit card but the credit card numbers have their own spacing and we can do that also with a nested auto layout in it and also have a little icon on the right and also here we see that we have is the same input field we're going to create a component but we're going to do it in its own outer layout so it's horizontal one that allows us to put two fields next to each other and then zip code and then at the end a button a button with a note below so it has its own l2 layout too and also an icon that can also be created with an auto layout everything can be created with an output layout okay so let's get started first we have that title then we have a label and let's create one input field like a text input so let's say that it's going to be a name so the name and now that we have a text we can actually add an outer layer to it just by pressing shift a shift a it has an auto layout let's give it a fill just a wide fill now it's starting to look like an input field right and now let's add four pixels on the corner radius and now let's start playing around with the spacing now we can check the padding around it the padding 8 pixels default it's actually pretty good we can keep it like that let's see what happens when it grows the text inside it just stays like that we actually want the text to be filling the content so not hugging the content we want it to be filling the container so just like that and that way if it becomes two lines it just fills the container okay so that's one now we want to add a little icon on the right in case we need it so we're going to go to my assets i'm going to add just a credit card icon here on the side and then i'm going to put this at 16 pixels i think it's too big the default and see how it automatically since i dropped it inside the outer layout it's already being part of this if i move it around see it's moving with this so uh now this one is just a fixed width and fixed guide that's actually perfect that's what we want let's just change the color of it maybe it's too dark and this is starting to look good i think i want to add a little bit more padding here on the side i i feel like i always on my text inputs i want to have a little more padding on the left and on the right so easily i can do that without the layout i open this and i say on the left i want it to be 12 pixels now over here i can apply 12 pixels to let's see yeah that actually looks pretty good i'm going to actually turn this into an input field so i'm going to turn it into component let me change the name to text input there you go i'm going to now put it over here let's say it's 8 pixels now i'm going to duplicate this because i want to keep my original over here somewhere over here and now i'm going to use an instance of the component over here now these ones i'm going to use auto layout 2 shift 8 boom now it's an auto layout i'm going to call it input plus label there you go now we're going to duplicate this now we want to add another one that is like the credit card input right now this one is going to be a little bit different here inside because we wanted to have one two three four one two three four one two three four but i don't want it with space i want it to be automatic so what i'm going to do is actually i'm going to duplicate this one i'm going to turn it put it over here i'm going to detach this component this this instance so now it's not a component anymore and now i'm actually going to say one two three four that one and i'm going to say here it actually hugs the contents so don't worry you're going to say what's going on here don't worry what we're going to do is actually going to duplicate this now we have these four but on this four ah the spacing is too far apart so i'm going to press shift a and i'm adding an outer layout inside this too so i'm going to put it at 8 pixels it pixels looks pretty good and now i'm going to also say that this doesn't hug the contents it just fills the container and see this part is still aligned to the left because it's aligned to the left here maybe you want it to be in the center it doesn't really affect it but it's a line to the left that the the values are over here if i wanted to be aligned to the right i could do it here i could say it in the center but we want it on the left and that's pretty cool and since it's filling the container the width of it is filling the container is pushing this icon over here that's perfect so now i'm going to say text input and i'm going to call it cc okay and i'm going to turn it into a component and actually i'm going to select these two and i'm going to combine them as variants and that way i'm just going to say that it's a type text input and text input uh credit card and i have here and now i can go over here and say this one i can just change it to text input text input credit card and i have it as a credit card here look at that so cool so let's again what did we do we added outer layout on this whole component this whole component is one out the layout but inside it we added another outer layout for the numbers of the credit cards so they have that space in between them pretty nifty then we just said fill the container and that way it will push the icon to the side we did the same over here okay cool let's continue okay now we want to add two more input fields the expiration date and the cvb number so i'm actually going to duplicate this one over here and i'm going to call it x date and then inside i'm going to put m m slash yy something also that i want to do i don't want this icon on this one i don't want the icon i can just press delete it doesn't really delete it it's actually hidden over here since it's a component i'm going to do the same with this one it's nice to have the icon there when you need it but when you don't want it you can just hide it okay cool so we have this one now i'm going to duplicate it this is going to be the cvv see vb let's put a number here but i'm going to use this so because usually it's hitting like that and actually i want to add an icon let's add an icon and maybe that one is going to be like an eiffel icon you've seen that uh that kind of because sometimes people are confused what the hell is the cvv well they that do this when you hover and then it shows you where the cvv is in your credit card okay we have these two but actually since these are really small inputs we can put them together side by side so how do we do that i'm going to actually select those two i'm going to press shift a and right now it just made an auto layout vertically right but i want them side by side so i'm going to turn it over here on the side to be a horizontal outer layout so okay we have them side by side but they're huge right now i actually want them to be half the size so i can right away i can just select these two and say instead of having hugging the contents i can say fill container and now i can start resizing this and oh no nothing's happening right something weird is happening and that's because also the text input here this text input is also fixed width i don't want to be fixed i want to be filling the container to fill the container change it here over here and now let's try it again look at that oh yeah it's actually we want to go back and do the same over here we want all of this to be filling the container and now you're going to say what the hell what happened well it's because these should also be a little bit huge a little bit larger just like that there you go okay cool we have all of this this is one auto layout let's call it x cbv there you go this combo now let's do the last one and the last one is going to be just the zip code so we can just duplicate this one zip code and then over here just one two three four five usually it's five numbers okay cool so we have all of this now i want to change the text on all of these i think uh they're gonna look better if these are a little bit gray so i already have some colors here i'm going to use these colors there you go they're starting to look better they're not filled in yet and now we want to add a button so let's create a button and the button is going to be confirm payment i don't know if that's the best cta let's just use that one and again let's turn it into an auto layout shift a boom it's an auto layout let's change the color let's i'm going to use this uh really nice blue like purple blue purple is that what it is i don't know okay so this one and i think it's looking good i like the padding i think the padding should be a little bit bigger on the bottom and on the top just a little bit chunkier and maybe on the size is 24 and 24. that looks a little bit better let's add those four pixels on corner radius and okay we got this we have this now we have a note and let's go over here just to copy paste this note just going to copy it then i'm going to put it over here just some text it says like you verify that this info is correct okay we have all of our info now something else we wanted to add a little bit of fun here with an illustration on the top so i'm going to open the blush plug-in so i'm just going to if you haven't installed it just go to the the plugins page and then install it it's a really cool for illustrations and with this plugin i'm going to go to this collection that i really like that is called street life over here this one by young and this one has a character's head and they can just insert a character i don't know it's pretty fun to play around with these uh and i'm going to put it over here a little bit small it's just like a little icon saying like yo let's pay let's get this payment going okay and if and the cool thing here is that if you want to just like customize this you can just like customize anything in the illustration you can also just press randomize and it just randomizes all the elements i like that one i'm going to keep that one now okay let's go back the same thing as before we want to add an outer layout to this one so let's press shift a and i want to say that this one is going to be four pixels in between them just uh pretty uh pretty tight and i want to center the contents i want to center to the top just like that i'm liking this now comes the moment of truth i'm going to actually put all of these elements into one single outer layout oh hold on i forgot to do this i want to add now to lay it to this one too so it has its own padding maybe this one should be eight pixels it picks it just so it's a little bit tight okay cool so now let's put them all together shift eight pow look at that let's add let's say that is 24 pixels in between them that looks really nice now let's add a fill inside it just to fill in the background let's also add just some padding around it we're losing or input fields right because they're the same color of the background but that doesn't matter remember why because we have these elements over here the components we can just add a stroke to it i'm going to add a little bit of like a light gray and look at that now we can see the forms the input okay cool we have this let's add a more padding on the size i think it needs a little bit more padding so i can just open this let's say that it's a 24 on the side 24 on the side it's kind of like floating it's a floating credit card input form i'm liking this let's add more padding on the bottom let's add 24 to yeah and let's keep this one 16 why because there's already a lot of white space that this image is creating so you don't need a lot of spacing on the top so 16 is actually pretty nice okay cool so we have this now we can choose if we want to align this to the left if we want to keep this aligned to the left or if we want to be like a filling the container right now nothing's happening to the button that's because the button is also it's only hugging the content so we wanted to fill the container to and also we want to say hey i want this content to be in the center maybe we want to do the same with this one where we want to say fill the container there you go now its center is looking nice i think i want to center this one too so i'm going to say hey fill the container fill the container and also the contents center them boom now all of these i think all of these should also be filling the container why because if i were to resize this look at what happens they just stay the same here this one since it's filled the container look at it it's just stretching with the size of this we want that to happen so what we can do is just like select these and say hey fill the container boom it's now fill in the container even the spacing between this is remaining the same over here by the way this should be like 24 24 see how oh my god imagine all the math you would have to do to calculate this that would have been crazy crazy stuff well you don't have to do that anymore without the layout so dope okay so actually let's say that this one is around 400 pixels 400 pixels that's pretty good that's 360. 360. i like the number of 360 degrees okay cool i think i think we have it all we have all the elements so we create an auto layout for text input we turn it into a component that way we'll be able to just change elements to it then we add a label and we added an outer layout to it just to keep it spacing of eight pixels between the label and input field also we added an instance another version of this input text for credit card and the credit card has four groups with four numbers inside then we also added the option to add an icon on the right but for it to be pinned to the right we had to do this text inside it to be filled the container because if it had just been hugged the content look at it that would have not been good so we want to be filling the container so it expands and then it pushes this icon to the right that same thing happens with this input over here now over here we have regular input fields but what we had to solve is how to put them together side by side so we just put them together we add another layer to it a horizontal one we add a spacing of 24 and look at it we just said fill the container and it just adapts to it then at the end we added one button and a label and that's it we put it all of it together and we have our form pretty cool stuff so this is part of a crash course of figma's auto layout there are more lessons like this if you want to continue learning just see the other videos and let's learn together thank you so much

Channel: Sketch Together

Views: 20,613

Keywords: ui design, ux design, user experience, tutorial, walk-through, how-to, graphic design, user interface

Id: X5CKlBsT75U

Length: 17min 30sec (1050 seconds)

Published: Wed Dec 16 2020