Figma Component Properties made SIMPLE (Variants, Boolean, Text, Instance)

Figma Component Properties in 2022… in under 10 minutes!
🔴 Working File: timgabe.com/resources/figma-c...
Timestamps:
00:00 Intro
00:12 The Four Properties
00:30 Variants Overview
00:54 Instances Overview
01:23 Text Overview
01:43 Boolean Overview
02:10 Create Button Component
02:45 Add Icon
03:00 Add Variants
04:27 Apply Instances
06:03 Apply Text
07:05 Apply Boolean
Music:
- Coffee - lofi hip hop beat (FREE FOR PROFIT USE)
- 5 MINUTES OF (No Copyright Music) CHILL LOFI HIP HOP BEAT (Royalty free)

[@TimGabe]

Clone the Figma file and follow along: www.figma.com/file/BTkdb7nzL14POCSYzLvB8P/Figma-Component-Properties?node-id=0%3A1 Video on how to MASTER auto layout: kzbin.info/www/bejne/gZebfWZ5ms6KsLM&t

[@TimGabe]

@Hardik Arya of course my friend! 🤩🙏

[@mar-17905]

Great content it would be great if u created a course on dynamic design. This will save me loads of time. I knew some of the material but I still learned many new things.thanks

[@ventioner]

thanks 🤩

[@williamdisley2301]

Your content is exceptional. I genuinely think its the best Figma educational resource on youtube. Fast, clear videos with top presentation and production value. I hope your channel grows and you continue to create 👍🏻

[@TimGabe]

William… wow, just wow. What an incredibly kind comment. That’s not a small statement considering I’ve got some fierce competition with all these talented creators in the design niche. This makes me not just super happy and proud, but it also makes me beyond pumped to continue delivering content on a consistent basis!! Thank you for this. Have an amazing day/night, my friend 🤩🙏

[@jerkov420]

It definitely is. I just started learning figma this week, and this channel has given me tons of info, inspiration, and motivation, all in one combo. Thanks Tim

[@ioncoman]

I don't usually comment on videos but dude.. thank you. Your "no bs" style is refreshing.

[@TimGabe]

that's amazing to hear. really. thanks!!

[@razionojikan]

Out of all the tutorials / explanations about these variants, you are the one who made it so thorough, organized and so crazy easy to understand. Thank you :)

[@TimGabe]

i'm so happy to read this, thanks a lot!!

[@danielazavala1382]

The best way to spend my Saturday night, is learning from your tutorials 🙌

[@petrasmolcic2518]

Tim thank you so much for this video! I was so confued by properties for the longest time and this video is short and on point. Thanks!

[@glaecia]

I've been on your page for almost two hours watching every video. You truly are an exceptional instructor!

[@mfenge]

Perfect explanations! Simple and easy to follow and understand, and straight to the point! Thanks man! 🙂

[@amandapfeiffer2693]

Hi Tim, love your videos and how simply you break it all down! Your pacing makes it easy to follow along without pausing every second (LOL). Thanks for the great content!

[@thridevsuvarnan8208]

Just faced some confusion on component properties and got it cleared with this gem of a video. You earned a subscriber! ❤ Thank you!

[@marikoma2260]

I couldn't imagine that this could be explained so easily in a few minutes without leaving any questions. Thanks for such content, your channel is a finding of the day. 🎉

[@sk8ergirl66687]

Finally! I've been thinking I won't understand how to make it. Great explanation. You saved my time!

[@jswanson859]

I've watched several tutorials on the new properties panel and this really simplifies it. So much easier to understand. Thank you for sharing.

[@TimGabe]

that’s so cool to hear. 😃 thank you for letting me know, it’s genuinely appreciated 🙏

[@jamesaldwin7080]

Quite simply the best video on components - thank you!

[@ThoughtsCo_17]

Thank you so much, I really appreciate the time you took to put this together. I was looking for this for almost the whole month. Thank you for this!!

[@TimGabe]

wow, so cool to hear it was that helpful! thank you for commenting 😃

[@christinenguyen]

I've watched so many videos, and yours is the only one I actually understood about how to use boolean and variants together. Thank you!!

[@TimGabe]

that's great to hear, christine!!

[@MaeveDoyle]

this was incredibly clear and sooo helpful!! thank you!

[@nenabruce8300]

such a straightforward explanation, super easy to follow

[@NeilCuestas]

Tim I love your figma tutorials. The details and effort you make on these tutrials are exceptional. I would like to suggest if you can make a tutorial on how to do localizations. Cheers!

