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

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

[@lattaque441]

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

[@juliaweber986]

You are tutorial 200 i watch today and were the only capable person, that broke it down understandable.

[@TDSunshine]

Yay! I'm glad it helped!☀️🙏🏻💛

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

[@syndoltest4099]

This is THE best training video I have watched in months of learning Figma. I wish I had discovered this channel sooner!!!! 5 stars

[@TDSunshine]

aww thanks! ☀️🙏🏻💛

[@SefatChowdhuryIsTheKing]

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

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@dimitridehouck9506]

This was an amazing tutorial! I really really love the direct pace. No chit chat. Our time is valuable and you know it! :-) you're the best!

[@TDSunshine]

Thank you so much! ☀️🙏🏻💛

[@IanHamilton-k5s]

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

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

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

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

[@garimajain5557]

Your energy and content is next level! Please keep sharing, It is of great help!

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@matthewlay4939]

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

[@TDSunshine]

Thanks! I appreciate it! ☀️🙏🏻💛

[@estelledtabe3380]

Thanks for your video. I am new in this field and it was delightful watching your video

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@BF-non]

You are a good teacher and the goofiness adds to it. 💖

[@TDSunshine]

haha Thanks! ☀️🙏🏻💛

[@CiciPrsta]

Awesome TD! You’re truly gifted. I’m experiencing one small issue. When I reached the Expert level and clicked on the speaker instance to access the SF Symbols content within it, the speaker mysteriously disappeared from my Figma file. I swear I did not set it to invisible, and the link to its ‘parent component’ remains intact. I’m using a high-performance HP Spectre laptop with a Windows system. I’ve noticed that no one else has reported this issue, but the problem occurs as soon as I click on that instance-nothing else. When I reopened your original file, the speaker reappeared on the page, but clicking on the instance again caused the same issue. Thank you for everything, though!

[@TDSunshine]

Thanks! sadly SF symbols sometimes don't work well on windows. SF symbols are technically party of the San Fransisco font. You can download it from Apple website and it should help! ☀️🙏🏻💛

[@CiciPrsta]

@@TDSunshine I've already tried this, but it seems Windows cannot manage .pkg files. However, I'll find a solution if there is one. Thanks for taking the time to respond!

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

[@GaneshKumarC-r6p]

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

[@TDSunshine]

Thanks! 🙏🏻☀️

[@Mauriciog623]

Great tutorial as always

[@TDSunshine]

thanks! 🙏🏻☀️

[@Szynszula]

Loove this video, thank you so much for it! Perfect wrap up of component knowledge I was missing!

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@almighty.saumya]

Girly explains it with magiccccccc

[@TDSunshine]

aww thanks! 🙏🏻🤗☀️

[@KathBorup]

You are fantastic at explaining things!

[@TDSunshine]

Thanks! ☀️🙏🏻💛

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

[@RanoInsideGamer]

You got a new subscriber. Love this video!

[@TDSunshine]

Yay! Thank you! ☀️🙏🏻💛

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

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]

🥹🥹🥹 💛☀@

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

[@UXwithB]

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

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

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

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

[@madamtechnician]

loved the video gurl, understood components like never before🔥

[@TDSunshine]

Yay! Thanks! ☀️🙏🏻💛

[@bhargavpatel_]

For the sizing do we need to create smaller version or larger version of each components?

[@TDSunshine]

Sometimes you might need different sizes for different parts of your design, like a button on a page vs a button inside a card element. But this isn't a must so do whatever works for your needs ☀️🙏🏻💛

[@sahilaelc3626]

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

[@TDSunshine]

Thanks! 🙏🏼☀️💛

[@rajawatlks]

One of the best video i have seen for figma

[@TDSunshine]

Thank you! ☀️🙏🏻💛

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

[@PeterConnor]

Great work - nice and fast.

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@samduss4193]

To be honest great step by step explanation.. i try to get a roadmap to learn i run into your video issue is that i do not know where to start and where to finish lol ... the quality is great tho ;) I sent you a like :)

[@TDSunshine]

Thanks! I have a long Figma 101 (kzbin.info/www/bejne/eIHFe6tvfZmppa8) video which is a great starting point for a beginner ☀️🙏🏻💛

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

[@DharmikMoradiya-yi8ei]

her Eyes 🤩 her knowledge 🥰

[@TDSunshine]

☀️🙏🏻💛

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

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

[@mahiesrinea]

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

[@TDSunshine]

aww thank you! ☀️🙏🏻💛

