Creating Input Fields in Figma Part 1: Auto Layout, Variants & Variables - A Step-by-Step Guide

hey everyone welcome to my channel so in the past two videos we learned how we can create a complete button component with a lot of variants that we can use through our design system so let's test it out so I have the from the assets I'm gonna just drag and drop the primary button here and as you can see we have different variants like left right left Justified right Justified or I can only just it can be hover focused um active also disabled and we have the pill Style let's go back to no I can then we have the outline we have different sizes medium from extra small small medium large extra large and also we can change the label of the bottom and I'll put the link to the playlist down in the description which um it also includes all other videos about how you can create a complete design system from scratch so make sure to follow that and in this video which I think it's gonna be also divided in parts how we can create a text input and how we can basically manage inputs in in our design system so since it's going to be super long um let's go right ahead again just like the buttons I have prepared a sheet that it shows me what I need basically so I created this earlier and sorry we need a placeholder we need the actual input content like the text and we need a hint also we need some icons both left and right that's going to be optional and we also need the state the states are going to be default hover typing field error success and disabled we also are going to have another style of our input which is going to be on the line and then we have sizes obviously I didn't include the extra small and extra large because that's very unlikely to be used so I'm just gonna have the small medium and large and remember I am aligning the height of my inputs the same as my icons so the my large one is going to be 64. my medium is going to be 50 56 and the small one is going to be 48. and the style of this input basically this input is going to be the same as the one that Apple uses you know I use it because it's kind of it really looks good so I'm just gonna use the same so let's go ahead and create it immediately I'm going to create a text I'm going to hit t on the keyboard and create the text call it um placeholder actually let's drag this all down so I have I can see all right I'm going to change the text text style to body 10. and change the color to I think subtitle yeah then I'm going to duplicate this place it here and then I'm gonna change its size actually yeah it's font size to 14 again body body 20. which you can see it's 14. and then I'm going to change the um text to body right first we're going to create the selected State actually the the typing state or then we can continue all right then I'm going to select this actually let's change it to content so we can differentiate so I'm going to select both these and hit shift a on keyboard I created a auto layout out of it and now what I'm going to do is create a component out of this one all right I'm going to call it input I I'll rename it when I want to organize everything in my design system and now um let's go ahead and create two two text one is gonna be placeholder the other one is and let's call it placeholder and the other one is gonna be content and again I'm gonna name it content You're Gonna Change this one designing and now let's connect them so here connect this place so let's placeholder and connect content to content all right first I'm going to create the medium ones then we're gonna go up but before doing so let's add two icons here so I'm going to add two icons let's search um for one is calendar I think this one and the other one is close all right now I'm gonna cut these and paste it inside of here and let's create another Auto layout out of this one so we can align it auto layout but again shift a and let's set the alignment to the left and right so it's horizontal and set the alignment to the center and actually I'm going to move this to the left set the spacing between them actually the Gap to 8 pixels I'm going to select it from my variables all right I was also going to change the color of my icons to something like um something I'm gonna make it same as the placeholder so yeah that's it and what I'm gonna do is add a background color to this one so I'm gonna go with the surface a default saddle yep something like that and now I'm gonna set some spacing to it so since it's gonna be my um medium it should be matched it's hard should be matched to this one so it's going to be 56 right and we need uh padding from top and bottom so right now it's 40 so we need 16 to be 16 paddings in total to be 56 so in in the in this section which is a vertical padding I'm going to go to my variables and find the one that is 16px actually 8 pixels because that multiplies uh actually yeah that adds up sorry so let's go ahead and select this one and now as you can see my input my medium input is the same height as my button so we can use it throughout our design in order to have consistency and now let's add some horizontal padding too I'm gonna go with 16 maybe that's a bit too much but no no that's okay or 12 let's see how it goes actually 16 was better yeah you can change it in your design but I like it the way it is also let's set the um let's set the actually some Corner radius I'm gonna go with 12. yep that looks good and again create um instant swap so the first one is going to be left icon I'm gonna pick an instant it's gonna be calendar create property and again instant swap is going to be right icon I'm gonna pick instant it's gonna be close all right and now let's connect the r icons to our related instant swap all right one another you know another thing I need to do here is to set the height set the width of this one to feel container so whenever I like reduce it and increase and decrease the width of this one um the spacing gets updated and I don't need to worry about the X icon or the right icon to be left out here so let's just keep that in mind yeah it's gonna be fill actually let's set the set of width for it it's gonna be I think 343 something like that yeah you can change in your design you know it's just I want to show the drop down actually the inputs in a way all right that's it for the medium now let's go ahead so we we are missing the hint so let's go ahead and create actually I'm gonna copy this one paste it here and what I'm going to do is create an create an auto layout out of it so actually let's go ahead and create the icon alignment first so I'm gonna add variant the variant is called icon icon alignment yep and then what I'm gonna do is just maybe yeah increase the size of this one and let's just duplicate this one here remember we have no icon left icon right icon and both so we have we need four another one here and another one here the last one is going to be both uh before that they're gonna be the right icon right left and the first one is going to be none and since we connected all of these all of the icons to our instant swap we don't need to worry about like removing them so let's just remove this this is going to be left I'm going to remove this one this is going to be right remove this one and this is going to be both which has them all all right um we are we created basically play solar content icon alignment and this this one left icon right icon and yeah in the next video I'm gonna show you how you can add hints on the line style and how you can create different sizes and actually the the states so stay tuned for the next one I know it's gonna be a long tutorial but it's just something we need to go through in detail all right make sure to like the video please leave a comment and subscribe to the channel that'd be huge help and also make sure to check out the other videos which I showed you how you can create um different parts of the design system effects color tokens variables typography system color palettes Etc and yeah that's it I'll see you in the next one cheers

Channel: Undesign

Views: 210

Keywords: Figma, Figma Tutorial, Input Fields, Auto Layout, Variants, Variables, Design System, UI Design, UX Design, Web Design, Figma Auto Layout, Figma Variants, Figma Variables, Input Field Design, Component Design, Learn Figma, Figma for Beginners, Advanced Figma, Figma Techniques, Web Development, UX Tutorial, UI Tutorial, Design Principles, Figma Workflow, Figma Interface, Adaptable Components, Component Variants, Auto Layout Inputs, Figma Input Design, Design Best Practice

Id: vz_qSeuxgjs

Length: 11min 42sec (702 seconds)

Published: Thu Jul 13 2023