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

🚨Follow along with this Figma file - www.figma.com/community/file/...
☆ Try Figma's Professional Plan - bit.ly/TDProFigma
☆ Try Figma For Free - psxid.figma.com/xnd9l
💛 Thanks for watching, Tair 💛
🍿 WHAT TO WATCH NEXT :
1. Colour System - • Figma Design System - ...
2. Variable Modes | Config Updates - • Figma VARIABLE MODES |...
3. Auto Layout | Config Update - • Figma AUTO LAYOUT UPDA...
👋🏼 IF YOU ARE NEW HERE :
Hey, it's Tair! 😃
Thanks for tuning in and watching my video! If you enjoyed it and learned something new, don't forget to hit that subscribe button and the like button as well 👍🏼. I'd love to hear your ideas and suggestions for my next video, so feel free to comment below. Your support means a lot and helps me keep the channel going and growing!
👾 MY GEAR :
Blue Yeti Microphone amzn.to/3qACorF
Tripod ring light amzn.to/43G7flv
Neon sign amzn.to/3NcwxAs
Fairy lights amzn.to/443l518
🌼 CHAPTERS :
00:00 Intro
00:15 My approach
00:28 1. Plan it
00:53 2. Build it
04:12 3. Colour it
07:54 4. Variable it
10:16 » Scope it
12:13 5. Component it
13:00 » Boolean component property
13:57 » Instance swap component property
15:37 » Text component property
19:52 Final result
20:20 Coming up
🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you.
#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma #figmaupdate #config #config2023 #figma2023 #designtokens #tokens #variables #variablemodes

[@Redcannoneer]

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

[@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! ☀️🙏🏻

[@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 ☀️🤗

[@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! ☀️🙏🏼💛

[@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 ☀️🤗💛

[@antjonesux]

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! ☀️🙏🏼💛

[@bbayek5573]

Love it! Another amazing and useful video! :)

[@TDSunshine]

Thanks! ☀️🤗

[@savitar29]

A pleasure to be your student! Thank you!

[@TDSunshine]

thanks! 🤩🙏🏻

[@user-xe5fn5ms1v]

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! ☀️🙏🏻💛

[@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! 🙏🏻☀️💛

[@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! ☀️🙏🏻💛

[@laurapa82]

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

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@paulamourad4699]

Thank you so much for this!!

[@TDSunshine]

You're so welcome!☀️🙏🏼🤗

[@miraz_kabir]

Amazing. Easy to understand.

[@TDSunshine]

Glad to hear that! ☀️🙏🏼

[@monikaadeishvili526]

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

[@TDSunshine]

Thanks! 🤗🙏🏼☀️

[@iamsohan90]

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

[@TDSunshine]

Thanks! ☀️💛🙏🏻

[@mouhamadoucoulibaly6246]

Awesome tutorial as ever

[@TDSunshine]

Thank you! ☀️🤗

[@nadasharshera7012]

thankd so much for the amazing explanation, really grateful

[@TDSunshine]

You're welcome! 🙏🏻☀️

[@KamalSingh-zq2yg]

Great learning from your channel

[@TDSunshine]

Thanks!☀️🙏🏻

[@sendd1555]

Thank you! Tair

[@TDSunshine]

You're welcome!☀️

[@olya7715]

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

[@TDSunshine]

You’re welcome 🙏🏼☀️

[@mahimablooh]

Thank you so much

[@TDSunshine]

You're welcome! 🙏🏻☀️

[@1deplatt]

Excellent tutorial

[@TDSunshine]

Glad you liked it 🤗☀️

[@1deplatt]

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

[@insiyamithaiwala8314]

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

[@TDSunshine]

Thanks! ☀️🙏🏻

[@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! ☀️🙏🏼

[@hectorgonzalvezescolanoUA]

Oooooh, mammaaaaaaaaa! TD Sunshine is the real deal!

[@TDSunshine]

haha thanks! 🙏🏻☀️

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! ☀️💛

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

[@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 🙌

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

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

[@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 ☀️🙏🏼

[@user-pr4vq6pq8p]

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 ☀️🙏🏻

[@user-pr4vq6pq8p]

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

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

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

[@user-iy1cd1yb7u]

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?

[@user-iy1cd1yb7u]

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

[@user-mw1ii7wh1f]

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

[@user-mw1ii7wh1f]

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

[@user-mw1ii7wh1f]

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@@user-mw1ii7wh1f

[@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! 🤪☀️

[@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! ☀️

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