[@GaneshKumarC-r6p]

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

[@GaneshKumarC-r6p]

Thank u so much . Eagerly waiting..

[@kanchanpatil5130]

Instance Swap Property - I want to add one more icon as a Variant, but I’m not sure how to add it. Can you show/tell me how to do it?

[@ishworld1]

Thank You! Awesome Tutorial!

[@TDSunshine]

You're welcome! ☀️🙏🏻

[@bjorngrauers]

Really top content clear concise brilliant! ☀

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@Panda-gu2yb]

Perfect Tutorial thank you

[@TDSunshine]

You're welcome! ☀️🙏🏼

[@chris.ar93]

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

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@ItsMoe8]

thank you girl! amazing Tutorial!

[@TDSunshine]

You're so welcome! ☀️🙏🏻

[@chizaramnze5367]

You literally blow my mind😭❤

[@TDSunshine]

thanks! ☀️🙏🏻

[@DaudKurnia]

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

[@TDSunshine]

Thank you! ☀️🙏🏻💛

[@davidsdaybyday3636]

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

[@TDSunshine]

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

[@jdherbig]

Such a good refresher! Thank you :)

[@TDSunshine]

You're welcome ! 🙏🏻💛☀️

[@okami_linux_gaming]

im using figma web and i do not see that option in typography, when im selecting text frame

[@TDSunshine]

Which option are you missing? you should have all of them both in web and app. Please note the UI has changed a bit since filming this video so it may have just moved ☀️🙏🏻💛

[@NishadiFernando-h1y]

How does the table cell resize when I hide/ show titles?

[@TDSunshine]

It's in an auto layout and set to "hug" height so it auto resizes ☀️🙏🏻💛

[@1980nikolov]

You are my hero! 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!🙏🏼☀️

[@intervention_w_myself]

SUPER! Great video!

[@TDSunshine]

Thank you very much! ☀️🙏🏻💛

[@roshniprajapati5963]

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

[@TDSunshine]

You are welcome ! ☀️🙏🏼

[@francaye7]

so good! Thank you very much :)

[@TDSunshine]

You're welcome! ☀️🙏🏻

[@SakibulIslam-t1e]

Excellent

[@TDSunshine]

Thanks! ☀️🙏🏻

[@اورانسبي]

Thank you , your the best

[@ArtemKobyakov]

Very useful tutorial and explaining

[@TDSunshine]

Thanks! 🙏🏼☀️

[@saharkafi5467]

Thanks for your content

[@TDSunshine]

You're welcome! ☀️🙏🏻

[@saharkafi5467]

Extremely beneficial

[@TDSunshine]

Thanks! ☀️🙏🏻

[@mukundgaikwad]

Love it!

[@TDSunshine]

☀️🙏🏻💛

[@phoebe-1234]

You saved my life😆😆😆

[@TDSunshine]

☀️🙏🏻💛

[@raisulrana2134]

Useful

[@TDSunshine]

☀️🙏🏻💛

[@nguyenvanthu8276]

thank u so much for your video - help me alots

[@TDSunshine]

You are welcome! ☀️🙏🏻💛

[@juucande]

this is perfect! thank you so much ((:

[@TDSunshine]

You're so welcome! ☀️🙏🏻💛

[@AbeerAbedElkareemElsharif]

Thank you :)

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@AbeerAbedElkareemElsharif]

we need more video for creative components

[@TDSunshine]

What do you mean by creative components? ☀️🙏🏻

[@mariabrunalopes]

You so nice. Thanks for the content ❤

[@TDSunshine]

thanks! 🙏🏻☀️🤗

[@hellbreaker1566]

Great

[@TDSunshine]

☀️🙏🏻💛

[@keithakola]

Figma moved the buttons around... can't figure this out anymore.

[@aldiransantos1946]

Great!

[@TDSunshine]

☀️🙏🏻

[@nuraisyahelias932]

this video is recommended by chatgpt, so ima watch this hehe

[@TDSunshine]

no way! haha ☀️🙏🏻💛

[@ramazanguler6066]

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

[@TDSunshine]

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

[@canklejohnes3260]

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

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@saharkafi5467]

😍😍😍😍😍

[@TDSunshine]

☀️🙏🏻

[@m7280]

😍😍😍😍😍😍😍😍😍

[@TDSunshine]

🙏🏻☀️💛

[@davidt_uiux]

This is so detailed, Thanks a Lot ❤❤🫡

[@TDSunshine]

You're welcome! ☀️🙏🏻💛