[@PrajyotMeshram]

This is soooo goood! Thank you Tim!

[@hansulibakshi9303]

Quick, simplified and well-organised. This helped me clear a random doubt and save time. Thanks!

[@TimGabe]

that's amazing! thank you for the support!!

[@hudsonsilvaoliveira5674]

Out of all the videos I saw about this topic, yours was by far the best. Thanks, man!

[@TimGabe]

thank you so much, Hudson 🙏😃

[@ckizer]

Mastered components but nested booleans had me stumped. This video? Game changer! Now I'm acing the tricky stuff too. Level up!

[@UmairUlhaque]

Hi Tim, learning components deep down to their variants, boolean, text, and instance properties was useful. Even after using Figma for the last 6-7 months, I am still afraid to have or use these advanced features but your teaching provides motivation and inspiration at the same to face these challenges. Thanks man!

[@TimGabe]

feedback like this is amazing and makes me so glad. thanks a lot, Umair!! 😃🙏

[@ramenitsuga]

Huge help! Thank you so much!!

[@EstherFagbenjo]

I love the way you teach; this is the first video I'm seeing of you, but you bought me! PS: I subscribed before you asked for it.🤭

[@MinalB1539]

Best video on Variants, Boolean, Text, Instance so far. Thank you.😀

[@TimGabe]

thanks a lot for the comment and support!

[@etimafaith2080]

Best and most helpful figma tutorial video I've seen.. short and straight to the point

[@TimGabe]

such a nice comment 🙏 thank you so much, I’m really glad it helped you 🥳

[@thazleassain212]

the best video for component properties.. little confused watching all other videos. thanks man for cleared all doubts within just 10 minutes .. 😍🥰

[@selena-w1]

I was always so confused about components but this video taught me everything! Thank you so much ;)

[@TimGabe]

that's great to hear!!

[@MoritzFischer]

This was a great video on variants and components. So easy to follow! Thank you very much 😊

[@TimGabe]

awesome to hear, moritz!! thank you!

[@uxdesigns4836]

Great video. You're very clear, organized and easy to follow. I've been out of Figma for a bit, and was behind with this feature. Thank you so much for getting me up to speed, and making it EASY.

[@TimGabe]

that's so nice of you! thanks a lot!!

[@md.shamsularefin4983]

Thanks a lot. I have watched sooo many videos related to Component Properties, but none of them could clear my confusion. You cleared all my confusion in just 9 minutes and 37 seconds. can't thank you enough brother. you have made it very easy for me. You deserve a lot more subscribers. thanks a ton. :)

[@TimGabe]

that’s so nice of you, Shamsul 🙏 thank you, friend ☺️

[@user-do6jh9kc7o]

Thank you for this!!! Love it!

[@TimGabe]

glad to hear it! 😃

[@turaluix]

You deserve a medal, man. I have watched many tutorials on this but yours truly nailed it.

[@TimGabe]

I get so happy when I see comments like this. thanks a lot, my friend 🥳 Happy you got value out of it!

[@turaluix]

@@TimGabe Definitely, subbed! Thanks for the good work.

[@TimGabe]

@@turaluix truly appreciate the support! 🙏🥳

[@user-qj3rz3vv9j]

You are just an awesome instructor Tim. Keep up the good work. When I complete your tutorials, I will see if there is some thing that I would like to know that you may not have covered. Thank you for what you have done already!

[@TimGabe]

this makes me really happy to read. thank you!!

[@robbmillerart]

Thanks Tim! Great, simplified instruction. You. The. Man! Thank you!

[@Runeansfelt]

Dude your videos are amazing. I will never stop telling you that! Great content man!

[@waleedibrahim1747]

Thank you, this is a clear, easy and simple explanation. For the first time I understand Component Properties in this way, Thanks again

[@TimGabe]

that's so cool to hear. thanks for commenting to let me know! 😃

[@kuangyoucheng382]

Clear and good tutorial video. Thanks

[@OCDesigns.]

Love your videos! Thanks for keeping it short and simple!

[@TimGabe]

happy to hear this, Brady!! I try my best!

[@user-zm8br6cc9q]

Really great video. Thanks TIm

[@emerlander]

That's incredible. Thank you!

[@TimGabe]

thank you for supporting! 😃

[@ImoveTraining1]

Excellent video tutorial. Thank you.

[@victorhidalgorico]

Thanks for your explication! It's very clear and pedagogic!

[@TimGabe]

