Truly awesome tutorial, thanks a lot! As a backend dev I tried learning Figma many times over the years. And components were always the main thing that confused and scared me away from it. Now that I'm working on my own project I feel like I can't escape it anymore and have to learn at least the basics of it. And this tutorial was exactly what I needed. Thanks again so much!
My fav tutorial on this so far! Would love to see an advanced components lesson - showing how you can prototype with states, showing how you organize these in the context of a real large project file.
@@ArnauRos Components I get and use all the time - similar but way better than Adobe XD. I'm quite new to the variants, I knew what could be done but I didn't really understand how to do it properly until watching your video.
Fantastic tutorial! I use Figma every day and I've been using it for years. And yet, because they keep adding stuff, I learned some things that I didn't know before. This is how all tutorials should be: informative and to the point!
This single video is really powerful to learn component and it's property in short time. Whenever I get stuck, I always come back to this video to learn the basic. Thanks' for creating such amazing content on Figma components.
This tutorial is much better than the figma ones as it shows everything in one single video covering all important aspects. Well done! Thank you so much for sharing
I was confused on how to fully utilized component in figma until I encounter your video. Your video is on point and showed how creating component make the design faster with less hassle. Thank you ❤🎉
Thanks for the guide. Really good guide, love that it had so much and so fast. Few points for future: When you are using shortcuts with keyboards you could use application that shows ur keyboard presses on screen so viewers could see them too. Second is when you are selecting items to edit them, it would be handy to know what "layer" you selected to keep up with you and follow better. Keep them coming - we all are here to learn 😄
Thanks a lot for this great tutorial, I have done some more experimenting but you can now select "nested instances" in properties, which allows you to keep one specific component for the circle/square example you showed. I think it wasn't available 9 months ago when you uploaded this.
love your lessons dude. They are the best. Many people in Russia make similar videos about figma, and it should probably be clearer to me, since I speak Russian. But there’s nothing like that, watching your lessons, I understand everything much better and faster!
God bless you Amau, this is the best explanation of Figma component I too have seen. I just explored it more and realised that you didn't talk nexted component instance. You only talked about preferred component. The nexted component instances to me is better. Instead of searching through your whole component file, you can just click the dropdown and choose the instance, that's all. Nonetheless, preferred component also has it own pros.
Hellow Arnau, I really wanna thanks to you because of this video i could make my own components and complete all my projects more faster. Keep up the good work❤🔥
Wow I finally learned something new and different ! tbh i am a very difficult learner. I am very slow at learning and reasoning as well, but by god's grace I was able to learn what you just taught and quite quickly! thanks !!
Thanks a lot. That's how I've been doing it so far, but how do I add variables now? Does that make sense? Advantages for future components? I haven't dared to use variables yet.
Great video! As a backend dev who's starting front-end and UI/UX, I was wondering why one should spend so much time in perfecting the figma designs (by using padding, auto layout, etc) because we'd have to do that again in the code anyway right? Wouldn't just a rough visualization of the UI be enough to get to coding the UI?
Well, design is a easy to learn hard to master trade. The average person can get an okay design going, but if we follow pro designers to the pixel our designs come out looking better
Like shown on 4:48, I am not managing to drag and drop an instance into the master component (but I can do it if it is not an instance but an independent shape). Is anyone facing the same issue? Any idea what I can do?
Hey! thanks so much for this amazing, simple yet detailed explanation! I have a question about the visibility icons option, In my case I'm creating a textfield with a label and a dropdown icon which sticks to the right side. So there's a horizontal gap in the auto layout aligned to the center which keeps the text on the left and the icon on the right. If i create a visibility option for the icon and then turn it off it places the text in the middle instead of keeping it to the right (I hope I explained myself properly) Is there anything to do about that? I'd like for the text to stay on the left when the icon visibility is off.. TIA!
Hey, I'm currently auditing a project, I want to know where he got his components from, he didn't make them himself, is there a way to know such information?
Hey Arnau, when changing the button icon to square for the smaller button, the square doesn't resize and kinda sticks to the bottom half of the bottom, how do you adjust that?
I am facing a problem with button hover: 1. I have created a base component of a button 2. I make 5 states in the variants of button and linked default with hover (to change it while hover in prototype) 3. No I placed the component in the design. and change "button" to "demo" 4. Now problem is... When I do hover on it in prototype the name change from "demo" to "button" I think this is because of base component building. Do you have any solution by using base component and workable hover state in prototype?
Component variables just take methodic thinking and navigation of forward thought. It will come and thanks to this video, it will happen faster. Thanks Mr. Ros.
I have a calendar row which has 3 variants that can change, Info, Status, and Selection. These 3 variants are sub variants to the main component row, is there not a way to have this row pull from the sub variants without having to create each and every versions of the row for it to understand ? It seems to kinda defeat the purpose of having variants if i anyways have to sit and create all the sub versions.
It's great info. But i can't keep up. The way it is edited, there are no pauses, so that i can absorb what has just been said. I realise it is a trend in online videos to edit out pauses, and that is fine for some video content, e.g a quick documentary or news story. But this is a tutorial, of sorts. So it is very difficult to absorb the information at breakneck speed Other than that. It is really good. So please don't take it as a criticism. Just feedback
Download the Figma file here: arnau.lemonsqueezy.com/buy/ae6b0b83-c536-42f2-a7dc-a0d5bb0dc981
If you are coming to this with the newest Figma tool update, the "create text property" is now under Typography.
Thanks for that tip ;)
Thank u sooo much
Truly awesome tutorial, thanks a lot!
As a backend dev I tried learning Figma many times over the years. And components were always the main thing that confused and scared me away from it. Now that I'm working on my own project I feel like I can't escape it anymore and have to learn at least the basics of it. And this tutorial was exactly what I needed. Thanks again so much!
My fav tutorial on this so far! Would love to see an advanced components lesson - showing how you can prototype with states, showing how you organize these in the context of a real large project file.
Great suggestion!
This is the clearest explanation of Figma Components I've seen so far! Thanks👍
Thanks Richard! Do you use components and variants in your designs or do you design without them?
@@ArnauRos Components I get and use all the time - similar but way better than Adobe XD. I'm quite new to the variants, I knew what could be done but I didn't really understand how to do it properly until watching your video.
Thats great, XD, sketch, figma, they all have similar functions. Hopefully its not too hard to switch over to Figma
Seriously. Every other video they start creating a whole website or app. Waterboarding me with font selections.
Fantastic tutorial! I use Figma every day and I've been using it for years. And yet, because they keep adding stuff, I learned some things that I didn't know before. This is how all tutorials should be: informative and to the point!
Thanks Anna, glad you liked the video!
Im a newbie and this was extremely helpful. I am about to master figma components!!
Before watching this video, I added several icons to the component and then enabled only the one I needed.
Your video showed me a new way, it's cool🎉
Thats great! I debated adding it to the video, glad to see it was helpful :)
Been working on projects for a while now, and this refresher was awesome! Thank you!
Glad it was helpful!
didn't get components until now, very clear explanation, Thanks for sharing!!!🥰🥰
This single video is really powerful to learn component and it's property in short time.
Whenever I get stuck, I always come back to this video to learn the basic.
Thanks' for creating such amazing content on Figma components.
Glad it helped!
This tutorial is much better than the figma ones as it shows everything in one single video covering all important aspects. Well done! Thank you so much for sharing
Thanks for watching!
Needed to learn this quickly for work. Thank you so much! Some things were hard to find in what I was doing but I followed along easily!
Glad it helped!
I was confused on how to fully utilized component in figma until I encounter your video.
Your video is on point and showed how creating component make the design faster with less hassle.
Thank you ❤🎉
Glad it was helpful!
This tutorial is exactly what have been looking for. You just got a new subscriber. Thank you
Thank you Kayode!
Thanks for the guide. Really good guide, love that it had so much and so fast. Few points for future: When you are using shortcuts with keyboards you could use application that shows ur keyboard presses on screen so viewers could see them too. Second is when you are selecting items to edit them, it would be handy to know what "layer" you selected to keep up with you and follow better.
Keep them coming - we all are here to learn 😄
This video for creating variant buttons is the best among other button tutorials! This is so specific! Thank you so much! ❤
Glad you like it!
I can't find that video?
Really clearest explanation of Figma Components I've seen so everrrrr! Thank u
Glad it was helpful!
I watched once and I got the results following steps but also understood how instances and propeties work, very clear. Thank you!
Glad it helped!
That's the best explanation, I have seen on COMPONENTS. Hats off to you.
Thank you Saim, glad it was helpful!
this was worthwhile to watch, although i still find components hazy and just use manual variants, I am committed to learning this properly. thank you
Thanks a lot for this great tutorial, I have done some more experimenting but you can now select "nested instances" in properties, which allows you to keep one specific component for the circle/square example you showed. I think it wasn't available 9 months ago when you uploaded this.
Yes, I need to do an updated version for this!
I literally spent all afternoon trying to figure this out. Your video was so easy to follow! Thank you :)
love your lessons dude. They are the best. Many people in Russia make similar videos about figma, and it should probably be clearer to me, since I speak Russian. But there’s nothing like that, watching your lessons, I understand everything much better and faster!
I appreciate that!
God bless you Amau, this is the best explanation of Figma component I too have seen. I just explored it more and realised that you didn't talk nexted component instance. You only talked about preferred component. The nexted component instances to me is better. Instead of searching through your whole component file, you can just click the dropdown and choose the instance, that's all.
Nonetheless, preferred component also has it own pros.
Hellow Arnau, I really wanna thanks to you because of this video i could make my own components and complete all my projects more faster. Keep up the good work❤🔥
Fantastic!
Detailed video. As always superb work✌🏽.
Thank you 🙌
Great video! Although theres an option for nested instance too. Which can let you call that instance within. Instead of separating the icon component.
Yes! You can do it both ways for sure
drop a vid?
I learned so much from you! I just want say thank you for your amazing tutorial. Keep creating amazing content!
You're very welcome!
Thanks alot Bro this drove crazy
Great video. Learned a lot. thanks for making this
Wow I finally learned something new and different ! tbh i am a very difficult learner. I am very slow at learning and reasoning as well, but by god's grace I was able to learn what you just taught and quite quickly! thanks !!
great! glad it helped
Thankyou for these easy and proper lesson
Great explanation. You made that very simple
Glad it was helpful!
The first thing I did after this video is to subscribe to your channel. Thanks I your videos learnt a lot in 10min.
Thank you Saina!
This is so powerful.
it's like react components, but in figma!
This is AMAZING!!! tHANK YOU!!! this will save me lot of time
Glad it helped!
doing god's work brother, much love and appreciation
Thank You
It was very Helpful 🎉
My figma version have a toggle for text instead of an input. Do you know how we can change the button text, then?
Thank you
Very good tutorial! Very smart techniques for components in Figma!! Thanks!!
Thanks Andres! Glad it was helpful :)
Thank you for the tutorial video. Very helpful!
Thanks for watching!
Thanks, a lot. Exactly what I was looking for.
Great to hear!
Although i am not beginner of figma,,, but you made me confused about components,,, needs more clarification in your tutorial
Right 👍🏻
I'm a beginner, and i understood well
your video safe my life. Thank you
love it thanks!
Thanks a lot. That's how I've been doing it so far, but how do I add variables now? Does that make sense? Advantages for future components? I haven't dared to use variables yet.
yeah variables are a different beast, need to make a video abouit it
so helpful, nice one Arnau
Glad it was helpful!
Really great tutorial on components
Glad you liked it!
it was very useful. thank you so much!
Glad it was helpful!
Great video! As a backend dev who's starting front-end and UI/UX, I was wondering why one should spend so much time in perfecting the figma designs (by using padding, auto layout, etc) because we'd have to do that again in the code anyway right? Wouldn't just a rough visualization of the UI be enough to get to coding the UI?
Well, design is a easy to learn hard to master trade. The average person can get an okay design going, but if we follow pro designers to the pixel our designs come out looking better
I found this really helpful, thank you
Glad it was helpful!
The components video on the internet Arnau! You made my day dude haha
Glad to see commenting you on youtube as well :)
This is an amazing tutorial! Can you help me please with responsive text when a button is resizing?
Such a good explaination!!
Thanks tina!
Very good explained!
Glad it was helpful!
great tutorial, thank u very much!
Glad it was helpful!
I learned more in this 10 minutes than I did in college courses.
Now thats a comment
This was so helpful and very easy to follow, thank you :)
Tutorialnya sangat bermanfaat pas banget saya lagi cari 🤩🤩🤩🤩
google translate: terima kasih!
Great Job. If I may ask a stupid question, how did you duplicate the circle in all the buttons?
The duplicate shortcut is cmd/ctrl D!
Man you saved my life!
This was great thank you!
Glad you enjoyed it!
Great tutorial, thank you sir. :)
Glad it was helpful!
Thank uuuu, this is very helpful❤
thank you a lot for this tutorial !
Glad it was helpful!
Thank you for this!
Glad it was helpful!
This Tutorial is F Perfect!
best video till now
I appreciate that!
This was amazing
awesome bro! thanks for sharing..
Thanks for the visit
Could you pls do complete figma course tutorial.
It is an amazing video. thx!!
Glad you liked it!
Like shown on 4:48, I am not managing to drag and drop an instance into the master component (but I can do it if it is not an instance but an independent shape). Is anyone facing the same issue?
Any idea what I can do?
I've been trying to move the icon into the button component like he did, but it isn't working
In the icons that you have created, how does one make the square a variant of the circle?
Great stuff !!
Glad you enjoyed it
Think you missed to mention the keyboard shortcut for Windows at 1:53. Would be useful for those of us who are not on a Mac.
Thanks for the reminder, I will do better next videos!
How do people organise their components? Do they keep all of them on a separate assets page or keep them above instances like in the video?
You can do both! Most extensive design systems have a dedicated page
Thank you so much! Very helpful
Thanks Whiney :)
Thank you so much! It helped me a lot :)
Glad it worked out Maeva!
Thank you so much!
Glad it helped!
Hey! thanks so much for this amazing, simple yet detailed explanation! I have a question about the visibility icons option, In my case I'm creating a textfield with a label and a dropdown icon which sticks to the right side. So there's a horizontal gap in the auto layout aligned to the center which keeps the text on the left and the icon on the right. If i create a visibility option for the icon and then turn it off it places the text in the middle instead of keeping it to the right (I hope I explained myself properly) Is there anything to do about that? I'd like for the text to stay on the left when the icon visibility is off.. TIA!
Amazing video
Thanks!
Beautiful vid. Thank you.
Thanks for watching :)
Hey, I'm currently auditing a project, I want to know where he got his components from, he didn't make them himself, is there a way to know such information?
Go ahead! Thank you
Hey Arnau, when changing the button icon to square for the smaller button, the square doesn't resize and kinda sticks to the bottom half of the bottom, how do you adjust that?
Hey, are you using autolayout? you can use the positioning to place the icon where you need it
how can we find out where we have used the same components. can you explain that as well. if we have used component in 10 different layout.
Hey I’m not fully understanding the question
Great one
Thanks!
I am facing a problem with button hover:
1. I have created a base component of a button
2. I make 5 states in the variants of button and linked default with hover (to change it while hover in prototype)
3. No I placed the component in the design. and change "button" to "demo"
4. Now problem is... When I do hover on it in prototype the name change from "demo" to "button"
I think this is because of base component building.
Do you have any solution by using base component and workable hover state in prototype?
Thanks a lot!
Welcome!
Good tutorial
Have you mastered Figma components yet? 👇👇👇
hehe not yet
Yep, I don't use components. After this video I surely master in components. Thanks Bro.
and then they drop variables on us
@@DeepfriedBabyI'm brand new to Figma but not web dev. Curious to know how the new variable feature will change the way components are written?
Component variables just take methodic thinking and navigation of forward thought. It will come and thanks to this video, it will happen faster. Thanks Mr. Ros.
What about icon colors? If you wanted to have, lets say 3 colors for icons, would you create 3 different icon component sets of 3 different colors?
Theres another way of adding the icons in, and you're able to change sizes, colors etc!
Dont see the little button "create content" in Layer, someone knows why?
Figma recently changed their UI a little, I'll make an updated version soon
I have a calendar row which has 3 variants that can change, Info, Status, and Selection. These 3 variants are sub variants to the main component row, is there not a way to have this row pull from the sub variants without having to create each and every versions of the row for it to understand ? It seems to kinda defeat the purpose of having variants if i anyways have to sit and create all the sub versions.
Can you share the figma link in the thread, would love to take a look
amazing video
It's great info. But i can't keep up. The way it is edited, there are no pauses, so that i can absorb what has just been said. I realise it is a trend in online videos to edit out pauses, and that is fine for some video content, e.g a quick documentary or news story. But this is a tutorial, of sorts. So it is very difficult to absorb the information at breakneck speed
Other than that. It is really good. So please don't take it as a criticism. Just feedback
4:51 how do you duplicate the icon into all three component instantly?
super helpful
Glad it helped