Figma Component - Input Field (Variables, Variants & Component Properties ) | Design System Part 7

[@td7367]

Before committing to completing your design system series, I was actually only looking for a tutorial on input fields. However, you are so amazing in the way you explain difficult concepts so easily that I couldn't help but follow along! I can't thank you enough. You saved me a lot of frustration.

[@TDSunshine]

Aww thanks! Glad I could help! ☀️🙏🏼💛

[@hroman_codes]

That plan state helped me a lot with prototyping. I was stuck on a screen for like 2 hours and then took 5 min to plan it out and solved my issue 10 min later. I could have saved so much time!

[@TDSunshine]

aww yay! Glad it was helpful ☀️🙏🏻💛

[@AlanOdogwuideh]

Exactly the plan is really helpful

[@hitvaghani8039]

Your content is underrated, and you have fewer subscribers than you deserve. You are teaching production-level design. By the way, I’m a full-stack developer, and I hate design, but your videos are amazing, and now I can create a decent website!

[@TDSunshine]

Aww thank you! Im glad you found them useful! ☀️🙏🏻💛

[@savitar29]

A pleasure to be your student! Thank you!

[@TDSunshine]

thanks! 🤩🙏🏻

[@benlow24]

Great vid showing the links between variables, variants and component properties. You can see quickly how versatile the components can be but always overwhelming to build leveraging all the new updates

[@TDSunshine]

Thanks! Glad you liked it ☀️🤗

[@monikaadeishvili526]

You have a talent for making everything sound and look so much easier!

[@TDSunshine]

Thanks! 🤗🙏🏼☀️

[@olya7715]

Wow 20:09 ! Thank you for such a great tutorial 😊

[@TDSunshine]

You’re welcome 🙏🏼☀️

[@ManishaNegi-m1z]

I have have added this playlist to my daily routine and I follow one ep a day, as a beginner ui/ux designer it has truly been helpful .Thank you so so much .

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@ianhamilton4360]

Thank you so much for making these videos, I love that you make no assumptions that we already know x,y and z and break it down fully

[@TDSunshine]

You're welcome! I'm glad it was helpful! ☀️🙏🏻

[@Redcannoneer]

The way you do things is way too different than what I used to know. I like how organized and efficient you are 💫

[@TDSunshine]

Thank you so much ☀️🙏🏻💛

[@tamarlevy2902]

Your videos are great and so so easy to follow! Thank you for making them, you've improved my figma experience 10 fold!

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@laurapa82]

You are great TD!! Best Figma Channel and deep explanations. Thanks so much

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@MathewBlock-l9m]

Hello, This is great. I can't get the text box to wrap properly. The text just keeps on going right past the input field. Also, is this component supposed to accept a text input when you actually use it? I can control what the text is in the box by changing it in the boolean area, but when playing the prototype it does not accept an actual text input? Thanks for any information.

[@TDSunshine]

If you set the text box to "fill width" it should stop the text from going overboard. Also if you want to accept real time text input using variables. I explain it here - kzbin.infove4UvSGadaA?feature=share ☀️🙏🏻

[@MathewBlock-l9m]

@@TDSunshine Thanks! I'm career transitioning and have been at the UX field for 2 years now. I was previously in transportation for quite a few years. I welcome all mentoring and feedback opportunities. I'm trying to get my skillset to a point to enable me to secure an entry level position in the UX field. Thanks for the help.

[@heliayilibel6185]

Thanks for asking it here I was helped a lot by it!

[@platinoir]

Amazing Content Love your sprinkled tricks and tips throughout the video, as well as your motivating enthusiasm. I'm new to variables, so I'm learning so much about how simple and well calculated your process is

[@TDSunshine]

Thanks! I’m glad you are finding it helpful ☀️🤗💛

[@gulnisamirizade2994]

Thank you so much😍 What should I do here if I want to create smart animate interaction - There is no input text on the Default version, only has label text. When a user clicks, the label goes up a little, and input text appears here to write something. I couldn't understand in which step should I do this here. Thanks!

[@TDSunshine]

Once its all built, on the component set you can connect a noodle between the Default state variant and the input state variant and then set it to "on click". If you want a nice animation on it, use "smart animate". I hope that helps ☀️🤗

[@gulnisamirizade2994]

@@TDSunshine Yes I created it. Thanks!

[@ArtemKobyakov]

Thank you. But if I want to make bigger label without input text (like a placeholder), how can I change size the label?

[@TDSunshine]

just add in a text box and adjust it to the size you want either by changing the font size or by setting a set height. I hope that helps 🙏🏻☀️

[@ArtemKobyakov]

@@TDSunshine Thanks. But I would like to have the same id of text field (label and placeholder). Is it possible? like a Material Design Input (placeholder transform to label when the input have state focused)

[@lianethernandez4461]

