MASTER Figma Components in 10 Minutes (Everything You Need To Know)

[@ArnauRos]

Download the Figma file here: arnau.lemonsqueezy.com/buy/ae6b0b83-c536-42f2-a7dc-a0d5bb0dc981

[@beeshep]

If you are coming to this with the newest Figma tool update, the "create text property" is now under Typography.

[@hunterthompson5252]

Thanks for that tip ;)

[@eraybaydemir9689]

Thank u sooo much

[@rafael_luiz_97]

I can't find it. I swear to God, the closest thing I found was under Typography: 'Apply Styles' > 'Create Style.' PS: I'm a beginner with this tool.

[@freedomofspeech2100]

@@rafael_luiz_97 Did you find it?

[@freedomofspeech2100]

nevermind I found it. I'm leaving a new comment here for the solution

[@honeylavender1122]

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]

Great suggestion!

[@annafilou]

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!

[@ArnauRos]

Thanks Anna, glad you liked the video!

[@richwatters]

This is the clearest explanation of Figma Components I've seen so far! Thanks👍

[@ArnauRos]

Thanks Richard! Do you use components and variants in your designs or do you design without them?

[@richwatters]

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

[@ArnauRos]

Thats great, XD, sketch, figma, they all have similar functions. Hopefully its not too hard to switch over to Figma

[@DeepfriedBaby]

Seriously. Every other video they start creating a whole website or app. Waterboarding me with font selections.

[@neeneejones8435]

Im a newbie and this was extremely helpful. I am about to master figma components!!

[@jaypm95]

Been working on projects for a while now, and this refresher was awesome! Thank you!

[@ArnauRos]

Glad it was helpful!

[@kemal6039]

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!

[@ArnauRos]

Great to hear happy it helped :)

[@olehboilo]

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🎉

[@ArnauRos]

Thats great! I debated adding it to the video, glad to see it was helpful :)

[@Kefmoles]

This tutorial is exactly what have been looking for. You just got a new subscriber. Thank you

[@ArnauRos]

Thank you Kayode!

[@Nelly_Pineda]

didn't get components until now, very clear explanation, Thanks for sharing!!!🥰🥰

[@jmanh128]

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!

[@ArnauRos]

Glad it helped!

[@spinneraz]

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 😄

[@charliegh2933]

IT FINALLY MAKES SENSE. Thank you. Seriously.

[@DeanWentzel]

Really clearest explanation of Figma Components I've seen so everrrrr! Thank u

[@ArnauRos]

Glad it was helpful!

[@Pointy_Bird]

I literally spent all afternoon trying to figure this out. Your video was so easy to follow! Thank you :)

[@cannonleo]

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

[@movi-longevity9024]

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.

[@ArnauRos]

Glad it helped!

[@nathn1680]

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

[@ArnauRos]

Thanks for watching!

[@nikhiltole]

Detailed video. As always superb work✌🏽.

[@ArnauRos]

Thank you 🙌

[@JuhyungLee-n2y]

This video for creating variant buttons is the best among other button tutorials! This is so specific! Thank you so much! ❤

[@ArnauRos]

Glad you like it!

[@mariadecat]

I can't find that video?

[@maguipezzm692]

I watched once and I got the results following steps but also understood how instances and propeties work, very clear. Thank you!

[@ArnauRos]

Glad it helped!

[@rinatsirazetdinov7474]

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!

[@ArnauRos]

I appreciate that!

[@PeculiarUXPeculiarUX]

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.

[@layloos]

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

[@AniketEdot]

Great video. Learned a lot. thanks for making this

[@SaimAli-j9w]

That's the best explanation, I have seen on COMPONENTS. Hats off to you.

[@ArnauRos]

Thank you Saim, glad it was helpful!

[@utkarshdutta3606]

Thankyou for these easy and proper lesson

[@cutepetres]

Thank a lot man. That really was a helpful tutorial.

[@ArnauRos]

Glad it helped!

[@manji1993]

Thanks alot Bro this drove crazy

[@愤怒乐平]

I learned so much from you! I just want say thank you for your amazing tutorial. Keep creating amazing content!

