Figma Components 101 | Learn about Variants and Components Properties | Figma tutorial

🚨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 Hey!
00:16 Beginner
03:26 Intermediate
07:06 Advanced
09:01 › Boolean property
10:14 › Text property
11:28 › Instance swap property
13:59 Expert
22:49 Using the components and publishing
🤗 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

[@DavidAdamEdelstein]

99% of the time when I watch an instructional video on youtube, I have to watch them at 2X speed, because people pad their videos out with so much filler that it drives me crazy. Your videos are the complete opposite of that; I am constantly pausing and going back and I am never bored. All content, no filler, delivered cheerfully. THANK YOU.

[@TDSunshine]

aww thanks! I really appreciate it ☀️🙏🏻💛

[@karenbeal2387]

Fantastic as always! So fast but clear - I have to rewatch but love the fact you get to the point without any fluff!

[@TDSunshine]

Thanks 🙏🏻☀️💛

[@jdherbig]

Such a good refresher! Thank you :)

[@TDSunshine]

You're welcome ! 🙏🏻💛☀️

[@sahilaelc3626]

Cool - you've covered it all - my new go to whenever I get stuck 🙌🏼

[@TDSunshine]

Thanks! 🙏🏼☀️💛

[@al75an]

Since the new Figma update (variables, auto layout etc. ) I watched a lot of tutorials and still have problems learning them until i watched yours, please keep doing them your way is so easy to learn you are awesome ❤

[@TDSunshine]

Thanks! I'm so glad to hear my videos helped! 🙏🏻💛☀️

[@Kimoartcave]

Nice one. It's one of the best tutorials I have ever seen about components in Figma ❤

[@TDSunshine]

Thanks! 🙏🏼☀️🤗

[@Mauriciog623]

Great tutorial as always

[@TDSunshine]

thanks! 🙏🏻☀️

[@ireland9292]

This is far better than the two paid courses I've been doing. Covers a ton of ground with really practical examples, nicely done!

[@TDSunshine]

aww thanks! 🙏🏻☀️🤗

[@mahiesrinea]

I love you your way of teaching is amazing and to the point.Thank you so muchhhhhhhhhhhhhhhhhhhhhh💕💕

[@TDSunshine]

aww thank you! ☀️🙏🏻💛

[@SefatChowdhuryIsTheKing]

This is one of the best tutorials available out there to differentiate variants with component properties. Thanks a bunch!

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@DaudKurnia]

thank you for your contents, such underrated content, keep it up!

[@TDSunshine]

Thank you! ☀️🙏🏻💛

[@BrunaMarzarotto]

Thanks for sharing! It was so important to clear some of my questions about Components!!

[@TDSunshine]

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

[@bogdanbogdan5911]

Your Figma tutorials are an absolute game-changer! The depth of knowledge you share, from beginner-friendly breakdowns to expert-level techniques, is incredible. It's honestly mind-blowing that this wealth of information is free. The design system playlist, in particular, is pure gold! Thank you so much for everything you create.

[@TDSunshine]

aww Thanks! I really appreciate it! 🙏🏻☀️💛

[@chris.ar93]

Great video! Thanks for sharing. Keep up the good work 👏👏

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@rajawatlks]

One of the best video i have seen for figma

[@TDSunshine]

Thank you! ☀️🙏🏻💛

[@matthewlay4939]

This was great! You explained this very coherently! This should definitely have more than just 10k views!

[@TDSunshine]

Thanks! I appreciate it! ☀️🙏🏻💛

[@user-zr2dd6oe8x]

This series has really helped me, I have no idea why it has so few likes

[@TDSunshine]

Thanks! 🙏🏻☀️

[@paul_designs]

You're a life saver TD. Thanks for the tutorial.

[@TDSunshine]

Happy to help! ☀️🙏🏼

[@paul_designs]

@@TDSunshine If you've got sometime in your hand, I'ld like to see some more Prototyping with Variables videos. It'ld help out alot as your teaching is no bs teaching. Thanks in advance !~

[@Panda-gu2yb]

Perfect Tutorial thank you

[@TDSunshine]

You're welcome! ☀️🙏🏼

[@davidsdaybyday3636]

I learned a lot of knowledge from this video. Thank you very much for sharing this video. ❤

[@TDSunshine]

Aww I’m glad! Thanks! 🙏🏼☀️💛

[@francaye7]

so good! Thank you very much :)

[@TDSunshine]

You're welcome! ☀️🙏🏻

[@emilijamanevska3693]

Excellent video 👏💫very easy to follow, it was a real help for me. Thank you 😇

[@TDSunshine]

Glad it was helpful!🙏🏼☀️

[@rishabh117rules]