happy you found it clear, my friend!

[@designbydaniiiyal]

Thank You So Much Man !!! Now i am gonna complete the task given by client in minutes

[@kishorekumar8216]

Tim you’re a life saviour man! u have explained such a complex topic in a simple and easy way, kudos to you bro, god bless you 👏

[@TimGabe]

thank you for the kind comment, my friend!!

[@Razordab]

Best video EVER, thank you so much, i was very confused about the boolean property, no more!

[@TimGabe]

that's so cool to hear! thank you!

[@markmcg8309]

Thanks - taught me a couple of things I didn't realise that I didn't know!

[@TimGabe]

haha, that's awesome!!

[@ArbaazKhan-wb2dt]

I like how you break down things to make them easy to understand!

[@TimGabe]

glad you enjoyed it, Arbaaz! 🤩

[@silverflowerhohocham3711]

This was a really helpful guide! so simple and concise yet informative and easy to follow along

[@TimGabe]

thanks for the comment, friend!

[@thomasfazanaro]

The best explanation!!! Thank you!

[@martun321]

Thank you for this super clear explanation!

[@TimGabe]

happy it was helpful!!

[@babitasharma6918]

I am a beginner in learning Figma. I was facing many problems while trying to create an instance of a button. After watching your video, I have now learned how to create instances.

[@TimGabe]

that's amazing to hear!!

[@nahuel-fleitas]

Thank you for being so clear when you explain. I imagine this would be very difficult to understand but you explain it in a very simple way so I could get it in the first try. Liked and subscribed!

[@TimGabe]

really glad you like it and that you felt that explanation was easy, Nahuel! 😃

[@svitlanagordiievska3695]

One of the best Figma educational resource! So simple and fast explained an complicated stuff.

[@TimGabe]

appreciate it a lot, Svitlana 😃

[@cloe2293]

Great tutorial! The instances and boolean explanations are really helpful to speed up the design process 😊

[@TimGabe]

makes me so happy that you found it helpful, Cloe ☺️🙌

[@agnidiptahomroy8656]

Very well explained and informative video, thanks a ton mate.

[@stephenaaronosborn]

Thank you so much for these videos. I'm loving your pacing and explanations. Very good Figma content!

[@TimGabe]

really appreciate that, Aaron!! thank you! 😃

[@awaises]

This tutorial is great and really helpful for beginners. The best thing about it is that it's easy to understand. Good job, and thanks a lot!

[@TimGabe]

happy i could help!!

[@Aizhan_kabi]

Excellent explanation! Thanks

[@tastamimi2043]

Big like that was helpful Thanks Tim !

[@TimGabe]

glad it was helpful!! 😃

[@ragdanragdan7272]

So helpful Thank you

[@sophieo1157]

Thank you! Great explanation 💥

[@TimGabe]

happy you liked it!!

[@michellehansen5095]

Love your content!! To the point! I would like to see you cover design systems, color roles, etc

[@joseparamas9828]

This is the best explanation of properties I have found.

[@TimGabe]

so happy to hear that!

[@Kartoonzzzzz]

This video is wonderful. Stucked many days but could not able to learn it but now my doubts cleared . Thankyouuuuu so muchh....

[@TimGabe]

that's awesome to hear. thanks for letting me know it worked for you 😃

[@lineseverinsen8637]

Thank you! Your tutorials make it so much easier to understand!

[@TimGabe]

that’s amazing to hear!! thanks a lot for commenting, Line 🙏😃

[@user-gz3vi3th8y]

Thank you for the amazing video LOVE IT.

[@TimGabe]

that's great to hear, thank you my friend!

[@baturesolomon4687]

This tutorial helped me understand component properties so easily ❤ without making it feel like it was difficult

[@TimGabe]

love it! thanks for letting me know 💜

[@alexsalucov240]

thanks a lot you nailed it!

[@jokastudios]

From 38 subscribers to 389 in less than a month. Didn't I say your channel will grow? I'm one of the first subscribers 🚀💥

[@TimGabe]

Joka, my friend 🤩 you were here from the start and I’m beyond grateful that you continue supporting 🥳🙏

[@jokastudios]

@@TimGabe 🚀🚀🚀

[@willowthewindbelow]

Really wonderful explanation you just upped my skill in 9.37 min

[@tunamayoooo2034]

Great tutorial and so much easier to understand. I actually learn UI from you right now. Thank you so much!!!

[@TimGabe]

happy to hear it, my friend 🤩