You are a lifesaver!!! Thank you so much for your videos I've learned so so much! The way you explain is so easy to understand. Thank you again!

[@TDSunshine]

aww thanks! 🙏🏻☀️💛

[@hectorgonzalvezescolanoUA]

Oooooh, mammaaaaaaaaa! TD Sunshine is the real deal!

[@TDSunshine]

haha thanks! 🙏🏻☀️

[@medjanga]

excellent. is it possible to create such input Field component with floating labels?

[@TDSunshine]

Yeah for sure! You can move the label out of the frame it’s in / add another frame around it so it’s not on a background colour like the rest of the input ☀️🙏🏼

[@sophiemulders]

Very nice!!! i did everything you did but i have a border around my input. In my head it sounded fun if i could turn that on and of. and with that when i turn the border of the color of the fil of the content frame wil get the light version of that color. but you cant make properties of colors and borders??? or am i overlooking something?

[@TDSunshine]

I think I’m following you. You can’t have anything automatic meaning your can’t bind two styles or variables together. So it won’t be automatic that IF there is no border THEN the fill will be light. But will variants you can set this up that way because you can manually change it according to state and the using the variants to different between them. I hope that makes sense! ☀️🙏🏼

[@antjonesuxgaming]

You're awesome! I have been following from the design system playlist and this is saving me time as I am upgrading my company's design system starting out the new year.

[@TDSunshine]

Ahh thanks! Glad I could help! ☀️🙏🏼💛

[@lostinhorizonchannel]

Thank you so much, I learned a lot from you. It's easy to understand step by step and the explanation is so clear. I love this series, keep up the good work.

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@the_infinity_channel]

This girl is pure gold !

[@TDSunshine]

aww thanks! ☀️🙏🏻💛

[@MarcosLucena-s2j]

Could you explain how do you create an icon library with icon image and name?

[@TDSunshine]

Hey! I have video if it helps ☀️ Creating an Icon Set - Passive Income for Designers [Figma & ChatGPT] kzbin.info/www/bejne/boeWfYCIppqWe9U

[@MarcosLucena-s2j]

@@TDSunshine I was talking about the icon viewing mode, when we open the icon library and we can see the images and names of the icons. In my design system I can see just the images of the icons or the name.... but I can't do both together.

[@TDSunshine]

ahh do you mean in the design panel when you swap between different instances?@@MarcosLucena-s2j

[@MarcosLucena-s2j]

Yes. @@TDSunshine

[@TDSunshine]

When you open the dropdown to swap the instance there is a button on the top right of the dropdown where you can toggle between list and grid mode@@MarcosLucena-s2j

Thanks TD!! Just wondering if in your previous Buttons prototyping video you didn't generated interactions with the secondary buttons for any reason? I'm just wondering if it's too much on a prototype and not all of them would work together?

[@TDSunshine]

Hey Sofia! I didn’t show it in the video just because it was a bit repetitive as it would have been the same as the primary ones 🤪 but in “real life” I would prototype all of them! ☀️💛

[@bbayek5573]

Love it! Another amazing and useful video! :)

[@TDSunshine]

Thanks! ☀️🤗

[@BushraTanveer-qq4zo]

Very Helpful😊

[@TDSunshine]

Thanks! ☀️🙏🏻

[@КатеринаСеверина-н3ц]

Heyy! Thanks for this video. I found it really helpful! Also, I'm curious how can I create a secure property for my input field? If this property is on I can't change a text property, so it has to be set. I would very much appreciate any of your suggestions.

[@TDSunshine]

Hey! Hmmm let me see if I understand your question. Do you mean, for example, if you have an icon and a text box you want to set so the Figma user could only change the text in the text box the icon was True ? Or do you mean during a prototype?

[@КатеринаСеверина-н3ц]

@@TDSunshine Thanks for your reply. I already figured this one out) Just set the property boolean values, it was easier than it seemed to me 😁

[@AlanOdogwuideh]

Thanks you so much 🌞 Sunshine, this was another amazing session. Thanks 🙏🏾🎉

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@paulamourad4699]

Thank you so much for this!!

[@TDSunshine]

You're so welcome!☀️🙏🏼🤗

[@KamalSingh-zq2yg]

Great learning from your channel

[@TDSunshine]

Thanks!☀️🙏🏻

[@senamenes883]

I was wondering how can i change between input text and placeholder text by turning the switch off and on. I noticed some libraries done that but I can't figure out how

[@TDSunshine]

If you a toggle or switch to swap between variants you need to set the values to True / False or On/Off. I hope that helps! ☀️🙏🏻

[@senamenes883]

@@TDSunshine i guess i didn't have enough knowledge about values, but now i figured it out. thanks^^

[@douglaskaburu8384]

Thank you for your great design.

[@TDSunshine]

You are welcome ☀️🙏🏻💛

[@kriswayne7938]

