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

Подписаться 8 тыс.

Просмотров 12 тыс.

50% 1

🚨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

Хобби

Опубликовано:

9 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 89

@laurapa82 4 дня назад

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

@TDSunshine 4 дня назад

You're welcome! ☀️🙏🏻💛

@ianhamilton4360 3 месяца назад

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 3 месяца назад

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

@benlow24 5 месяцев назад

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 5 месяцев назад

Thanks! Glad you liked it ☀️🤗

@platinoir 8 месяцев назад

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 8 месяцев назад

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

@antjonesux 4 месяца назад

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 4 месяца назад

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

@lianethernandez4461 2 месяца назад

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 2 месяца назад

aww thanks! 🙏🏻☀️💛

@savitar29 6 месяцев назад

A pleasure to be your student! Thank you!

@TDSunshine 6 месяцев назад

thanks! 🤩🙏🏻

@td7367 6 месяцев назад

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 6 месяцев назад

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

@bbayek5573 9 месяцев назад

Love it! Another amazing and useful video! :)

@TDSunshine 9 месяцев назад

Thanks! ☀️🤗

@lostinhorizonchannel 18 дней назад

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 16 дней назад

Thanks! ☀️🙏🏻💛

@monikaadeishvili526 8 месяцев назад

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

@TDSunshine 8 месяцев назад

Thanks! 🤗🙏🏼☀️

@KamalSingh-zq2yg Месяц назад

Great learning from your channel

@TDSunshine Месяц назад

Thanks!☀️🙏🏻

@iamsohan90 4 месяца назад

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

@TDSunshine 4 месяца назад

Thanks! ☀️💛🙏🏻

@paulamourad4699 6 месяцев назад

Thank you so much for this!!

@TDSunshine 6 месяцев назад

You're so welcome!☀️🙏🏼🤗

@mouhamadoucoulibaly6246 8 месяцев назад

Awesome tutorial as ever

@TDSunshine 8 месяцев назад

Thank you! ☀️🤗

@miraz_kabir 7 месяцев назад

Amazing. Easy to understand.

@TDSunshine 7 месяцев назад

Glad to hear that! ☀️🙏🏼

@nadasharshera7012 3 месяца назад

thankd so much for the amazing explanation, really grateful

@TDSunshine 3 месяца назад

You're welcome! 🙏🏻☀️

@sendd1555 9 месяцев назад

Thank you! Tair

@TDSunshine 9 месяцев назад

You're welcome!☀️

@olya7715 4 месяца назад

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

@TDSunshine 4 месяца назад

You’re welcome 🙏🏼☀️

@mahimablooh 2 месяца назад

Thank you so much

@TDSunshine 2 месяца назад

You're welcome! 🙏🏻☀️

@1deplatt 9 месяцев назад

Excellent tutorial

@TDSunshine 9 месяцев назад

Glad you liked it 🤗☀️

@1deplatt 9 месяцев назад

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

@insiyamithaiwala8314 2 месяца назад

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

@TDSunshine 2 месяца назад

Thanks! ☀️🙏🏻

@hectorgonzalvezescolanoUA 3 месяца назад

Oooooh, mammaaaaaaaaa! TD Sunshine is the real deal!

@TDSunshine 3 месяца назад

haha thanks! 🙏🏻☀️

@azoozsaleh8331 3 месяца назад

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

@TDSunshine 3 месяца назад

Hey! I have a video about this typography system here ☀️ - *Typography System* - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-OrpcxfG_qY4.html

3 месяца назад

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 3 месяца назад

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

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

@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-iy1cd1yb7u 4 месяца назад

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 4 месяца назад

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 4 месяца назад

@@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-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 - ru-vid.comve4UvSGadaA?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.

@gulnisamirizade2994 6 месяцев назад

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 6 месяцев назад

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 6 месяцев назад

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

@deeplove9 9 месяцев назад

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 9 месяцев назад

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 9 месяцев назад

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

@kriswayne7938 8 месяцев назад

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 8 месяцев назад

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

@kriswayne7938 8 месяцев назад

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

@user-mw1ii7wh1f 8 месяцев назад

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

@TDSunshine 8 месяцев назад

Hey! I have video if it helps ☀️ Creating an Icon Set - Passive Income for Designers [Figma & ChatGPT] ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-8V3LMRq5cEs.html

@user-mw1ii7wh1f 8 месяцев назад

@@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 8 месяцев назад

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

@user-mw1ii7wh1f 8 месяцев назад

Yes. @@TDSunshine

@TDSunshine 8 месяцев назад

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