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

Подписаться 65 тыс.

Просмотров 238 тыс.

50% 1

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...
Learn to become a pro freelancer 👇
ros-design-aca...
Download the Figma file 👇
arnau.lemonsqu...
----
🚀 Subscribe for more weekly design content
bit.ly/2FQLrO5
🎥 What I use in my videos!
kit.co/arnauro...
👨‍💻 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!

Опубликовано:

10 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 226

@ArnauRos 5 месяцев назад

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

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

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

@annafilou 6 месяцев назад

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 6 месяцев назад

Thanks Anna, glad you liked the video!

@neeneejones8435 Год назад

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

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

@spinneraz 3 месяца назад

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 😄

@jaypm95 5 месяцев назад

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

@ArnauRos 5 месяцев назад

Glad it was helpful!

@nathn1680 6 месяцев назад

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 6 месяцев назад

Thanks for watching!

@DeanWentzel 4 месяца назад

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

@ArnauRos 4 месяца назад

Glad it was helpful!

@Pointy_Bird 4 месяца назад

I literally spent all afternoon trying to figure this out. Your video was so 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

@user-uj2ln8bd2r 11 дней назад

Great video. Learned a lot. thanks for making this

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

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

@Kefmoles Год назад

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

@ArnauRos Год назад

Thank you Kayode!

@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 11 месяцев назад

I appreciate that!

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

@ridoy51306 5 месяцев назад

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

@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

@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 11 месяцев назад

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 11 месяцев назад

Fantastic!

@maguipezzm692 8 месяцев назад

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

@ArnauRos 8 месяцев назад

Glad it helped!

@utkarshdutta3606 26 дней назад

Thankyou for these easy and proper lesson

@user-ib1in1lp5t Год назад

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

@ArnauRos Год назад

Thank you Saim, glad it was helpful!

@Alikk784 2 месяца назад

doing god's work brother, much love and appreciation

@nailakhalid956 Год назад

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

@threeamhustler 5 месяцев назад

Right 👍🏻

@longlaoneilla1990 4 месяца назад

I'm a beginner, and i understood well

@KidNasEasy 6 месяцев назад

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 6 месяцев назад

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

@nikhiltole Год назад

Detailed video. As always superb work✌🏽.

@ArnauRos Год назад

Thank you 🙌

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

@AmeeshaRameshKumar 4 месяца назад

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?

@manji1993 Год назад

Thanks alot Bro this drove crazy

@kassiopalmerim2625 Месяц назад

This Tutorial is F Perfect!

@georgecyprian6166 23 дня назад

Thank You It was very Helpful 🎉

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

@ArnauRos Год назад

Have you mastered Figma components yet? 👇👇👇

@6bictjmc181 Год назад

hehe not yet

@_nightfall_artist Год назад

Yep, I don't use components. After this video I surely master in components. Thanks Bro.

@DeepfriedBaby Год назад

and then they drop variables on us

@justinoneill2837 Год назад

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

@Kickdrumsnare 11 месяцев назад

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.

@gjimjams 2 месяца назад

I found this really helpful, thank you

@ArnauRos 2 месяца назад

Glad it was helpful!

@honeynair6962 9 месяцев назад

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 9 месяцев назад

Yes! You can do it both ways for sure

@myl0000ve 8 месяцев назад

drop a vid?

@eqharwshaiphace4966 Месяц назад

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

@ugo-cd 2 месяца назад

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

@ArnauRos 2 месяца назад

Glad it helped!

@moonxflair 4 месяца назад

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

@ArnauRos 4 месяца назад

Great to hear!

@WowPansa 4 месяца назад

your video safe my life. Thank you

@ArnauRos 4 месяца назад

love it thanks!

@elm_0 7 месяцев назад

Great explanation. You made that very simple

@ArnauRos 7 месяцев назад

Glad it was helpful!

@andresochoa3040 Год назад

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

@ArnauRos Год назад

Thanks Andres! Glad it was helpful :)

@PushanBarman Год назад

Thank you for the tutorial video. Very helpful!

@ArnauRos Год назад

Thanks for watching!

@harshvardhaniitk6499 3 месяца назад

so helpful, nice one Arnau

@ArnauRos 3 месяца назад

Glad it was helpful!

@urxeose 6 месяцев назад

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?