Hey, suppose you have a text auto layout and you 'fix position' a small triangle on the bottom side, how do u add stroke on both so that it appears like a comment element?

[@TDSunshine]

Hey! is the triangle creating like a speech bubble shape? is that what you mean?

[@kriswayne7938]

@@TDSunshine yeah I got to know the element is called 'tool tip' and figma's official channel got my query covered. Thanks anyways 🙌

[@mouhamadoucoulibaly6246]

Awesome tutorial as ever

[@TDSunshine]

Thank you! ☀️🤗

[@deeplove9]

Hello Sunshine! Maybe tyou ca make a video about variables modes on free plans? I have 5 color themes on my project and this is a big problem now for me

[@TDSunshine]

Hey! Modes aren't available on the free plan unfortunately (you can sign up to the professional plan using this link -> bit.ly/FigmaProfessionalPlan). I think the best way around it though is to use different collections/groups for your themes and then, duplicate and select all your designs, and then you can swap the colour variables you use in the "selection colours" section of the design panel to the correct themed ones ☀️🤗

[@deeplove9]

@@TDSunshine Thanks! Now I made in the same way

[@miraz_kabir]

Amazing. Easy to understand.

[@TDSunshine]

Glad to hear that! ☀️🙏🏼

[@azoozsaleh8331]

That is awesome ,😋 but you miss typography line height should be multi 2,4 or 8

[@TDSunshine]

Hey! I have a video about this typography system here ☀️ - *Typography System* - kzbin.info/www/bejne/haPTlKucfMSkj5Y

[@ephratnegussie2983]

Just amazing 🎉🎉🎉🎉

[@TDSunshine]

Thanks! ☀️🙏🏻

[@iamsohan90]

Great! Thanks a lot for your valuable lesson which was really awesome.

[@TDSunshine]

Thanks! ☀️💛🙏🏻

[@MrMaxie83]

Thank you!

[@TDSunshine]

☀️🙏🏻💛

[@Georgelikestodesign]

You're amazing! Helping me up my design system game with these boolean hacks! How long have you been in the UXUI Design Space??

[@TDSunshine]

Thanks! I have been working in UX for 3 years but have been using Figma since Uni in 2020! ☀️🙏🏻💛

[@sendd1555]

Thank you! Tair

[@TDSunshine]

You're welcome!☀️

[@1980nikolov]

Amazing

[@1deplatt]

Excellent tutorial

[@TDSunshine]

Glad you liked it 🤗☀️

[@1deplatt]

@@TDSunshine right now your videos are the best available. Figma should pay you for these.

[@GameRunner2049]

I created 100 plus input fields with 2 tones, 5 states, 3 messages, 5 input types, which can be used for every possible usecase out there. it was hesty and exhausting but i did it anyway.

[@TDSunshine]

👏🏼☀️🙏🏻

[@nadasharshera7012]

thankd so much for the amazing explanation, really grateful

[@TDSunshine]

You're welcome! 🙏🏻☀️

[@insiyamithaiwala8314]

You are just great, !!!!!!!

[@TDSunshine]

Thanks! ☀️🙏🏻

[@honeylavender1122]

Why do some design systems use the floating label text fields and some use traditional text fields? I've started to see many use both- I understand when they use traditional in their desktop design system and switch over to the floating label for a mobile version of their design system (like Shopify does) but some use both types within their mobile experience and I can't comprehend why.... it seems like the traditional text field has the best usability but for the little benefit of reducing some vertical space some designers opt to create both types of text inputs to switch desktop and mobile experiences? Seems like too much extra work....

[@TDSunshine]

Great question! and sadly I don't have a clear answer for you haha. I would say that I think the text field version where the label is the placeholder and then it disappears when you start typing isn't great because it's not great UX as the user loses the label as they type. I mainly do web and app design and what I tend to see is labels above the text field for web (desktop and mobile) and then native app text box are usually either next to the text field (iOS) or part of the border of the text field (Android). ☀️🙏🏻💛

[@rjabrm]

can you make gradient in vars ?

[@TDSunshine]

Not in the current Variable release no :/ but Figma have announced this will come in the next release so keep an eye out! ☀️

[@SefatChowdhuryIsTheKing]

How long did it take for you to learn all these? I feel my head exploding!!! :D

[@TDSunshine]

Iv'e been using Figma for 5 years now, and I still learn so much new stuff! Its a never-ending journey! 🤪☀️

[@easyprogramminglessons2943]

Good morning! How are you doing?

[@TDSunshine]

👍🏼🤗

[@easyprogramminglessons2943]

@@TDSunshine can you make airlines ad animation using smart animate.

[@smilli6415]

is that priyanka chopra in the middle lol

[@TDSunshine]

🤔

[@bigsmoke4568]

Calm down Prajeet

[@nbtimac8013]

sahi pakde hai