Really helpful love the video, maybe I would dive a bit more into how to use the icon set importing and all that. That part wasn't so clear to me and I think it's really useful to know a bit more on that.
I have watched 10 tutorials before this , and I must say this is the best tutorial on components. thank you so so soo much for this.I have stressing over components and variants for weeks , you made my monday blues bright!!!
I'm Starting my journey in the UI Design field by my own and I can clearly say this is the most helpful video I've watched since I'm struggling with Components and Layout. After watching this, I can Crush my design project. Thank Caler! Patrick K. - Junior Designer
I love components in Figma and mostly only used the variants property. I now finally understand the use case of the additional properties which is just mind blowing! Fantastic short and concise video!
Thank you for this video! It's really helpful. For first: it's direct to the point, using easy vocabulary to understand and simply explained. What I'm also happy about is the explanation of Variants. What it is, how many type has and what means each. For a not native English speaker, it can be overwhelming to get all the technical words. Watched a few other tutorials in the subject, but in each of them were giving names and verbalizing that they use boolean for example, without explaining what it is. Got so frustrated, because didn't know if I'm obliged to name components the same as in video or it's only an example. This finally gave me clear answers. Thank you so much!
Amazing video! I was so scared to try and learn components, as I previously have had difficulties with it. After watching this video it has helped me gained a much clearer understanding. Thank you so much!
had same difficulty also i tried taking icons from iconify plugin and i realise that sometimes the icon and text dont align and its challenging to change maybe the size of the icon to align with the text what can i do from here?
I was searching for a solution and discovered it is just easiest to copy paste icons from a community project into your own (especially for free users). Then select them all and create components via clicking on the right toolbar. Next to component icon there is an arrow and then select create multiple components (just under design/prototype). I then combined them as variants, so I could swap the icons instantly, didn't have to make another property for that. The main reason for this was that they would be grouped in assets panel, as I have lots of assets in that file.
Hey, quick question, how do i get my icons under the assets tab? Creating component meks them visible in Assets > local components, but in the video you have like different group for icons in assets. Great tutorial, alot of help. Cheers!
I think he uses a plugin/icon assets library called "Untitled UI Icons - 1,100+ FREE essential Figma icons" and this one has a feature so you can add an icon library as components (think its a paid feature) all in one go. I am not sure but I made a few searches on Google. I hope this help you and best of luck with your UX/UI project. Best regards Falkson
Thouroughly explained. I watched other videos some goes too fast or didn’t cover enough details. Finally I understood the relationships between all of them
Hi! I tried it step by steb but I do now know if I have some kind of bad icon.. But when I am trying the "Has right Icon" (4:41) and copy the icon, there is no copies layer and I do not have the ability to add new property. What is wrong please?
Thank a lot for the video, love it. Just one question, In the instant swap, how did you select the other icon? you need to download a pack or something? not shore how
Really good video, I finally understood what I did wrong 🙌 Curious if you could make a video on how to do dependant component props? Example: I want to create a button, Should this button be with an Icon if so which side of the button should be the Icon? - I found something similar on the ridds Figma course but think this topic should be covered more.
Initially, you advised against using a master component but suggested using instances. However, when creating variants, you grouped the main component with instances. How will this grouping impact the design?
Thank you. I noticed that you are using untitled ui icons.. do you have a guide on how to add those icons to my other files? when i copy them after creating a duplicate of the kit, i dont see then when i search. If i put the HeroIcons in my file, those come up but not the Untitled UI ones. I also nootice that when i copy the UUI icons over to another file, they show up as instances rather than components.
How did you manage to give the icon twi properties? "has left icon" and "instant swap". i can just have either one of them at the same time. what do i wrong?
What should you do in figma if you want a component to always appear in its original state when you return to a screen, even after making changes to that component?
With Autolayout - once applied, the width and height values grey out and you are no longer able to edit this. What if you wanted a really specific sized button? I’ve tried this technique and if I re-size it break the auto layout. Any tips or am I doing it wrong? Thanks!
Thanks for this video, my comment is regarding the padding change when there is an icon present. I encountered this in a project recently and decided to make the icon small enough so that the padding would be unaffected. I thought it would look inconsistent if you had a button with icon next to a button with no icon. I wonder if there is a way to make the icon not affect the overall padding of the icon. Thanks again for your videos.
I find them on the community tab > add them as components and set them as a team wide design system to access them from any file. Hope that helps, might have a video on this soon :D
Thank you for your video, one comment though you are making the same mistake as most of the people that upload Figma video tutorials, not show the layers panel on the left when you are working and explaining, this is very important to understand what exactly are you selecting when you apply things. Cheers!
Thanks for Watching! What did you think of the video? :D
Useful
Easy narration. Let's do an in-depth video of buttons with respect to primary, secondary, tertiary buttons and sizes too.
Looking for your next webflow project tutorial
Really helpful love the video, maybe I would dive a bit more into how to use the icon set importing and all that. That part wasn't so clear to me and I think it's really useful to know a bit more on that.
@@jontoyib 😀
Thanks for his video couldn't find a single video which explains the components and variants better than you. Keep up the good work man ❤
Thanks, will do!
This is THE BEST explaination I've seen on components and variants. I hope you do a video on Variables too.
Thanks! ruclips.net/video/87HgZnsM2Hc/видео.html 😁
I have watched 10 tutorials before this , and I must say this is the best tutorial on components. thank you so so soo much for this.I have stressing over components and variants for weeks , you made my monday blues bright!!!
I'm Starting my journey in the UI Design field by my own and I can clearly say this is the most helpful video I've watched since I'm struggling with Components and Layout. After watching this, I can Crush my design project. Thank Caler!
Patrick K. - Junior Designer
that was really amazing ...
no other tutorial taught me those important things (text,Boolean , instance swap)
Thanks Caler
I love components in Figma and mostly only used the variants property. I now finally understand the use case of the additional properties which is just mind blowing! Fantastic short and concise video!
I had a components assignment due for my boot camp course I just couldn't figure out until this video. Thanks, brother!
Very well described, easy to understand, the perfect video for components and variants. Thank you very much!
This was the best video I found explaining how to use components in figma!... and you did it 2 years ago! 😲😃
Thank you for this video! It's really helpful. For first: it's direct to the point, using easy vocabulary to understand and simply explained. What I'm also happy about is the explanation of Variants. What it is, how many type has and what means each. For a not native English speaker, it can be overwhelming to get all the technical words. Watched a few other tutorials in the subject, but in each of them were giving names and verbalizing that they use boolean for example, without explaining what it is. Got so frustrated, because didn't know if I'm obliged to name components the same as in video or it's only an example. This finally gave me clear answers. Thank you so much!
I rarely ever comment on RUclips videos but this was great and helped A LOT.
Amazing video! I was so scared to try and learn components, as I previously have had difficulties with it. After watching this video it has helped me gained a much clearer understanding. Thank you so much!
Saved my professional life!!! Thank you!
thank you for explaining this so well. took me so many videos to understand this properly, great video man
I just found this channel yesterday and I think I'm going to have a field trip with it!
Hope you enjoy it!
Very useful, explained in a nice clear manner. You have a soothing voice.
This is a great video - been searching for a refresher on variants and this is awesome. Thank you Caler!
Thank you so much. This is just what I needed to fully understand this components feature.
How did you add icons in the asset panel, could you please tell? :)
had same difficulty also i tried taking icons from iconify plugin and i realise that sometimes the icon and text dont align and its challenging to change maybe the size of the icon to align with the text what can i do from here?
Select all icons and change to components bro
I was searching for a solution and discovered it is just easiest to copy paste icons from a community project into your own (especially for free users). Then select them all and create components via clicking on the right toolbar. Next to component icon there is an arrow and then select create multiple components (just under design/prototype). I then combined them as variants, so I could swap the icons instantly, didn't have to make another property for that. The main reason for this was that they would be grouped in assets panel, as I have lots of assets in that file.
You explain in the best way possible!
Thank you! Waiting for more from you
I have seen many videos on components but this is the best!!!😍
Wow, thank you!
I watched this tutorial a while ago and created a tutorial inspired by this, thank you for making this tutorial! 🙌
Good video, your approach is brief and simple it has really helped me get a better understanding on components and variants ,Thank you so much
Thank you very much for taking it super easy. Stay blessed bro!
You explained the topic very well. Thanks.
Hey, quick question, how do i get my icons under the assets tab? Creating component meks them visible in Assets > local components, but in the video you have like different group for icons in assets. Great tutorial, alot of help. Cheers!
I have the same question and its freakin me out :')
I think he uses a plugin/icon assets library called "Untitled UI Icons - 1,100+ FREE essential Figma icons" and this one has a feature so you can add an icon library as components (think its a paid feature) all in one go. I am not sure but I made a few searches on Google.
I hope this help you and best of luck with your UX/UI project.
Best regards
Falkson
Thanks for this video. very simple explanation and useful ! love it
Excellent tutorial. Thanks for posting.
You explained this better than the Figma guys and their video about the same teme. Thanks :)
Thouroughly explained. I watched other videos some goes too fast or didn’t cover enough details. Finally I understood the relationships between all of them
Glad to hear it was helpful :D
Amazing explanation, thanks a lot!
This did it for me :)
Great combo of tips for an actual useful use case!
You're the real deal, Simplified for me.
The Instance variant was confusing at first, but now I get it!
This was helpful, Please bring more figma tuts!
Will do!
Free lessons for free, Thank you sir.
Bro you are the best 🔥..
The explanation was so simple and understandable. 💪🏾🙏🏾
You have saved my entire day thank you....
Thanks for the simple explanation
Hi! I tried it step by steb but I do now know if I have some kind of bad icon.. But when I am trying the "Has right Icon" (4:41) and copy the icon, there is no copies layer and I do not have the ability to add new property. What is wrong please?
Very Nice Explanation ...Thank you
Thank a lot for the video, love it.
Just one question, In the instant swap, how did you select the other icon? you need to download a pack or something? not shore how
Really good video, I finally understood what I did wrong 🙌
Curious if you could make a video on how to do dependant component props?
Example: I want to create a button, Should this button be with an Icon if so which side of the button should be the Icon? - I found something similar on the ridds Figma course but think this topic should be covered more.
Super easy to understand ❤
Just what I needed, thank you!
Awesome video! Coming from AdobeXD, this is essentially taking steroids 😂
Perfect video! Thank you!
One of the best videos about Figma Components. Thank you. Just have one question: how to add an icon pack to my assets?
A meticulous video! :) Thanks for creating it.
amazing sir.. it was really very useful
Very clear explanation. Please do more tuts in the future
Minimalist perfect demo // Thanks
It's incredibly helpful!
Glad it was helpful!
Initially, you advised against using a master component but suggested using instances. However, when creating variants, you grouped the main component with instances. How will this grouping impact the design?
Simple straight to the point
Thanks bro, helped so much
Very helpful! Thanks
I really enjoyed this vid
How did you add the icon pack to Assets like that?? I've only known how to get them via plugins
liked the video. Please can you make a video on making page transitions and vertical and horizontal scrolling
Nice, but did you preview just the button component at the end there? If I press play, it's showing me all my frames.
Thank you. I noticed that you are using untitled ui icons.. do you have a guide on how to add those icons to my other files?
when i copy them after creating a duplicate of the kit, i dont see then when i search.
If i put the HeroIcons in my file, those come up but not the Untitled UI ones.
I also nootice that when i copy the UUI icons over to another file, they show up as instances rather than components.
Great video!!!!!
Thank you!! Explicas muy bien :)
Hello thank you for the video, i've been struggling to add the untitled file of icons in the assets, can you help out ?
Thanks for sharing 🙂🙂
My pleasure 😊
IMPRESSIVE! How did you make it more clear and easier than Figma official tutorial?
pls what how do i get this icon pack you used in this tutorial? whats the icon pack name?
How did you manage to give the icon twi properties?
"has left icon" and "instant swap".
i can just have either one of them at the same time. what do i wrong?
thank u for not adding "talking head" to tutorial. much appreciated.
Main thing you missed. How to change icon color to white if we made red button? as we have black icon library. I am looking for the solution.
Good work
Hi everybody! there is no available assets when I click on Assets. Can you give me an advise how I can get them ?
What should you do in figma if you want a component to always appear in its original state when you return to a screen, even after making changes to that component?
thanks a lot for this video.
damn this were some cool things too learn
how did you get those icons into assets ?
With Autolayout - once applied, the width and height values grey out and you are no longer able to edit this. What if you wanted a really specific sized button? I’ve tried this technique and if I re-size it break the auto layout. Any tips or am I doing it wrong? Thanks!
How can i change the icons back and forth to different kinds on a component?
what site are you getting ur icon
Thanks for this video, my comment is regarding the padding change when there is an icon present. I encountered this in a project recently and decided to make the icon small enough so that the padding would be unaffected. I thought it would look inconsistent if you had a button with icon next to a button with no icon. I wonder if there is a way to make the icon not affect the overall padding of the icon. Thanks again for your videos.
Try to setup the line height for a text in the text properties.
Nice video caler...what if we want to add an outlined button, can we add another variant to the component where we have the default and hover state?
Yes.
At 6:15 how did you get the icon set ?
I find them on the community tab > add them as components and set them as a team wide design system to access them from any file. Hope that helps, might have a video on this soon :D
while i drag new instance from the assets my buton came with no backroung only text .
can we apply this button on various screens? for the same effect?
Yes, just drag out an instance of the button any time you need it from the assets panel on the left.
thanks a lot!@@CalerEdwards
thank you so much
When I use svg icon then icon hide but contain space
Thank you
excellent
Thank you for your video, one comment though you are making the same mistake as most of the people that upload Figma video tutorials, not show the layers panel on the left when you are working and explaining, this is very important to understand what exactly are you selecting when you apply things. Cheers!
I got a lot out of this tutorial, but it lost me at the instance swap. I've watched that part over and over and am still lost.
Great
that's awesome , but it'll be better without background music , it's disturbing me a little .
FUCKING LOVE U
no such thing as overx or etc
can someone explain me why fcking adobe sofs. don´t have simple auto layout or components function?