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

[@pixelleitergames7792]

Thank you, I am still in school and we are learning about Figma. We haven't learned about this yet and that means i can show it to my teacher and get bonus points. Thank you so much!

[@rawan9018]

I swear this is the best FIGMA TUTORIAL on youTube please go ahead 🍇

[@aduloju95]

Thanks for the video. After adding auto layout to the small label autolayout and the top line, my frame one had a misaligned top line, it didn't balance with the right bracket anymore. Please what did I do wrong?

[@beryl.pretorius]

The video is really nice. I like how you're crisp and to the point, no filler information or anything that distracts from the content. However, the subscibe alert in the lower left corner is highly distracting and spammy.

[@mavidesign]

Feedback appreciated!

[@ob5804]

@@mavidesign Greetings. Everything worked out, great, but when I click on the active state, it is visible at the junctions of the left, right and bottom lines that these are separate parts, and it is visible. Can I drop my figma file somewhere for you to look at, please???

[@Phsiris01]

Absolutely amazing. I was looking around for how to create the auto adjusting border based on text length. This tutorial was perfect.

[@harjotkaursaini]

amazing tutorial but very complicated process for me as a beginner!

[@emmanuelnwakasi8244]

I am so glad I found your videos. Its been amazing. Thank you so much for all the amazing things you teach

[@mavidesign]

It’s great to have you here Emmanuel! Welcome!

[@ob5804]

@@mavidesign Please help. When I turn on the animation and when I click on the input(first and second click), very narrow spaces appear on both sides of the bottom line and top line and immediately disappear, although I made those lines back to back, there are no spaces there, and why does this happen during animation - I don't understand ( And also only for some reason on the 2nd example (with a long label) during animation and I don’t know how many% of the scale is increased, the bottom line seems to separate downwards from the main parts and then everything is ok again, it’s seconds and with clicks.

[@gilbertsilva8622]

BRO YOU ARE A LIFE SAVER. THANK YOU!

[@hassaanahmedkhan7324]

At 4:31 how did you adjust the height of larger frame. I am trying to do this but it's contracting with the top part frame.

[@VanshikaDarode]

When I add auto layout to the small label and the line…the line moves from the alignment😭 why is this so hard

[@fridoper124]

Keep fighting

[@izzy_frog]

Someone knows how to fix It? 🤔 im haver The same problem...

[@ainejohnna4945]

i was having the same problem too but what seemed to work for me is to add .5px padding to either the top or bottom padding of the top vector itself hope this helps

[@somyaraghuwanshi1032]

Just minimize the frame to 1 px downwards and it will work

[@stefanialaspalmas9773]

6:59 I have a issue here... the text "Default Lebel" it's goes beyond the lines on the left after I add "create component property"... how to fix this? help

[@anjalinair9519]

Same problem here tooo

[@JANRAFAELMORGA]

same here, how can you fix this??

[@md.junayedhossain7955]

3 minutes in and I can already tell I can do this more efficiently and thousand times easier. You're just doing it the hard way.

[@mavidesign]

@@md.junayedhossain7955 show us! I’d watch that

[@typesister6984]

Wow, this is mind blowing. Thanks for video!

[@sangs523]

so well explained and easy to understand☺ Thanks for sharing your knowledge and making us to learn easily.

[@Zyanneminorm]

Every time i add auto layout to the small label and the top line vector, my vector ALWAYS moves and I'm following everything in the video!😭 how do i fix?

[@hugopires70]

Excelent Tutorial. Good work!

[@syrine3935]

at 8:29 when I try to resize the frame of the small label, the text moves to the left and doesn't stay at the same place, do you know how can I fix that?

[@FathirZakiHehe]

same for me, is yours fix now?

[@TâmNgô-b6r]

11:01 Why cursor can't change property from Invisible to Visible at Design Mode? Only change at Play Mode. If I setup "defaul is Visible" is same your demo.

[@FathirZakiHehe]

14:09 mine didn't adjust, you know why?

[@ezio2110]

same here...did you find solution?

[@ezio2110]

I guess I fixed it...Just add an auto layout to the big label

[@ashajain3289]

​@@ezio2110 do you know what to do when even that isn't working ??

[@ashajain3289]

Ig.. I found it, you may have missed out the big label to component property addition.

[@fatimatolaide3769]

at 8:27, how did the top line overlap on the top/small default label? the one i tried creating, the text keeps shifting to the left hand side I've edited it twice and it's still the same issue I'm encountering.

[@ryanmaas_]

I'm encountering the same issue with this step. Maybe Figma has changed the way the components interact since this video was created. I can't find a workaround.

[@ryanmaas_]

Update: when he does that, he forgets to mention that on the right side of the screen, the auto layout box has to have the top left selected. For me, I had the middle selected, which produced your same issue. Once I changed that, it worked the same way as he demonstrates in the video.

[@fatimatolaide3769]

@@ryanmaas_ thank you. I’d try it out

[@makomakomako100]

