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

Figma components are essential building blocks for creating efficient and consistent designs, and mastering their use is crucial for any aspiring designer. We'll start with an overview of Figma components, including their importance and how they can improve your design workflow. Next, we'll dive into creating, editing, and organizing components, exploring the best practices for maximizing their potential. We'll also discuss the powerful capabilities of variants and how to use them to streamline your design process further.
Hire my agency 👇
www.macu.studio
Try my component library (Webflow, Figma, Framer) 👇
www.tilebit.io/figma-components
Learn to become a pro freelancer 👇
ros-design-academy.webflow.io...
Download the Figma file 👇
arnau.lemonsqueezy.com/buy/ae...
----
🚀 Subscribe for more weekly design content
bit.ly/2FQLrO5
🎥 What I use in my videos!
kit.co/arnauros/filming-setup
👨‍💻 Connect with me
arnau.design
🌎 Socials
/ arnau_design
/ arnau_design
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you!

[@ArnauRos]

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

[@melissaviesca2299]

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!

[@Pointy_Bird]

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

[@neeneejones8435]

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

[@MimiSharif]

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

[@Nelly_Pineda]

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

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

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

[@manji1993]

Thanks alot Bro this drove crazy

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

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

[@user-zl8du5vz5j]

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.

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

[@user-pn7tk2re8y]

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!

[@jaypm95]

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

[@ArnauRos]

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

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

[@nikhiltole]

Detailed video. As always superb work✌🏽.

[@ArnauRos]

Thank you 🙌

[@DeanWentzel]

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

[@ArnauRos]

Glad it was helpful!

[@harunbintangmogot7800]

Thank uuuu, this is very helpful❤

[@andresochoa3040]

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

[@ArnauRos]

Thanks Andres! Glad it was helpful :)

[@harshvardhaniitk6499]

so helpful, nice one Arnau

[@ArnauRos]

Glad it was helpful!

[@user-ib1in1lp5t]

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

[@ArnauRos]

Thank you Saim, glad it was helpful!

[@PushanBarman]

Thank you for the tutorial video. Very helpful!

[@ArnauRos]

Thanks for watching!

[@ugo-cd]

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

[@ArnauRos]

Glad it helped!

[@user-tg8bp9ud3z]

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?

[@moonxflair]

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

[@ArnauRos]

Great to hear!

[@whineydo]

Thank you so much! Very helpful

[@ArnauRos]

Thanks Whiney :)

[@Alikk784]

doing god's work brother, much love and appreciation

[@gjimjams]

I found this really helpful, thank you

[@ArnauRos]

Glad it was helpful!

[@Baharsaalehii]

it was very useful. thank you so much!

[@ArnauRos]

Glad it was helpful!

[@amar3lle]

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

[@ArnauRos]

Glad it worked out Maeva!

[@kassiopalmerim2625]

This Tutorial is F Perfect!

[@uwachideraugboaja8902]

This was amazing

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

[@tinachenchen]

Such a good explaination!!

[@ArnauRos]

Thanks tina!

[@Middollo]

Beautiful vid. Thank you.

[@ArnauRos]

Thanks for watching :)

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

[@BaraSHarb]

Go ahead! Thank you

[@Groegtim]

Great tutorial, thank you sir. :)

[@ArnauRos]

Glad it was helpful!

[@elm_0]

Great explanation. You made that very simple

[@ArnauRos]

Glad it was helpful!

[@WowPansa]

your video safe my life. Thank you

[@ArnauRos]

love it thanks!

[@hroman_codes]

This was great thank you!

[@ArnauRos]

Glad you enjoyed it!

[@ridoy51306]

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

[@t-saiga1917]

great tutorial, thank u very much!

[@ArnauRos]

Glad it was helpful!

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

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

[@ywg2443]

It is an amazing video. thx!!

[@ArnauRos]

Glad you liked it!

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

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

[@Rnkwrk]

Straight to the point and well explained! Thanks alot! It helped to save so much time and sanity

[@ArnauRos]

Thank you!

[@armancegelaude]

thank you a lot for this tutorial !

[@ArnauRos]

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

[@nutchaklay]

Thank you so much

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

[@kuldeepjaswal4655]

awesome bro! thanks for sharing..

[@ArnauRos]

Thanks for the visit

[@eleonorabonorva1593]

Very good explained!

[@ArnauRos]

Glad it was helpful!

[@suniljadhav1889]

Really great tutorial on components

[@ArnauRos]

Glad you liked it!

[@vishnukumarancv7191]

Great stuff !!

[@ArnauRos]

Glad you enjoyed it

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

[@alaaalnouri9720]

Great one

[@ArnauRos]

Thanks!

[@rockingnick]

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

[@olha_varnali]

Thanks a lot!

[@ArnauRos]

Welcome!

[@dearestbehold8775]

If we change text then how hower state text will get changed from that default state to hover.... I mean I make diff diff components for all... it takes a lot of time of mine so please tell me

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

[@lorena12333]

amazing video

[@pedrodaniluz4511]

Amazing video

[@ArnauRos]

Thanks!

[@raviblr8227]

Could you pls do complete figma course tutorial.

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

[@HelloWorld40408]

Thank you

[@cutepetres]

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

[@ArnauRos]

Glad it helped!

[@GraveRave]

Excellent!

[@ArnauRos]

Thank you GraveRave!!!

[@mateusvidal3187]

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

[@ArnauRos]

Glad to see commenting you on youtube as well :)

[@akshayambrose]

Good tutorial

[@michaelschultze3595]

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

[@eqharwshaiphace4966]

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

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

[@user-mr2zl5wt6m]

Amazing

[@urxeose]

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?

[@loiuhuiygny7guyguiygk]

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.

[@ArnauRos]

Can you share the figma link in the thread, would love to take a look

[@atharwadeodhar5937]

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?

[@ArnauRos]

Hey, are you using autolayout? you can use the positioning to place the icon where you need it

[@otavioalexandre7575]

amazing!

[@ArnauRos]

thanks!

[@sherinp3690]

best video till now

[@ArnauRos]

I appreciate that!

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

[@nailakhalid956]

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

[@syeddayyanali5113]

Right 👍🏻

[@longlaoneilla1990]

I'm a beginner, and i understood well

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

[@witoldnowakowski8548]

Dzięki dzięki kolego

[@ArnauRos]

you're welcome!

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

[@mahimabisht2730]

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.

[@ArnauRos]

Hey I’m not fully understanding the question

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

[@emilyemslee]

I'm using pen tool to create vector shapes, and I tuned them into components. However, the frames are not the shape of the vector, because of which I cannot use the animation I want (hover).... Is there a way to bend the frames?

[@ArnauRos]

Hey, can you share any links so I could see what you're referring to specifically?

[@user-dp5lt7bd9v]

Very nice

[@ArnauRos]

Thanks

[@dvkerns]

Component offered for download (in exchange for your email address) is not a finished, working, polished component. Seems like a work-in-prgress. Or am I missing something?

[@shelberta]

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

[@JericoStanley]

Why does the copy of one instance not updating when I am editing the main component in Figma?

[@ArnauRos]

Hey, could you explain a bit more here?

[@normaly8760]

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?

[@ArnauRos]

Theres another way of adding the icons in, and you're able to change sizes, colors etc!

[@jhinjhin00_1]

how do i trigger the hover state when prototyping?

[@ArnauRos]

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

[@juan-sebastianponce8065]

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

[@mattyz4769]

I learned more in this 10 minutes than I did in college courses.

[@ArnauRos]

Now thats a comment