Figma components and variants for beginners

Master Figma for web design with our new, in-depth Figma course: t.ly/ziCOp
Need a new Figma account? - psxid.figma.com/s8z3306bhq0h
The more you use Figma, the more you'll find yourself duplicating stuff. I find this extremely annoying and time-wasting. The good news is that we have something called Components in Figma. And in this video I’ll teach you what they are and how to use them so you can stop wasting your time when designing.
📽️ CHAPTERS
00:00 - Intro
00:34 - What are components?
01:45 - What are variants?
02:51 - What are component properties
04:13 - How to create them
Let me know what you’d like to learn next! 💬
Subscribe to Tim's KZbin Channel 👉 / timgabedesign
Tim Gabe’s Instagram 👉 timgabe.des...
📱 Find us on SOCIAL MEDIA
Flux Academy's Instagram 👉 / flux.academy
#webdesign #design #figma #figmatips

[@orliisrael9815]

Great great great! The fact that you speak slowly enough give us enough time to understand the information. That's very pedagogic and professional. Thank you!

[@_jb5261]

Tim is such a good teacher man❤ Great refresher on components and variants.

[@gloriafolaranmi1055]

Thank you so much... On normal days, I don't add comments on KZbin videos but I'll this time. It's quite disgracing that an experienced designer doesn't know how to use variants...I've always had to change them one by one. And to think I have watched a lot of KZbin tutorials and I still won't get it. But you gave a very detailed explanation, and I followed them one by one. Thank you for this really 🙏🙏

[@richiechan7119]

one of the best videos that explains components, variants and component properties. very clear showing and explaining of the steps to create them. thank you.

[@divinacalcana4308]

This is more understandable. I have seen so much youtube explaination about auto layout, components and variants and THIS VIDEO MADE ME UNDERSTAND EVERYTHING EASILY! thank you for this tutorial. You help a lot. Thank you so much TIM

[@Picture_Sensei]

Honestly have been trying to understand components and variants for a while now I have never come across a tutorial that was so detailed as this. Thanks Tim.

[@user-dc4pm4hn1s]

I was searching for soo long for a video that really easily explains about components and this one is literally GOLD! thank you!

[@davidostrowski679]

exactly what I needed too! I was ok with components but confused by variants and all the additional functions. Fine now though!

[@davidostrowski679]

i had to watch the second half a few times while doing it myself on Figma. I got it eventually. HOORAH. I finished the Google UX course last week so I'm making my way through my self-devised UI learning plan. Great videos!

[@codesnippet_by_anabel]

I truly appreciate your effort, it's a really concise and useful video that has helped me a lot. Thank you!

[@SuperBanenna]