@RamanSharma-zk1bj 3 месяца назад

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 3 месяца назад

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

@MimiSharif Месяц назад

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

@Baharsaalehii Год назад

it was very useful. thank you so much!

@ArnauRos Год назад

Glad it was helpful!

@Groegtim 4 месяца назад

Great tutorial, thank you sir. :)

@ArnauRos 4 месяца назад

Glad it was helpful!

@Promise_Dev_Code 15 дней назад

The Shift + cmd is not working in my design please help me

@suniljadhav1889 9 месяцев назад

Really great tutorial on components

@ArnauRos 9 месяцев назад

Glad you liked it!

@1keerimova 22 дня назад

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

@mateusvidal3187 Год назад

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

@ArnauRos Год назад

Glad to see commenting you on youtube as well :)

@dvkerns 4 месяца назад

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?

@eleonorabonorva1593 3 месяца назад

Very good explained!

@ArnauRos 3 месяца назад

Glad it was helpful!

@t-saiga1917 10 месяцев назад

great tutorial, thank u very much!

@ArnauRos 9 месяцев назад

Glad it was helpful!

@rockingnick 2 месяца назад

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

@tinachenchen Год назад

Such a good explaination!!

@ArnauRos Год назад

Thanks tina!

@harunbintangmogot7800 10 месяцев назад

Thank uuuu, this is very helpful❤

@nutchaklay 2 месяца назад

Thank you so much

@armancegelaude 11 месяцев назад

thank you a lot for this tutorial !

@ArnauRos 11 месяцев назад

Glad it was helpful!

@shelberta 5 месяцев назад

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

@sherinp3690 Год назад

best video till now

@ArnauRos Год назад

I appreciate that!

@hroman_codes 6 месяцев назад

This was great thank you!

@ArnauRos 6 месяцев назад

Glad you enjoyed it!

@whineydo Год назад

Thank you so much! Very helpful

@ArnauRos Год назад

Thanks Whiney :)

@Jaaayseb 11 месяцев назад

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

@ArnauRos 11 месяцев назад

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

@uwachideraugboaja8902 5 месяцев назад

This was amazing

@BaraSHarb 4 месяца назад

Go ahead! Thank you

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

@mattyz4769 10 месяцев назад

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

@ArnauRos 10 месяцев назад

Now thats a comment

@amar3lle Год назад

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

@ArnauRos Год назад

Glad it worked out Maeva!

@yilliot Месяц назад

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

@ywg2443 9 месяцев назад

It is an amazing video. thx!!

@ArnauRos 9 месяцев назад

Glad you liked it!

@mischugo 4 месяца назад

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 4 месяца назад

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

@olha_varnali 7 месяцев назад

Thanks a lot!

@ArnauRos 7 месяцев назад

Welcome!

@Middollo Год назад

Beautiful vid. Thank you.

@ArnauRos Год назад

Thanks for watching :)

@dearestbehold8775 11 месяцев назад

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

@XiagraBalls 10 месяцев назад

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 10 месяцев назад

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

@rafaellanigri7959 Месяц назад

I couln't find the Content option...

@mahimabisht2730 11 месяцев назад

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 11 месяцев назад

Hey I’m not fully understanding the question

@loiuhuiygny7guyguiygk 7 месяцев назад

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 7 месяцев назад

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

@kuldeepjaswal4655 10 месяцев назад

awesome bro! thanks for sharing..

@ArnauRos 9 месяцев назад

Thanks for the visit

@emilyemslee 8 месяцев назад

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 8 месяцев назад

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

@cutepetres 7 месяцев назад

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

@ArnauRos 7 месяцев назад

Glad it helped!

@vishnukumarancv7191 10 месяцев назад

Great stuff !!

@ArnauRos 9 месяцев назад

Glad you enjoyed it

@pedrodaniluz4511 4 месяца назад

Amazing video

@ArnauRos 3 месяца назад

Thanks!

@alaaalnouri9720 7 месяцев назад

Great one

@ArnauRos 7 месяцев назад

Thanks!

@Meloco3 6 месяцев назад

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!

@normaly8760 8 месяцев назад

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 8 месяцев назад

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

@EduardBP 11 месяцев назад

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 11 месяцев назад

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

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

@atharwadeodhar5937 10 месяцев назад

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 9 месяцев назад

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