Create a TEXT FIELD Component With an ANIMATED Label (Figma Tutorial)

in this video we're going to take a look at creating a text input form field in a figma as you can see it has a moving label that moves towards the top border of this form field when you click it when you activate it and also you get a blinking cursor for your hypothetical text you'll also be able to adjust the label by using component properties and toggle between active and inactive state by simple clicking as always if you'd like to download the source file for this component make sure to check the link in the description that will take you to my store let's take a look at how you can create this in figma first we're going to use the text tool to create our label which means typing in label like this and we're going to use font size 16 that seems about right with no with no letter spacing and also medium or Demi bold next I'm going to use the rectangle tool to create a rectangle that looks like this I'm going to add a stroke and this stroke is going to be be centered on the path it's gonna have two pixels width and also I'm gonna disable the fill and then I'm gonna press enter to enter the shape modification mode and click on this line on the right side until it turns blue like this and then I hit backspace to remove this part of the shape but what I get is this kind of bracket I'm gonna around these Corners so I'm gonna go for like eight and then I'm gonna position it like this and maybe I'll I will press enter again and just select these two and make this a little bit narrower I think we could go for like something like this if that makes sense and then I'm gonna duplicate this flip it horizontally by pressing shift H and then I'm gonna rename these brackets the first one is going to be called Left second one is going to be called right the label that's just gonna be called label and then I'm gonna duplicate this label right here and I'm gonna change the font size to about 10 or 12. I think we could even keep this at 12 actually and I'm gonna make this bold so that it's a bit easier to read and move it right here so you can see that I'm kind of preparing for the final State anyway I'm going to use the pen tool to create a horizontal line like this it's going to be black and I'm gonna place it right here and then this one as well over here press enter and just fresh it across the whole space between these two brackets so it fills it up precisely nicely and I'm gonna also move this line over here and do something similar except I'm going to leave some spacing here I think we could go for like six pixels and also make sure this is six as well so more here and again here I'm gonna select the small label right here and add an ALT layout around it with no vertical spacing with no vertical padding and horizontal padding of six I'm gonna name this small label Auto layout and move it precisely you know adjust this line so that they kind of precisely meet at these edges and then I'm gonna select the small label Auto layout along with the top line and press shift a to add another Auto layout and then I'm going to select the line and set this to fill container so that the width of the line is going to depend on the width of this overall top part I'm gonna also set the height to Vertical adjustment of the frame number one two fixed height and I'm going to rename this whole Auto layout top part and now you can see that when I actually hide this small text all the way out this path is gonna adjust its width like this right so that's our goal and also when I stretch these it's gonna resize like this I'm gonna actually make sure that these beginnings of the text align nicely so that means moving this six pixels to the left and I'm gonna make this wider by six pixels which now means 106 and I'm gonna remove the small label to small label then I'm gonna select all of this and then press command option G to create a frame around this I'm going to also press enter and then under constraints I'm gonna constrain this towards the bottom adjust the height of this overall frame and then rename this Frame form field it's intentional to have this top part overlap outside of frame but just make sure that when doing this you uncheck clip content right here because otherwise this would happen which is obviously not intentional we want to keep it nice and visible everywhere I'm just going to rename these lines so this one is bottom line This one is Top Line especially when creating stuff for your Design Systems it's useful to name all layers appropriately so that you don't get lost in your system in your designs I'm going to select the left bracket and then I'm gonna make sure these constraints say left and top and bottom the reason is so that it stretches like this when you change the size and with this label I'm gonna make sure this is constrained to the left and center the right bracket will be constrained to the right and then top and bottom and the top part Auto layout is going to be constrained to allow left and right and then top now let's take a look at how the resizing word works now that we have created all these constraints it works like this which is almost what we want except for this bottom line we're going to fix that now so I'm gonna select the bottom and then set these constraints to left and right and keep the second one at bottom and now we get this so it's nice and responsive when we change the dimensions probably if we were to change the height we would want to the label to be glued to the top so that it would behave like this I think this is more natural for a form so now that we have this form field all nice and responsive we're going to turn this into a component so I'm going to select the whole form field and then press this icon over here to create a component from this now I'm gonna select both of these labels meaning this is smaller over here and then the label and I'm gonna go to content over here and then create a new text property a new component property this new component property is going to be called label and the default value will be let's keep it at just default label let's say right I'm going to create the property and you can kind of see what already what happened right so because we've set this top part in such a way that we've set it up in we get a behavior where any change in the width of the text is going to result in kind of this line being moved towards the right or the left depending on the overall width of the text this is going to become very useful for us down the road I'm going to also rename this default label to Big label just so that the name is always the same it's very important when doing any animated components and then I'm gonna select the this icon over here to create a new variant this variant is going to be called active and this variant it's going to be called default and also when I select the component as a whole and the properties I'm going to rename this property to state right next thing with this active state I'm gonna I'm gonna see what settings this text has we're at Avenue next bold 12 so I'm gonna do that avenir next bold 12 and then I'm gonna just move it a few pixels upwards so that we overlap with this label right so now that when we smart animate the text is going to shrink and move upwards at least that's go and then I'm going to select the small label Auto layout and I'm going to select the horizontal resizing to fixed width I'm gonna also drink this all the way over here right so that it's it's one pixel wide and then I'm gonna also reduce these paddings and set width actually to 0.01 so that it's the narrowest it can be maybe we can even go for 0.001 so that this is really like almost invisible right the goal here is to make this really really narrow then of course I'm gonna select the small label and I'm gonna set the opacity to zero I'm not gonna hide it no I'm gonna just set the opacity to zero and similar with the small label here this is also going to be zero why because the intention here is to replace this with the just the big label that is now actually small I'm gonna also select the default State and create a new variant I'm gonna which I'm gonna switch these around so I'm gonna just move the active States active State down here and then just this one is going to be called hover this state is going to be hover right now I'm going to create a blinking cursor so I'm going to go over to the pen tool create a vertical line like this two pixels and I'm gonna name this cursor I'm going to turn this into a component and create a variant so this first variant is going to be called invisible and the second state is going to be called visible and I'm going to select the cursor path from the invisible State and set the opacity to zero and then I'm gonna go over to prototype from this invisible state I'm gonna connect that to the visible State it's getting a bit hard to connect like this so I'm just gonna have to go over to interactions and say click so on click you can see that figma is a bit acting up right now so we will see if that's going to be a problem but I'm going to say on Click Change to property one visible and this is going to happen smart animate or actually it's going to be instant and it's going to be after delay 500 milliseconds so after 500 milliseconds this is going to change to property one visible and same here interactions after delay 500 milliseconds range to change to Invisible and it's going to be instant so theoretically what should happen is that this cursor is going to now be blinking on its own so changing states from visible to Invisible by itself so I'm just gonna collect the instance right here press command X and then command V right here and of course I'm gonna position it to the position where the text would be where your text that you would begin typing in would kind of appear and I'm gonna also make sure this is glued to left and top so that's under constraints we have the cursor component and the form field component and now we're gonna begin prototyping this so that it works properly so the first default State I think we could select the Left Right Top Line and bottom line and change the stroke to like this mid gray around here right maybe a bit lighter or we could set that to be black with some kind of transparency let's say 30. and then when you hover you actually could no this could become like darken so it would be black we will test this out and we will see if that's the right interaction that feels right for this specific use case but in this case I would like to make this blue so I'm going to select the Left Right Top Line and bottom and then change the stroke to Blue I like this color and also we're gonna select the small label and Sample the color from the stroke or actually we have to use the big label now because the small label is hidden remember I didn't remember that so yes that's the case now we're gonna have to select the big label so we have three states Now default hover and active and I'm gonna select the first one go to prototype and then connect the first state to the second state and say while hovering change to State hover we're going to keep that at instant for now and then from hover state to the active state of course but going to be on click and change to State active and this one's going to be smart anime it's gonna take 240 milliseconds it's gonna be easy in and out and then also we're gonna active State when you click on it you return back to the default State on Click Change to State default smart animate as well so that's kind of going to be the workflow right you're gonna click on you're gonna hover over this form field is you're going to click on it it's going to activate it's gonna turn blue and then when you click it again it's going to delivered back to the default State and you get also a blinking cursor right here so that's kind of going to be the case now I'm going to create a test frame so F on my keyboard and then create a frame that's going to be 1000 by 600 I'm going to name this test frame I'm going to search for the form field under assets and place it right here and the state is going to be default I'm going to duplicate this and just change this label to very low very long label very long label example right so that we get a nice long label now that when I switch from State default to active we should get precisely this right you can see that the width is adjusting to the overall width of the active to the overall width of the label let's just test this life and see what the interaction feels like I'm gonna select the test frame and launch the Prototype and this is the result when I hover over these four Fields they highlight to signal that you can actually interact with these in some specific way and when I click this you can see that the label is going to move to the Top This top part is going to adjust you know the line is going to move and also you get a blinking cursor like this then when I click again it's going to close nicely right here and also the label is going to move and turn from Blue Back to Black similarly here where you can see that this whole part automatically adjusts according to the length of this label and what is nice about this is is you can actually now since we built this with various lengths in mind I can just say a very short label very short and it's going to reflect that change you can see that now the a is just that it's just a label a and the top part the Top Line kind of moves moves ever so slightly just very in a very tiny way a few pixels because it reflects the width of the label similarly here also very short and very long in any way this is responding nicely to your labels and also I think we could make this a bit softer so the transition I would go for like um let's just make this a bit more with the gray darker gray except for this text that's gonna be black and this is gonna be lighter right and I can go to prototype and just say that while hovering is not going to be instant but smart animate it's gonna take 140 milliseconds seconds ease in and out ease in out and you can see that it changes according to what we just did right I think this while hovering a smart animation could be faster so let's go for like 70. in any case this interaction stays the same and this is it this is how you create a form field with a moving label that you can use in your own prototypes and again if you'd like to download the source file for this and use it in your own Project Check the link in the description that will take you to my store thanks for watching leave a like if this video helped you and let me know in the comments if you have any questions about this or if there was anything unclear thanks for tuning in today and I will see you in the next one

Channel: Mavi Design

Views: 83,596

Keywords:

Id: zf9ycCUzHsg

Length: 16min 48sec (1008 seconds)

Published: Mon Oct 31 2022