Figma components and variants for beginners

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

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

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

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

[@lizannedsouza1838]

I really appreciate how you've explained the reasoning behind the addition of these tools and features, feels a lot less overwhelming and more like a sensible progression.

[@מאיואןהובה]

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!

[@allthingsunrelated2919]

This is a well paced tutorial. Thanks for slowing down for us. Components/variants/instances are confusing me so this helps a lot. Also, you had me cracking up the way you say “button” like “buddin” lmao Much appreciated 😊

[@lisa_jocktan]

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

[@FluxAcademy]

Glad it helped!

[@thearyameri]

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

[@_jb5261]

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

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

[@maimounah2001]

Thank you . Awesome tutorial. It is very clear in a way that prevents you from confusing, I really liked the explanation sequence!

[@ncdc919]

Simple & easy. One recommendation I would add for beginners (like myself) is converting the text into a frame, which was a key step that folks probably missed in the very beginning if they happened to get stuck.

[@manyshap]

Thank you so much! English is not my first language so it really helps a lot when you speak slowly! Best tutorial!

[@alfiartya23]

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

[@kma1278]

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

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

[@Kamyar-n7v]

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

[@SuperBanenna]

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

[@serenartix]

That was very helpful, thank you Captain America!

[@jratkinson3294]

you are welcome spoider man

[@chiamakaukandu1071]

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

[@belindaloisgedjah6532]

Aww thank you for taking your time and speaking slowly for me to understand

[@Rinacks]

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

[@ExecutionSommaire]

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

[@den_vortexx]

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

[@darreng-g]

What a great video, very clear and easy to follow.

[@ositaufodiama3942]

I loved watching this. Thank you

[@sumansourabh4849]

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

[@shumailabrohi3300]

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

[@codesnippet_by_anabel]

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

[@shafiqdesigns]

Excellent tut man

[@bogdandjordjevic9947]

Super helpful! Thanks!

[@juliettasoghomonyan3228]

Awesome. Thank you very much ❤

[@omkarpulekar971]

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

[@charumurugesan1716]

honestly the best video to learn about component properties .

[@rayrayimpact]

Great Tutorial, thank you!

[@HARSHITKUMAR-fc3nl]

Is making a button component or a normal chip component the same thing? Means i am asking that, we can make one common component and use it as both chip and button

[@dbroh]

This actually helped me understand simply

[@ishitapanchasara6600]

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

[@RSTypeContent]

i hate that i have to watch this

[@lizannedsouza1838]

Why?

[@Chaotic_Good94]

Hahaha damn same 😂 the effort we have to put huh

[@rhythmvirdi2540]

Me too

[@TonyAdigwe]

Thanks... New subscriber alert❤😊

[@FluxAcademy]

🙏

[@Joynitin88]

So helpful thanks ❤

[@BVDR_T]

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

[@FluxAcademy]

You are so welcome!

[@brosnhoem7977]

thank you brother for sharing useful video. 🙏

[@daviddr2d2]

Dude, you explained it good. Thank you.

[@hsoonabt9388]

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

[@treyy7366]

Awesome video!! Very helpful!

[@humhaispecial7478]

best tutorial. bless you

[@ludwigrx]

Thank you for the knowledge Senpai.

[@MadeByJoey]

Thank you this was really helpful!

[@DanzarinaSibel]

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

[@tusharsadaf515]

so much helpful thank you man

[@didarul891]

Thank you for your valuable video.

[@petermckinnon386]

Absolutely fantastic. Great tutorial.

[@nilosantiago1280]

In your video (1:33) how did you add the curved arrow beside the Icon and Text property? so they only show when you select the property above.

[@henkegiaretta]

Awesome as always 🙌

[@samar.shuaibi]

Thank you a lot! this was very helpful

[@FluxAcademy]

Glad it helped!

[@samararodasarq2650]

This tutorial is DOPE!

[@pratitikatakol9587]

this was extremely helpful, thank you 😭

[@FluxAcademy]

Glad it was helpful!

[@khushboosharma6844]

this was really helpful , thank you so much.

[@FluxAcademy]

Glad it was helpful!

[@paularosler949]

Thank you very much! Sooo helpful and on point!

[@laurentjoly7759]

Thank you very much !

[@simonacellar8166]

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

[@pikachu-ql3vk]

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

[@happyshadowwishes]

this is too good thank u very much😭😭😭😭😭😭😭😭❤❤❤❤❤❤

[@FluxAcademy]

You're welcome!

[@o0shikaru0o]

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

[@thasnitp3559]

great class

[@emeraldezy]

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!

[@thisissahaj]

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

[@pramodb3928]

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

[@AbdurRehmanuxui]

Thank you for this tutorial.

[@yoshida_4763]

Thanks!!! i fanaly understand components and variants

[@FluxAcademy]

Glad it clicked!

[@sanitbusangi]

Simple and awsome

[@CallMeNighthawk_]

Super useful! Thanks

[@iamdciax2]

Thanks so much for this

[@animehubking1537]

Thank you very much

[@developer9352]

Good video!

[@AnmolRamgiri]

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

[@FluxAcademy]

Wow, thanks!

[@kazihamim9144]

This vedio realy good

[@ozcankursun3923]

That is the what I looking for❤

[@I_am_Magic_Mothae]

thank you so much

[@titanexag9982]

link figma course is broken sir

[@okami_linux_gaming]

this is strange, when i'm trying to target the text property (to create one) i do not see any content option showing up

[@uixdesignideas]

Hello! Thanks a lot. I have been trying to find the instance swap for the newer version of Figma but failed, I don't know why they keep changing everything...

[@ankit-pr2qh]

AHH i found out that if you want your previous UI back you can enter in any file of yours in figma and then you can click on question mark in the bottom, there should be a option of "go back to previous UI" , now thanks me later

[@SonySteals]

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

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

[@mingsirakowit3316]

Thank you

[@dollarproduction0]

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

[@benmukanirwa]

Thanks!

[@ujjalbroo]

Thanks a looooot 🎉

[@swagatapathak]

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

[@Reyanan_Aim_Finder]

BRAVO👏

[@alessandraserinelli5911]

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

[@Ajadi_kun_]

Thanks

[@MercyB3ats]

The editing on this is just a chefs kiss

[@jt1234-k3l]

Danke!

[@LauraAdamsRodriguez]

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?