I was skeptical whether you could truly help me understand Figma as an expert, as you kept mentioning. However, as I kept watching your tutorial, I was blown away. I have watched hundreds of tutorials on Figma, but yours truly stood out. You made it very easy to understand and showed all the important properties. Additionally, you went the extra mile and demonstrated how to publish designs. It is evident that you have put in a lot of effort to make your tutorial better than others. Thank you for creating such an excellent video. You have earned a subscriber. Please keep creating such good content.🥂

[@TDSunshine]

aww thank you so much for your kind comment! ☀️🙏🏻💛

[@user-up5xp1in7p]

Superb informative channel for designers I am really thankful for all your videos .

[@TDSunshine]

Thanks! 🙏🏻☀️

[@saharkafi5467]

Thanks for your content

[@TDSunshine]

You're welcome! ☀️🙏🏻

[@saharkafi5467]

Extremely beneficial

[@TDSunshine]

Thanks! ☀️🙏🏻

[@ArtemKobyakov]

Very useful tutorial and explaining

[@TDSunshine]

Thanks! 🙏🏼☀️

[@user-ne1kj1pf9p]

Excellent

[@TDSunshine]

Thanks! ☀️🙏🏻

[@aldiransantos1946]

Great!

[@TDSunshine]

☀️🙏🏻

[@almighty.saumya]

Girly explains it with magiccccccc

[@TDSunshine]

aww thanks! 🙏🏻🤗☀️

[@roshniprajapati5963]

Hi Mam your videos very informative and very useful practical examples thank you for given components.😊

[@TDSunshine]

You are welcome ! ☀️🙏🏼

[@xain4107]

Super informative videos! Keep it up 🔥 I’d like to see more variable videos intermediate to expert level

[@TDSunshine]

Thanks! I have a playlist with all of my Variable videos and there will for sure be more in the future! ☀️🙏🏻kzbin.info/aero/PLx-zZQ15gdAqkqvLTj9SlEmjcYrWDj_pI

[@xain4107]

Thanks! Love your vids, keep it coming 🤩🤩

[@mariabrunalopes]

You so nice. Thanks for the content ❤

[@TDSunshine]

thanks! 🙏🏻☀️🤗

[@faidon90125]

Very thorough indeed! Would you consider making a video on versioning? For example, how to handle deliverables that were ready for dev in the past and you don't want to update their instances for historicity reasons.

[@TDSunshine]

Thanks! Thats a great idea! adding to my list 🙏🏻☀️🤗

me too!

[@laurine.studio]

Loving all of this series, thanks a lot! I just have one question: I saw you use both the toggle visibility and the specific property approach to manage the possibility to display specific parts in variants. How can I choose which technique to use? Specific properties makes me manage a ton of variants (your button example in your early vid) but I can finesse each one, where in your avatar example you used components in components and toggle (like I used to do before). Do you have any insight on this? Thanks a lot your videos are ultra useful. Love!

[@TDSunshine]

Hey! I have an annoying answer for you 🤪 it depends! There is no one right way to manage components. I would say if there’s a lot of complicated variance sometimes the “avatar approach “ is better. But it’s all about what works for you and your system. I think component properties, for example are great for the designer using the file, but are not great for documentation because you can’t see all the variants like you would, if it was just a normal components set. I hope that still helps somehow 🙏🏼☀️🤗

[@vladimirdursel]

100% quality as always! Love the expert component. Thank you. Is it possible to move your main component to another file once it's already created? Imagining I want to create one file with all my components (but didn't do it from the start) so I only add one library to my future projects.

[@TDSunshine]

Thanks! Yes you can! I have a short that shows exactly how to move a component without breaking it ☀️ - kzbin.infoXmv5a-Qn_wo?feature=share

[@vladimirdursel]

Thanks a lot 🙏 I could have looked a bit better sorry @@TDSunshine

[@kriswayne7938]

Hey, How to get weight on non-filled icons right? Is it ok or allowed to have different stroke weights for different icons for the same app or website? I find some icons good in one weight and others in another weight

[@TDSunshine]

Hey! You want to keep visual consistency throughout your designs. So for example it's best to stick to filled / non-filled across ALL your icons and not mix and match. In terms of weight, I think you can get away with not having the exact weight as long as they still look like they come from the same "family". If some are super thin and some super thick it would look messy though in my opinion. I hope that helps! 🤗☀️

As good wines, you're getting more pro with the time! Just one question, this use of property boolean could replace the method you've used on Buttons for DS series, right?

[@TDSunshine]

Thanks! 🙏🏼 it could for hiding and showing the icon yes! But it’s all about what you need and what is best for your system :) in the DS example I have an icon on the left and on the right so if you Boolean those and let’s say only want to show 1 icon on label it can get a bit confusing. But use whatever system works for you! I’m here to give as many examples of different ways of working as I can 🤗☀️🙏🏼

