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

Рет қаралды 205,046

Күн бұрын

Get the SOURCE FILES for this project ($1.99): payhip.com/b/w2AhL
Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Get FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
Mobile App UI Design Playlist: • FREE Figma Mobile UI D...
In today's Figma interactive component / prototyping tutorial, we're going to take a look at a material design type text input form field with a moving label (click-activated) with a blinking cursor & hover state. You'll be able to easily change the label by setting up component properties and also change color of the field & generally do any changes you need. This text input form field is animated - when you hover over the inactive instance, it will react to your hovering by changing its border color and then when you click it, it's going to move the label to the uppermost side with smart animate. You'll then be able to click again to deactivate the form field.
How to create / design build an interactive / animated material design text input form field component with a moving label, hover state and a blinking cursor in Figma (step-by-step explanation tutorial)
Topics: Figma prototyping, figma interactive components, Figma animation, form fields, design system in figma
--------
© 2022 Mavi Design

Пікірлер: 116

@Phsiris01 11 ай бұрын

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

@pixelleitergames7792 2 ай бұрын

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 3 ай бұрын

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

@stitchbybloodystitch 11 ай бұрын

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

@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 9 ай бұрын

@@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.

@Pimplepopping1 Жыл бұрын

Its Amazing tutorial and Easy to Learn floating labels without interrupted Thanks you so Much 👏

@ODigitalPPlumber Жыл бұрын

This is awesome. I had fun playing with this😁

@typesister6984 Жыл бұрын

Wow, this is mind blowing. Thanks for video!

@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!

@j_ryan_n 11 ай бұрын

Loved this. Thank you!

@ajakayejoshua9886 Жыл бұрын

Thanks alot, was easy and i loved it

@Muhammed.Yaseen Жыл бұрын

This is awesome! Thank you so much!

@BrahimBrahim-pw2te 4 ай бұрын

This is awesome, was easy and i loved it

@FathirZakiHehe 5 ай бұрын

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

@rafaelbueno7567 7 ай бұрын

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

@harjotkaursaini 8 ай бұрын

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

@MusicArenaAfrica 11 ай бұрын

This is great work.

@OliverBerlinTokyo 10 ай бұрын

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

@crownbgm Жыл бұрын

Very Useful 🔥

@alysonnaagas3477 Жыл бұрын

Thank you so much!

@PlayLive-gx5si 7 ай бұрын

love this tutorial

@LCJ15 10 ай бұрын

Nice, thanks for sharing!

@abdulrahmanhashem3426 7 ай бұрын

amazing tutorial

@darmellahabdellatif7360 Жыл бұрын

thank you so much brother

@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?

@justingrasio3967 25 күн бұрын

Thank uuu so muchh!

@user-pn1mo4tr7p 9 ай бұрын

awesome! thanks a million

@kousik2920 Жыл бұрын

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

@makomakomako100 8 күн бұрын

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 😅😢😢

@Ed8wedish 10 ай бұрын

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

@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!

@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.

@erifrei6983 10 ай бұрын

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

@user-dp3vr7ip8w Жыл бұрын

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 9 ай бұрын

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

@ainejohnna4945 8 ай бұрын

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

@tomashudolin7197 4 ай бұрын

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

@user-yx2if7xo8k Жыл бұрын

Noted 4:31 Shift + Enter

@sarathchandraroy5557 2 ай бұрын

Great🔥

@doctorocasio 4 ай бұрын

content menu is not there when selecting the text boxes.

@user-yx2if7xo8k Жыл бұрын

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.

@katiethornton4479 11 ай бұрын

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 3 ай бұрын

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

@michaelsunday2946 4 ай бұрын

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.

@viceralman8450 Жыл бұрын

And the text box, inside the text field?

@DM-DesignsInMyUniverse 3 ай бұрын

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?

@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? kzfaq.info/get/bejne/a76KYLtmyt3TaZc.html

@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.

@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 10 ай бұрын

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?

@Muhammad-Zaydan Жыл бұрын

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

@prashantrastogi8778 6 ай бұрын

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

@sulthanhuawei2037 Жыл бұрын

on prototype its not workout in mobile why

@rochellewilbers7911 21 күн бұрын

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?

@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:)

@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 8 ай бұрын

Same problem here tooo

@JANRAFAELMORGA Ай бұрын

same here, how can you fix this??

@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 6 ай бұрын

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

@dwiseptia4728 9 ай бұрын

WOOOWWWWW

@ZyanneMinorMelville 19 күн бұрын

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?

@Narendra_Kumar_24 11 ай бұрын

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 6 ай бұрын

its the same for me too

@fatimatolaide3769 5 ай бұрын

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_ 5 ай бұрын

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_ 5 ай бұрын

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 4 ай бұрын

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

@user-op2cr5ns7r Жыл бұрын

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

@LuLu408f 11 ай бұрын

same

@syrine3935 4 ай бұрын

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 3 ай бұрын

same for me, is yours fix now?

@amishasethi47 11 ай бұрын

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

@user-bc4zz8pe5r 4 ай бұрын

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".

@syed-lk3ux Ай бұрын

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

@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.

@TheEdward39 10 ай бұрын

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

@hedii7761 7 ай бұрын

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😭

@rudolfaerofare2683 4 ай бұрын

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.

@mikeknight5031 4 ай бұрын

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

@olumideaanu5403 Жыл бұрын

Thank you

@sgt.verdian1945 Жыл бұрын

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

@Lukas-pi3si Жыл бұрын

@user-ny4fb9is3v 10 ай бұрын

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

@xenonoah 2 ай бұрын

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.

@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

@richatj7138 11 ай бұрын

it is kind of confusing :/

@dailyquotes- 4 ай бұрын

Right I also thought ...he just told many thing like do this and that and didn't told why he did 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 :)

@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.

@eugeniabrini 4 ай бұрын

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

@mavidesign 4 ай бұрын

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

@eugeniabrini 4 ай бұрын

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 4 ай бұрын

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

@brendadesigner1506 Жыл бұрын

Seriously? And autolayout?

@vivianmeliani2055 11 ай бұрын

too fast and many errors

@martinui4892 26 күн бұрын

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.

@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 😊