MASTER Figma Components in 10 Minutes (Everything You Need To Know)
HTML-код
- Опубликовано: 23 апр 2023
- 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.
💻 Explore Figma Components 👇
www.tilebit.io/figma-components
Download the Figma file 👇
arnau.lemonsqueezy.com/buy/ae...
🛠 Try Figma 👇
bit.ly/3LqgGig
🛠 Figma For Pros 👇
bit.ly/3V5oZmD
🚀 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!
Download the Figma file here: arnau.lemonsqueezy.com/buy/ae6b0b83-c536-42f2-a7dc-a0d5bb0dc981
I literally spent all afternoon trying to figure this out. Your video was so easy to follow! 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 😄
didn't get components until now, very clear explanation, Thanks for sharing!!!🥰🥰
Im a newbie and this was extremely helpful. I am about to master figma components!!
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 alot Bro this drove crazy
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!
Really clearest explanation of Figma Components I've seen so everrrrr! Thank u
Glad it was helpful!
Been working on projects for a while now, and this refresher was awesome! Thank you!
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!
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!
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.
I learned so much from you! I just want say thank you for your amazing tutorial. Keep creating amazing content!
You're very welcome!
Thank uuuu, this is very helpful❤
Go ahead! Thank you
This was amazing
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?
Thanks, a lot. Exactly what I was looking for.
Great to hear!
This tutorial is exactly what have been looking for. You just got a new subscriber. Thank you
Thank you Kayode!
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.
That's the best explanation, I have seen on COMPONENTS. Hats off to you.
Thank you Saim, glad it was helpful!
This is so powerful.
it's like react components, but in figma!
Very good tutorial! Very smart techniques for components in Figma!! Thanks!!
Thanks Andres! Glad it was helpful :)
Detailed video. As always superb work✌🏽.
Thank you 🙌
Thank you for the tutorial video. Very helpful!
Thanks for watching!
Great tutorial, thank you sir. :)
Glad it was helpful!
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 :)
your video safe my life. Thank you
love it thanks!
Great explanation. You made that very simple
Glad it was helpful!
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!
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
Such a good explaination!!
Thanks tina!
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!
Thank you so much! Very helpful
Thanks Whiney :)
It is an amazing video. thx!!
Glad you liked it!
it was very useful. thank you so much!
Glad it was helpful!
This was great thank you!
Glad you enjoyed it!
Really great tutorial on components
Glad you liked it!
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!
Beautiful vid. Thank you.
Thanks for watching :)
Thank you so much! It helped me a lot :)
Glad it worked out Maeva!
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!
Good tutorial
awesome bro! thanks for sharing..
Thanks for the visit
Bro casually explained the meaning of life. Nice one! keep em coming.
Thanks! Will do!
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!
amazing video
Thank a lot man. That really was a helpful tutorial.
Glad it helped!
great tutorial, thank u very much!
Glad it was helpful!
thank you a lot for this tutorial !
Glad it was helpful!
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!
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
Great stuff !!
Glad you enjoyed it
This is fantastic feature.
and its only getting better!
The components video on the internet Arnau! You made my day dude haha
Glad to see commenting you on youtube as well :)
Could you pls do complete figma course tutorial.
Great one
Thanks!
Amazing video
Thanks!
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!
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!
Thank you
Thanks a lot!
Welcome!
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?
Excellent!
Thank you GraveRave!!!
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
Straight to the point and well explained! Thanks alot! It helped to save so much time and sanity
Thank you!
Amazing
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?
best video till now
I appreciate that!
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
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!
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?
Very nice
Thanks
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!
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 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
I learned more in this 10 minutes than I did in college courses.
Now thats a comment
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 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
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
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?
Hey, can you share any links so I could see what you're referring to specifically?
Why does the copy of one instance not updating when I am editing the main component in Figma?
Hey, could you explain a bit more here?
how do i trigger the hover state when prototyping?
Do you mean in the designer or during the preview mode?
Dzięki dzięki kolego
you're welcome!
Probably going to watch this a few times to really get it. 😂
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
Hard to understand but seems good.
thats the spirit
im still confused how you made the Icons component, as example, i want to create other variants other than square when i click variant button, obviously it will create another variant as square, but i want to change it into triangle, how to do that?
is still didn't get it how you make independent component icons like in 5:44
@arifarrafi3302 if you import an icon library, you will then have them in the asset panel. But first you need to find the library you want and import that
@arifarrafi3302 if you import an icon library, you will then have them in the asset panel. But first you need to find the library you want and import that
hmm i see, thx@@ArnauRos
You my favorite
Can you put english subtitle? Some of us are not the native and I want to understand your explanation more. Thank you in advance.
Sorry about that! I thought uoutube created subtitles automatically
@@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
@giooadrians thanks for the suggestions! I will look into it :)
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
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.
You are very fast))
Thank you random dude from internet
Here to help!
So confusing jezz xD
how can i help!
At that moment you selected 3 variants, I stopped. Because if you will make optional border (x2), several button icons (x10) etc, you will say “ Please select these 180 variants and then…” You will lost the strength of OOP theory. (“Object” is called “component” here, in Figma.)
sure
Too bad it still clunky to prototype in for anything advanced even with interactive components compared to Axure or Framer
figma is clunky compared to framer?
Its great, but too fast to follow. I have to keep pausing. Could use a bit of breathing room.
Noted!