Thank you for this video, simple and clear. I`ve learning Figma by you tutorials and it is supper convenient

[@lisa_jocktan]

Finally, i have understood components and property. Great tutorial 👍

[@FluxAcademy]

Glad it helped!

[@kma1278]

honestly I now know what components and variants are. The best tutorial ever. Thank you

[@alfiartya23]

Thank you so much for your explanation about this Components! very clear instruction with your slow pace

[@thearyameri]

This was super helpful and easy to understand. Great speaking pace.

[@simonacellar8166]

This is great! Just what I needed, thanks so much, Tim.

[@Rinacks]

This has been the most helpful video I watched regarding variants and component properties. Thanks for the video

[@MercyB3ats]

The editing on this is just a chefs kiss

[@bogdandjordjevic9947]

Super helpful! Thanks!

[@DanzarinaSibel]

Such a good explaination, you are the answer I was waiting for. Please make videos about EVERYTHING.

[@omkarpulekar971]

Thanks bro that was very helpful and detailed being short and sweet

[@ishitapanchasara6600]

Amazingly explained components and variants. Thank you so much for this tutorial. You have explained it really well.

[@sumansourabh4849]

Finally, I understod the Component. Such a great explanation.

[@den_vortezio]

Thank you for the tutorial. It is the only one that made me understand components and properties.

[@petermckinnon386]

Absolutely fantastic. Great tutorial.

[@user-rb6bf8lc7o]

it was really a quick and easy-to-follow tutorial which made everything seem easy. I had some difficulties understanding how things work around varients but now I know. unfortunately, I wanted to see different approaches to creating varients like adding properties by changing their name in the layers panel and some more but overall it was really a great video; thank you

[@treyy7366]

Awesome video!! Very helpful!

[@chiamakaukandu1071]

This has been the best and well detailed video I’ve watched ever!!!

[@paularosler949]

Thank you very much! Sooo helpful and on point!

[@shafiqdesigns]

Excellent tut man

[@ExecutionSommaire]

A big thank you. Couldn't find anything that was beginner friendly until this.

[@munkkipoika8737]

Thanks, helped me to do my work.

[@rayrayimpact]

Great Tutorial, thank you!

[@squishyak]

Thanks for this! For the last toggle (variants) do the icons all have to be individual components, or can they be variants within a single icon component?

[@hsoonabt9388]

thank you.. i found this video very helpful.. the easiest way to understand 😊

[@daviddr2d2]

Dude, you explained it good. Thank you.

[@humhaispecial7478]

best tutorial. bless you

[@didarul891]

Thank you for your valuable video.

[@brosnhoem7977]

thank you brother for sharing useful video. 🙏

[@Joybond88]

So helpful thanks ❤

[@dbroh]

This actually helped me understand simply

[@henkegiaretta]

Awesome as always 🙌

[@tusharsadaf515]

so much helpful thank you man

[@khushboosharma6844]

this was really helpful , thank you so much.

[@FluxAcademy]

Glad it was helpful!

[@MadeByJoey]

Thank you this was really helpful!

[@laurentjoly7759]

Thank you very much !

[@CallMeNighthawk_]

Super useful! Thanks

[@samararodasarq2650]

This tutorial is DOPE!

[@arghavan8552]

thank you for this video, it made the process so clear for me but i steal have problem with "creating instance swap property" this option doesn't show for me. i tried to make componant for icons but other problem appeares, I'd appreciate if you help me 🌹

[@badrthx8274]

Very professional tutorial, I have never come across a tutorial that was so detailed as this. Thank you 😍

[@FluxAcademy]

You are so welcome!

[@pratitikatakol9587]

this was extremely helpful, thank you 😭

[@FluxAcademy]

Glad it was helpful!

[@AbdurRehmanuxui]

Thank you for this tutorial.

[@user-tk3co7pb5v]

Simple and awsome

[@emeraldezy9675]

Nice video. Can this component property be used on multiple elements on a Product card for instance?

[@Panda-gu2yb]

Perfect Tutorial thank you

[@FluxAcademy]

Glad it was helpful!

[@iamdciax2]

Thanks so much for this

[@thasnitp3559]

great class

[@user-es3vq7ye9i]

Can someone explain what's the use of the text-changing thingy? I don't understand how it's different from just changing the text in the cta manually, what difference does it make?

[@serenartix]

That was very helpful, thank you Captain America!

[@jratkinson3294]

you are welcome spoider man

[@SisiBisi-zh1cj]

Thank you so much

[@SonySteals]

Wow! With this sort of tutorials I might be able to finally learn figma lol

[@madgo5050]

thank you so much

[@developer9352]

Good video!

[@o0shikaru0o]

thank you, this is a lot clearer than the tutorials figma put out

[@ozcankursun3923]

That is the what I looking for❤

[@animehubking1537]

Thank you very much

[@pikachu-ql3vk]

how do u got that same icon in the hovered state 8:30

[@alessandraserinelli5911]

Very interesting! I'd suggest to display the short-cut for the ones who don't know :-)

[@benmukanirwa]

Thanks!

[@mingsirakowit3316]

Thank you

[@Kj-gr9fv]

Anyone know how I could utilize the icon variant property to connect with the Material Symbols plugin? Maybe I have to save them like in the video as individual icons but it would be great if I could swap the icon via the plugin menu and search the full Material library. Thanks for any advice!

[@dennisjoshi7837]

helpful content

[@LauraAdamsRodriguez]

THANK YOU!

[@charumurugesan1716]

honestly the best video to learn about component properties .

[@FunMind0]

BRAVO👏

[@mrdark601]

There is something about the way he speaks, it is so understandable, thanks for slowing down for us

[@hellomovies1456]

thanku sir

[@ujjalbroo]

Thanks a looooot 🎉

[@tori2040]

everything worked up until the section of swap icons. for some reason only the icon that is placed in the two button variants will show up. I checked to make sure that the other icons were made components, and they are. all icon components will show up in the assets panel on left side but will not show up to swap when clicking on icon layer does anyone know why? thanks

[@danhle0606]

Useful

[@titanexag9982]

link figma course is broken sir

[@vishalrahman6128]

I am not getting that icon instance swap property thing under the Parent component property section that your cursor is hovering on at 9:51. I followed the tutorial step by step I am not sure what I am missing.

[@pikachu-ql3vk]

bro do u know how did he got the same icon in the hovered state 8:30

[@artianrika8329]

thabks techer

[@dollarproduction24]

Had experienced intense creativity/tactics while watching this guy's full tutorial 😀

[@shumailabrohi3300]

When I click on the icon in the component button I don't get the change icon option why? Can anybody help?

[@thisissahaj]

Hello, I'm not getting the 'content' option on 6:24 please help me

[@unaizashaikh2291]

Hi I am not able to understand what he said Obesity 50% for variant 2 , can anyone tell me what this option is about ?? And where is this option?

[@AnmolRamgiri]

Frankly speaking, after going through the official Figma videos, your video was much easier to learn from.

[@FluxAcademy]

Wow, thanks!

[@swagatapathak]

I am not able to see " content" under text to create properties. Any suggestions?

[@it.ux.designer614]

Must the icon be a component?

[@_sudeep03_]

Cool

[@pramodb3928]

9:57 I can't find that option after selecting the icons

[@RSTypeContent]

i hate that i have to watch this

[@user-sh1lw8qo2b]

Good

[@hxxzxtf]

🎯 Key Takeaways for quick navigation: 00:00 *🔄 Duplicating and modifying designs repeatedly wastes time, which components in Figma help avoid.* 00:25 *📖 Components are templates for reusable design elements like buttons, icons, etc.* 00:52 *🖼️ Components are managed in the Assets panel and can be dragged onto the canvas.* 01:47 *🌓 Variants allow a single component to have multiple states (e.g. default, hover).* 02:54 *⚙️ Component properties minimize the need for variants by allowing dynamic changes.* 04:16 *✍️ Demonstrates creating a button component with default and hover variants.* 06:17 *📝 Shows adding a text property to dynamically change button text.* 07:21 *👁️ Adds a boolean property to show/hide the button text.* 08:56 *🖼️ Adds a boolean property to show/hide an icon in the button.* 09:49 *🔃 Demonstrates using an instance swap property to change the button icon.* Made with HARPA AI

[@jessvex]

What’s a “buddon”?

[@johndaniel21343]

When your icône have different mesures it doesn't work it stretch in any different ways

[@roter13]

Tim is gorgeous.

[@penstarin]

I hate to say it, but you talk the theory, I just needed a refresher on how and where to do it. But thanks anyway

[@TenderloinsToughest]

The way you pronounce Button is kinda funny. Thanks for these tutorials. Life Saver.

[@meganmay573]

I really like your work but I wish you went slower sometimes. Things that may be natural and very intuitive for you are not for others. For example, announcing that you're changing the corner radius as well as the auto layout padding and going a little slower there would be helpful. Same for opacity change - I didn't even see how you did that in the video. I end up pausing a lot and getting frustrated when those steps aren't announced or broken down. Thank you for the videos!