Thank you for video, it was amazing! Only problem i have is that such blinking cursor is not working with a open overlay keyboard. It’s just stopping blinking when the keyboard is jumping up 😅😢😢

[@katiethornton4479]

I may be being dumb.. but when I draw the line to make the ends meet, i cannot make the line aligned with the end sections, its about half a pixel off - any tips?

[@rawan9018]

You have to make the hight of the small label auto layout an even number for example if the hight was fifteen turn it to sixteen and it should work and make the line only two pixels as mentioned in the video

[@leslycracchiolo4881]

My lines will not meet. I did it once and it worked and tried to do it again and now I CANNOT get them to align on the grid. HELP PLEASE! =)

[@BrahimBrahim-pw2te]

This is awesome, was easy and i loved it

[@ODigitalPPlumber]

This is awesome. I had fun playing with this😁

[@mimitoo3308]

Amazing tutorial, thank you soooo much!

[@erifrei6983]

i think i'm missing something, the lenght of top part can't adjust by the lenght of the label, while i try to make a new one, it always the line didn't fit with the left rectangle

[@zaynzar]

yep thanks! but may i ask why it doesnt work when tried on mobile phones?

[@stitchbybloodystitch]

Thank you for making such clear, easy to understand videos.

[@MedCity-d1j]

6:45 you say to click content. that isnt there for me. any solutions?

[@LuLu408f]

same

[@Narendra_Kumar_24]

15:37 Why is the blinking getting enabled on both the fields? Can someone kindly tell how do we avoid this mistake when it comes to creating two or more interactive inputs field components.

[@morakinyobukola9586]

its the same for me too

[@alyonushka8718]