@@TDSunshine ferpect! One more time, thanks for all the content and response. In our UX team we say "Let's do it on TD Sunshine way" 🙌☺️

[@TDSunshine]

🥹🥹🥹 💛☀@

[@BrookeMotis]

Do you offer any sort of UX design coaching/tutoring? I really enjoy your teaching style and feel like I actually learn from your content.

[@TDSunshine]

Hey! I don't at the moment but maybe in the future ☀️🙏🏻💛

[@sophiemulders]

Very nice, also following your design system series. Was trying to make a social icon component, but got confused by all the choices. You have different icons obviously, the icons itself can have different colors ( primary, black, white etc), The background can have different colors ( primary, black white etc) and the background can have a different radius ( square, rounded, circle) and apparently i am doing something wrong but for the love of all icons i can't get it to work... Any tips or are you planning a video on this perhaps?? Should i make a component set of all variations( different colors and backgrounds) of the instagram icon, make a set for all variations of the youtube icon etc? or is there a better way?

[@TDSunshine]

Oooo this is a tricky one! There are a few different approaches for this. I think an “atom” approach would work well. So really break it down into different components and then nest instances . So have one component for each icon and 3 variants for the colours . Then put instances of all the icons in another component set so the instances are variants of a new component. And then create another component just for the backgrounds. Finally an instance of the background component and an instance of the icon and then makes sure to expose the nested instances so you can see all the components properties you set up in the “deeper levels”. I hope that makes sense! 💛☀️🙏🏼

[@sophiemulders]

@@TDSunshine i am going to try! Thanks for thinking with me!

[@sophiemulders]

Well technically speaking it works like a charm, but the sizing of the icons is a pain in the ass... as long as the background is a square or rounded shape it is fine, but when it is a circle.... the icon is to big. so i tried to scale it but not working correctly, Do you have a video about scaling inside components etc...?

[@user-up5xp1in7p]

Can u please make separate playlist on ux design by solving one real world problem through end to end design process using possible AI tools at industry level and also playlist on redesign of any product at industry level practicing as it going to be helpful for all budding as well as experienced designers to enhance their skills .

[@TDSunshine]

Great ideas! will add to my list 🙏🏻☀️🤗

[@user-up5xp1in7p]

Thank u so much . Eagerly waiting..

[@saharkafi5467]

😍😍😍😍😍

[@TDSunshine]

☀️🙏🏻

[@mohit-k0813]

I have a question, if you share or handoff this file in which you used components from your existing library then, would you detach all the components and recreate them for your client or hand them off as it is? What are best practices in this context?

[@TDSunshine]

great question! are you going to hand over the file where the main component "lives" as well? if so I would advise asking your client to upload the .fig with the main components into their Figma first, then publish it. and then when they add in the other files they should connect to the local component OR you may need to just swap libraries. Here are a few videos that may help! ☀️💛🙏🏻 Move a component to a different file - kzbin.infoXmv5a-Qn_wo?feature=share Swap libraries - kzbin.info/www/bejne/fYKVm62qgNWrgs0

[@mohit-k0813]

@@TDSunshine No No my question was on the condition that if we don't hand over the main component file, then what should we do. But I'll check out these videos as well to see if I find my answer. I would like to know how you deal this kind of situation :⁠-⁠)

[@manishasant8248]

Hello I'm facing issue with Boolean property it's not showing above later...can you help with that??

[@TDSunshine]

When you say above, do you mean later on the instance? 🤔☀️

[@manishasant8248]

Yes, it got resolved 😅 thanks for the response

[@mexantos]

Publish component library only available for paid plan, any suggestion for free plan sista?

[@TDSunshine]

You can still use components in the same file that they were created in you just can't publish on the free plan ☀️

[@m7280]

😍😍😍😍😍😍😍😍😍

[@TDSunshine]

🙏🏻☀️💛

[@ramazanguler6066]

There was nothing missing about the components in this course content.

[@TDSunshine]

aww thanks! 🙏🏻💛☀️

[@canklejohnes3260]

A well explained tutorial.. and beautiful she is!!!

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@georgezorbas9036]

I like your videos. But my main problem is WHY to use all these? Your course would be fantastic if you use them in a real website built with Desktop / Tablet / Mobile to see how components would help to make things easier. I am trying to create my web app and I cant find simple lessons on how resizing texts and avatars in braking points. I don't know if it is possible but that's a real problematic situation. Mostly, it would be fantastic to know the WHY and how is it applying in real situations. Small examples like everyone does in their videos, I think can't work in the mind of people that want to learn. thanks for your videos!!!

[@TDSunshine]

Great idea! thanks for sharing! I'm always looking out for new ideas for videos people will find helpful so i'll add it to my list! ☀️🙏🏻💛