[@abhayemmanuel9855]

Great explaination.. Thank you so much..

[@shakil_mahmud]

this video was great , i love it

[@doren_dev]

wow i love the way you teach using easy go to steps its a cool way, great Job.

[@tulasisrikanth4082]

you are a life saver just got the concept in just 10 mins 🙇‍♂

[@TimGabe]

that's great to hear 😃

[@ahmedsakr7100]

such a beautiful content tim , so excited to see your new ones

[@TimGabe]

thanks Ahmed! really appreciated

[@pearlite6243]

Great video, Tim!!! The new autolayout and component features takes some practice, but they are so useful when you know how to use them :)

[@TimGabe]

thank you so much, my friend 🤩 yes, it’s the greatest thing since sliced bredd 😂🥳

[@KizombaFusion]

Amazing tutorial!!! Liked Subscribed!

[@TimGabe]

glad to hear it, my friend!!

[@pavanlapix8218]

awesome man you nailed it..!

[@julyartzo1241]

Thank you a lot!🔥

[@TimGabe]

thank you! appreciate the comment!

[@sencer2177]

Explained it in a simple and very organized manner which makes it easy to understand.Thankyou

[@TimGabe]

thank you so much, this kind of feedback means a ton to me ☺️

[@sencer2177]

@@TimGabe waiting for more interest content from you.

[@jojodesigns777]

Very well explained, great channel 🤩Thanks Tim !

[@TimGabe]

thanks a lot for the kind comments Joanna ☺️🙏

[@fliich]

Clearly explained and very useful breakdown in your file. Thank you

[@TimGabe]

happy you liked it!

[@Nastia_bilberry]

Thank you! Very informative 👍🏻👍🏻

[@TimGabe]

happy you liked it!

[@DeschutesOutdoorsman]

Dude, these videos are very well done. Bravo and thank you.

[@TimGabe]

thank you so much!

[@stevendesigner]

Useful, thanks!

[@TimGabe]

happy to help man!

[@Indiegaze]

Thank you so much for this! I'm new to Figma and I was following a UX tutorial from DesignCourse, and I've been stuck on this stupid component thing forever, as it seems like Figma has updated the layout of the program or something, and I couldn't make sense of any of the tutorials I found. Excellent content!

[@TimGabe]

the feeling of being able to actually help people, and then getting comments like these, it's just something else. thank you so much for sharing this with me and putting a smile on my face - you're awesome!! 😃🙏

[@Malikzamincheeta]

I like how you explain the complete process through step by step procedure and clean design ❤❤

[@TimGabe]

so happy to hear that Zamin 🤩 have a great morning/day/night, my friend 🥰❤️

[@anilslands]

Oh, dear Tim, I've been drowning in tutorial videos left and right, but, hold up! In just ten minutes, you swooped in and sorted out all my questions! Seriously, I can't thank you enough for that epic save! 💫

[@TimGabe]

that's so cool to hear, anil!! thank you!!

[@monikasoush]

Thank you for this video. The best explanation so far I've watched.

[@TimGabe]

thank you for commenting and supporting, Monika! 🥳

[@teji_coding360]

Your channel is the place to go for learning UX. Hope you get the attention you deserve!

[@TimGabe]

wow, with all the great UX educators out there this really means a lot to me. thank you so much, my friend 🤩

[@WimpLo123]

His channel is more about user interface (UI), not user experience (UX). UX is more about psychology. UI is more about what you see and interact with. The two are very different. 🙂

[@learnwithaasim]

Very insightful video. Awesome💜

[@TimGabe]

once again, thank you my friend! 💜

[@gabypino407]

Thanks a lot. Just what I needed! Clearly explained

[@TimGabe]

that's great to hear!! 🥳

[@annevaleriee]

this was a cool, instructional video, thank you!

[@TimGabe]

glad to hear you liked it!!

[@ankita5786]

Thank you Tim. Love your videos! Can you please create the multi-level tree component tutorial?

[@hemisgio18]

Oh my! You made that look so simple! Thank you so much :D

[@TimGabe]

that's awesome to hear!! 😃

[@AnjaliKumari-sg1hh]

@ Tim you are the best...through your videos I am learning a lot and much more smoothly that other ppl's video.. They are also good but you are unmatchable. Thanks a lot for doing this for us. ❣❣❣

[@TimGabe]

this makes me so happy, Anjali. unmatchable, that’s quite the compliment considering how talented many of the creators on here are… 🤩 thank you so much, my friend 💜