That is great tutorial, but isn`t a frame has to be responsive, when we typing broader text inside?

[@Ed8wedish]

Looks nice! Now I'm curious how bad of a headache this would be for front-end devs :D

[@maude-np3do]

thanks for this! when I made the autolayout that includes the small label autolayout and the top line of the box, the line moves up by half a pixel or something and i can't seem to align it back. any idea how to troubleshoot?

[@sulthanhuawei2037]

yes do that once again, first, u draw a line pen tool change inside or outside to the center in the stroke, and make sure the stroke is centered that s it got it ?

[@n.a.nnotanumb3r686]

I change the size of the small label font to 13 px and it works to align it

[@haheather696]

need to adjust the text. vertical trim - choose standard

[@DogmaTendo]

At 3:15 how did you combine the top line and the small label auto layout into that split frame?

[@Zaydan-Mohammed]

Select both of that and press Shift A ( for Add Auto Layout ). It will be like what he said

[@tomashudolin7197]

And what if I would like to have right icon (eye for example for password field)? Thanks.

[@dvarata]

Amazing tutorial. I learned so much! Is there a way to create a floating label so that the input field is not transparent? My form background has some slight color, and I would like for the input field fill to be white. I am not sure if it is possible but thought I'd ask.

[@zagorskikh]

You can make the parent (main) frame colored. Hope it helps!

[@DM-DesignsInMyUniverse]

I have made some mistake, the length of top line can't adjust by the length of the long label. Could you please help for this concern?

[@TheEdward39]

Watch me get beaten up by my dev in the parking lot when I try this in a project 😂

[@prashantrastogi8778]

Hi, it awesome...bt I want full interactive form field using variables

[@TâmNgô-b6r]

Noted 4:31 Shift + Enter

[@abdulrahmanhashem3426]

amazing tutorial

[@rudolfaerofare2683]

Unfortunately this doesn't appear to work anymore (February 2024). For instance, when I try to create a secondary autolayout as demonstrated at 3:19, I have no 'fill to container' option, only 'Hug and 'Fixed width', and I expect a legion of other problems will follow after that as well. 😕 Man, really was looking forward to replicating this, and there are no other tutorials on YT for it that I found so far.

[@mkkoh23]

Still working. If there's no fill to container option your line probably isn't in a frame with auto-layout applied.

[@PlayLive-gx5si]

love this tutorial

[@rafaelbueno7567]

thanks, I could do it, it was well-explained

[@Muhammed.Yaseen]

This is awesome! Thank you so much!

[@andrewkim1422]

Thank you! Do you also know how to set bottom navigation bar disappear when scroll down and re-appear when scroll up as well?

[@mavidesign]

You're welcome! 😊 By "bottom navigation bar" do you mean something like this? kzbin.info/www/bejne/a4m9Xotrmtyib8U

[@andrewkim1422]

@@mavidesign No, it's about hiding bottom navigation bar when user scrolls down the screen, and the bar re-appear when scroll up the screen.

[@justingrasio3967]

Thank uuu so muchh!

[@michaelsunday2946]

Please can someone tell me what i am doing wrong? When i try to put the label text and the top bar in an autolayout it doesn’t align with the right bracket.

[@ajakayejoshua9886]

Thanks alot, was easy and i loved it

[@LCJ15]

Nice, thanks for sharing!

[@doctorocasio]

content menu is not there when selecting the text boxes.

[@farnazdehdar-z7u]

awesome! thanks a million

[@viceralman8450]

And the text box, inside the text field?

[@kousik2920]

finally a good form design found.....😊

[@Oriono]

hey , at 8:28 your text doesn't move but mine goes on the left ?

[@Oriono]

ok i find why xD if someone has the same issue, it's because my auto layout was at the middle

[@joshuasmith2486]

Hi, thank you for this. Is it possible to make a text box that you can type into?

[@mavidesign]

I'm afraid that's beyond Figma's capabilities

[@prashantrastogi8778]

Now it is possible using variables....can you please make a video about it

[@OliverBerlinTokyo]

Extreme good guide! Also for beginners very worthfully! Thank you!

[@alysonnaagas3477]

Thank you so much!

[@amishasethi47]

Why I do not have property 1 when i am clicking on change to in interactive option for the blinking cursor? Please help

[@JuanEstebanHurtadoGarcia]

I made this mistake too (took me 2h to figure out why). When you renamed the line variant to "invisible" and "visible" you probably deleted "Property 1=". So I suggest you add it again. It should look like: "Property 1=Visible" and "Property 1=Invisible".

[@tomaszgens]

I have a technical question. Which software do you use to display pressed keys in the lower left corner of the video?

[@mavidesign]

KeyCastr:)

[@darmellahabdellatif7360]

thank you so much brother

[@hedii7761]

One problem that took me almost half an hour solving is the state of the cursor component. It wouldn't show when I create an instance of it. I felt so dumb after realizing that I only need to change the state to visible😭

[@FatimaSherif-bx6eg]

at 6:41 please how do i select both labels i can't seem to do that

[@elifrusoy32]

ctrl + selecciona los textos (denjando presionada la tecla ctrl)

[@ashajain3289]

14 : 09 mine isn't adjustable?! What to do ?!

[@caslan1000]

at 4'30" - when you adjust the height, the whole frame moves down...

[@caslan1000]

okay - I missed that part that the contents of Frame 1 need to be constrained to the bottom.

[@crownbgm]

Very Useful 🔥

[@syed-lk3ux]

will it use keyboard??????? resolve my problem

[@rochellewilbers7911]

I cannot find the 'content' option in the design bar that's referred to before creating a variant? I've tried Google search with no luck. anyone have any idea or similar issues?

[@chiazokamchibikem8964]

A lot of things have been updated.. Just find what they have noe and make do with it

[@sarathchandraroy5557]

Great🔥

[@AmartyaKatge]

Unable to create a frame after creating one label for constraints 😭😭😭😭😭

[@sulthanhuawei2037]

on prototype its not workout in mobile why

[@sgt.verdian1945]

I have a question, can you ACTUALLY put text on the final result ?

[@Lukas-pi3si]

No

[@eugeniabrini]

Unfortunately the file doesn't open in any way...I'll follow the tutorial, I was hoping to save some time.

[@mavidesign]

Search Google “how to open a .fig file”. I’m sure it’ll help :)

[@eugeniabrini]

But it should open it directly having figma (also the paid version). Now I'm looking for tutorials, but I'll first follow yours to create a label. Thank you@@mavidesign

[@mavidesign]

@@eugeniabrini not the case unfortunately. You need to import that using the import feature

[@TazBo-wd2ig]

Is this hard to code for developers?

[@darmellahabdellatif7360]

if you are a mobile developer it's not that hard cause there's presets for that

[@phoenixgaming586]

why didnt you just use a normal rectangle and thn use a text with the same background colour and put that text on the top of the rectangles top line?

[@mavidesign]

Because that wouldn’t be transparent :)

[@xenonoah]

Why is this so hard to do compared to XD . They really need to simplify the text field process because, its not like every single designer and website does this.

[@olumideaanu5403]

Thank you

[@richatj7138]

it is kind of confusing :/

[@dailyquotes-]

Right I also thought ...he just told many thing like do this and that and didn't told why he did that

[@dwiseptia4728]

WOOOWWWWW

[@psh.pamela]

Your file won't download.

[@mavidesign]

Hi, please reach out to my email or use the contact form on my store to sort this out. Thank you.

[@footballgrinta-8714]

It is complicated but it's okay

[@brendadesigner1506]

Seriously? And autolayout?

[@martinui4892]

Porque hiciste todo esto de esta manera 😅, te complicaste más de la cuenta, el video debió durar tan solo 5 minutos. Hay formas mucho pero mucho más fácil de hacerlo.

[@vivianmeliani2055]

too fast and many errors

[@krupakshitij7286]

The source file is paid 🥺

[@mavidesign]

Yes it is! Fortunately following the tutorial to create it is absolutely free and achieves the same result so that my designs are accessible for absolutely everyone. The paid source file is here for those who want to save time and support the channel 😊

[@danielvictor7325]

I can't see the fill container option when I click on the vector line🥹😔. What might be the problem?

[@j_ryan_n]

Loved this. Thank you!

[@MusicArenaAfrica]

This is great work.