[@ArnauRos]

You're very welcome!

[@Jaaayseb]

Dont see the little button "create content" in Layer, someone knows why?

[@ArnauRos]

Figma recently changed their UI a little, I'll make an updated version soon

[@harshvardhaniitk6499]

so helpful, nice one Arnau

[@ArnauRos]

Glad it was helpful!

[@elm_0]

Great explanation. You made that very simple

[@ArnauRos]

Glad it was helpful!

[@cinamoon_lol]

thank you so muchhhhhhhhh this is SUPER HELPFUL!!

[@ArnauRos]

wooooo

[@suniljadhav1889]

Really great tutorial on components

[@ArnauRos]

Glad you liked it!

[@nailakhalid956]

Although i am not beginner of figma,,, but you made me confused about components,,, needs more clarification in your tutorial

[@threeamhustler]

Right 👍🏻

[@longlaoneilla1990]

I'm a beginner, and i understood well

[@yilliot]

4:51 how do you duplicate the icon into all three component instantly?

[@Alikk784]

doing god's work brother, much love and appreciation

[@PushanBarman]

Thank you for the tutorial video. Very helpful!

[@ArnauRos]

Thanks for watching!

[@KidNasEasy]

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.

[@ArnauRos]

Yes, I need to do an updated version for this!

[@moonxflair]

Thanks, a lot. Exactly what I was looking for.

[@ArnauRos]

Great to hear!

[@tinachenchen]

Such a good explaination!!

[@ArnauRos]

Thanks tina!

[@heladixman-kt5nf]

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❤‍🔥

[@ArnauRos]

Fantastic!

[@eqharwshaiphace4966]

I've been trying to move the icon into the button component like he did, but it isn't working

[@eleonorabonorva1593]

Very good explained!

[@ArnauRos]

Glad it was helpful!

[@Baharsaalehii]

it was very useful. thank you so much!

[@ArnauRos]

Glad it was helpful!

[@honeynair6962]

Great video! Although theres an option for nested instance too. Which can let you call that instance within. Instead of separating the icon component.

[@ArnauRos]

Yes! You can do it both ways for sure

[@myl0000ve]

drop a vid?

[@georgecyprian6166]

Thank You It was very Helpful 🎉

[@andresochoa3040]

Very good tutorial! Very smart techniques for components in Figma!! Thanks!!

[@ArnauRos]

Thanks Andres! Glad it was helpful :)

[@FoodAndPlaces0]

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

[@ArnauRos]

great! glad it helped

[@kassiopalmerim2625]

This Tutorial is F Perfect!

[@ugo-cd]

This is AMAZING!!! tHANK YOU!!! this will save me lot of time

[@ArnauRos]

Glad it helped!

[@gjimjams]

I found this really helpful, thank you

[@ArnauRos]

Glad it was helpful!

[@WowPansa]

your video safe my life. Thank you

[@ArnauRos]

love it thanks!

[@t-saiga1917]

great tutorial, thank u very much!

[@ArnauRos]

Glad it was helpful!

[@mujahidazzam]

Tutorialnya sangat bermanfaat pas banget saya lagi cari 🤩🤩🤩🤩

[@ArnauRos]

google translate: terima kasih!

[@mateusvidal3187]

The components video on the internet Arnau! You made my day dude haha

[@ArnauRos]

Glad to see commenting you on youtube as well :)

[@uwachideraugboaja8902]

This was amazing

[@armancegelaude]

thank you a lot for this tutorial !

[@ArnauRos]

Glad it was helpful!

[@harunbintangmogot7800]

Thank uuuu, this is very helpful❤

[@1keerimova]

This is an amazing tutorial! Can you help me please with responsive text when a button is resizing?

[@hroman_codes]

This was great thank you!

[@ArnauRos]

Glad you enjoyed it!

[@lilly-28920]

Thank you for this!

[@ArnauRos]

Glad it was helpful!

[@Groegtim]

Great tutorial, thank you sir. :)

[@ArnauRos]

Glad it was helpful!

[@AmeeshaRameshKumar]

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?

[@lorenzoninivaggi7443]

Man you saved my life!

[@ridoy51306]

This is so powerful. it's like react components, but in figma!

[@rockingnick]

In the icons that you have created, how does one make the square a variant of the circle?

[@sherinp3690]

best video till now

[@ArnauRos]

I appreciate that!

[@vishnukumarancv7191]

Great stuff !!

[@ArnauRos]

Glad you enjoyed it

[@ywg2443]

It is an amazing video. thx!!

[@ArnauRos]

Glad you liked it!

[@_nightfall_artist]

The first thing I did after this video is to subscribe to your channel. Thanks I your videos learnt a lot in 10min.

[@ArnauRos]

Thank you Saina!

[@EduardBP]

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.

[@ArnauRos]

Thanks for the reminder, I will do better next videos!

[@MimiSharif]

This was so helpful and very easy to follow, thank you :)

[@shelberta]

Probably going to watch this a few times to really get it. 😂

[@kuldeepjaswal4655]

awesome bro! thanks for sharing..

[@ArnauRos]

Thanks for the visit

[@lujaintaha6099]

Thank you so much!

[@ArnauRos]

Glad it helped!

[@BaraSHarb]

Go ahead! Thank you

[@made_by_bea]

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 ❤🎉

[@ArnauRos]

Glad it was helpful!

[@whineydo]

Thank you so much! Very helpful

[@ArnauRos]

Thanks Whiney :)

[@artofgiselle]

For anyone looking for the "component" button (if it's not on the top for you), you can find it on the top right under the Design and Prototype tabs. The variant action is also going to be on the right around the same area.

[@ArnauRos]

i need to redo this vid

[@OGUNDIRANTOLULOPE-zc1nf]

​@@ArnauRos pls do I'm finding it hard to locate the create text component rn watch the tutorial.

[@michaellanre898]

Great Job. If I may ask a stupid question, how did you duplicate the circle in all the buttons?

[@ArnauRos]

The duplicate shortcut is cmd/ctrl D!

[@Middollo]

Beautiful vid. Thank you.

[@ArnauRos]

Thanks for watching :)

[@giooadrians]

Can you put english subtitle? Some of us are not the native and I want to understand your explanation more. Thank you in advance.

[@ArnauRos]

Sorry about that! I thought uoutube created subtitles automatically

[@giooadrians]

@@ArnauRos Yes but it's kinda mess. Maybe you can add it in the future. This video helps me a lot. I just started using figma thanks a lot please do more of lesson like this and created into playlist haha just suggestions

[@ArnauRos]

@giooadrians thanks for the suggestions! I will look into it :)

[@mischugo]

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.

[@ArnauRos]

yeah variables are a different beast, need to make a video abouit it

[@alaaalnouri9720]

Great one

[@ArnauRos]

Thanks!

[@RamanSharma-zk1bj]

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?

[@ArnauRos]

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

[@raviblr8227]

Could you pls do complete figma course tutorial.

[@Meloco3]

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!

[@amar3lle]

Thank you so much! It helped me a lot :)

[@ArnauRos]

Glad it worked out Maeva!

[@olha_varnali]

Thanks a lot!

[@ArnauRos]

Welcome!

[@pedrodaniluz]

Amazing video

[@ArnauRos]

Thanks!

[@HelloWorld40408]

Thank you

[@I_am_AlmasBhisti]

underrated!

[@nutchaklay]

Thank you so much

[@jhinjhin00_1]

how do i trigger the hover state when prototyping?

[@ArnauRos]

Do you mean in the designer or during the preview mode?

[@paramtapkaushal2292]

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?

[@XiagraBalls]

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?

[@ArnauRos]

You can do both! Most extensive design systems have a dedicated page

[@Pudidigimang]

6:43 can't find the layer panel :(( how to turn on and turn off the icon please help 😵

[@ArnauRos]

sorry, figma just updated their UI i need to make a new vid

[@Pudidigimang]

@@ArnauRos ouhh, thank you for the answer, I've already figure it out how to turn the icon on and off.😊