Being an experienced designer, I'm literally blown up. I wasn't aware of most of these things because I already have a vast design system in my company. I knew how to use these but always wondered how to build them. Mind-blowing content; you deserve a hell lot of views.
Broo this is sick!! After watching your content i am feeling like I found the ultimate treasure. Keep the work coming. So excited! Thank you so much for this! Much love brother ♥
I never imagined that components could be taught and created using such wonderful methods and explanations. The effort and topic coverage is mind-blowing. Thank you for creating this, Chethan❤
You. Are. Amazing. I've been struggling with this stuff for so long and you explained every piece perfectly and with great examples and humor. I'll definitely be subscribing and heading here for other design tutorials and guides. Thank you.
Hey chethan!! Are base components still relevant after the " expose from nested instances "feature ? i feel its quite easier and straightforward in nested instances.
Wonderful tutorial, for sure I am going to use base components in all my future projects... just want to add that figma updated one thing which is now we can select preferred components for instance swap so no need to apply that naming convention manually
At 24:30 where you talk about instance swap properties, I guess figma added a new way to make it less cluttery, by introducing the “preferred values” list, where we can add just the components that we want, do you think it’s better with that now?
Extremely thoughtful video. But, I didn't find the component Text property useless. If you have multiple buttons and the name change is required in no. of buttons, you can do it through Text property at once instead going to each button and doing it.
Hey Chethan, This video helped me a lot in understanding component properties & variants. Really Thank You.❤ I searched a lot but was unable to understand what are base components & how we create those? Can you please share a good resource to understand the concept of Base components.
🙏 gifted capability to simplify stuffs.. you can do another video with added two set of complexity in this - light/dark mode & multi-language handling.
I have a question why did u remove the tags status (success, error) from its container and used them as individual components , i was having a problem with the swap property but when i removed the container it worked , i just wanted to make sure i understood it very well , so what happened?? at 42:00
I just did it so that I could prevent going an extra level to change between success, error and neutral. It also made me use instance swap. Ideally both options are fine.
i have the same problem as well , also the Boolean property i cant see any toggle like in the video , is it because im in the free plan of figma or there is something i have doing wrong , help me pleeaaase
Very nicely explained, thank you so much for your efforts to make this video. Can please create video on Android UI measurements,dimension, layout 8pt grid, 10pt grid. 🙏. Thank so much. Very informative video
Well when I was practicing this I Sawed Figma now introduced preferred values options in instance swap. Does that mean we don't have to make base components now?
Revisiting this course, Did any anything change soince this course is published or are we still using base components now ? did figma bring any new ways to make this less complicated ?
Wow. Very good tutorial. I have some problems because I don't know English. But anyway. two questions: you say Base Components, but I don't see the underscore in the component name. And, what is that icon in the design panel. This little cirrcle with the arrow?
Same. I'm super confused. Especially going back and forth between different conventions now I don't understand what is correct and what is not lol. @DesignPilot would appreciate a refresher 🙏🏼
@@DesignPilot For me the problem starts at 49:24 where I'm not able to select the checkbox icon and then add an instance swap, it just shows boolean. I checked your original file and copied the checkbox from there and I still couldn't add instance swap + I know this is asking too much but can you make a new video explaining only the best practices? I have watched this 3 times and still find it really confusing. Or if you can't can you navigate me to a resource/video that does a good job explaining it. Would really appreciate the help
Don't you think the text property is useful as you don't have to go back to the instance just to change the text after you have made changes to other properties?
19:30 ( I can't find this video, Is that title or thumbnail changed? )
The Ultimate Guide to Figma's Auto Layout: Design and Construct UI Components like a Pro in Figma!
ruclips.net/video/fDemGEmKy0c/видео.html
@@DesignPilot I thought it would be, Just a Confusion! 🙂
This is the highest form of teaching! Frikking gold mine
🔥🔥🔥
Thank you Chethan!
Being an experienced designer, I'm literally blown up.
I wasn't aware of most of these things because I already have a vast design system in my company.
I knew how to use these but always wondered how to build them. Mind-blowing content; you deserve a hell lot of views.
This video taught me to be master in Figma Component, Thank You Bro
No one has explained about components in such detail. Thank you Chetan :)
This is such a fantastic tutorial, Chethan. It is really a blessing to have this content for free. To getting 100x better 🥂
Broo this is sick!! After watching your content i am feeling like I found the ultimate treasure. Keep the work coming. So excited!
Thank you so much for this!
Much love brother ♥
I never imagined that components could be taught and created using such wonderful methods and explanations. The effort and topic coverage is mind-blowing. Thank you for creating this, Chethan❤
one of the best tutorials I have ever seen(since last 15yrs).. hats off to your skills and detailing's in the video
11:36 So good to know this. Otherwise, I'd be making multiple variants for buttons with icons and without icons
You. Are. Amazing. I've been struggling with this stuff for so long and you explained every piece perfectly and with great examples and humor. I'll definitely be subscribing and heading here for other design tutorials and guides. Thank you.
You are such an amazing teacher. Thank you for the work, Chethan.
this was mind blowing stuff Chethan!! so much complexity goes while building these components but you explained so well!! thank you so much!
GREAT VIDEO OF COMPONENTS AND BASE COMPONENTS , I ALREADY LEARN AUTO LAYOUT FROM YOUR VIDEO , THAT ALSO THE GREAT ONE , THANK YOU CHETHAN
Chethan you are so so so so great in this field thank you so much for this much knowledge
It's Literally Awesome Chethan....! 💖
This is the tutorial I have been looking for.
Awesome man...This is going to be crazy series..💯
Thanks for the tutorial ❤
Thanks you very much Chetan!
Great content as always! Thank you
Hey chethan!! Are base components still relevant after the " expose from nested instances "feature ? i feel its quite easier and straightforward in nested instances.
Wow nice... Another episode, super excited
Nice... Excited
I enjoyed this, very awesome content, up next is app critique🚀
Wonderful tutorial, for sure I am going to use base components in all my future projects...
just want to add that figma updated one thing which is now we can select preferred components for instance swap so no need to apply that naming convention manually
Yeah. This tutorial was made before Figma added those features
Great video. Thank you so much!!
Just teaching like a waoo !! 🙌
🤣🤣🤣
@@DesignPilot I can't tell you how much I was struggling 😢. and all of a sudden i found your video. You are a true saviour for me . Big fan now. 🙌🙌❤️
At 24:30 where you talk about instance swap properties, I guess figma added a new way to make it less cluttery, by introducing the “preferred values” list, where we can add just the components that we want, do you think it’s better with that now?
Yess
Just amazing sir, remember me I'm Aakash
You the best bro!
Great stuff
Thank you so much ❤
Extremely thoughtful video. But, I didn't find the component Text property useless. If you have multiple buttons and the name change is required in no. of buttons, you can do it through Text property at once instead going to each button and doing it.
Maybe
Hey Chethan, This video helped me a lot in understanding component properties & variants. Really Thank You.❤ I searched a lot but was unable to understand what are base components & how we create those? Can you please share a good resource to understand the concept of Base components.
Base components might not be that relevant anymore because Component Properties have a lot more features in Figma today
@@DesignPilot ohh okay! Thank you so much. I thought the same but still wanted to make sure.🙌
Hello 👋
Please make a single playlist on all these new videos.
It’s in a Playlist called the Mega Product Design Course for Beginners
@@DesignPilot The Best Course on RUclips till date🚀❤
🙏 gifted capability to simplify stuffs..
you can do another video with added two set of complexity in this - light/dark mode & multi-language handling.
Totally!
I have a question why did u remove the tags status (success, error) from its container and used them as individual components , i was having a problem with the swap property but when i removed the container it worked , i just wanted to make sure i understood it very well , so what happened?? at 42:00
I just did it so that I could prevent going an extra level to change between success, error and neutral. It also made me use instance swap.
Ideally both options are fine.
@@DesignPilot yeah i got it now, thanks a bunch 🙏🙏
Hey Chethan, I am unable to find the instance swap at 33:29? It is showing only Boolean.
Send me your Figma file
Is the new variable feature on figma a replacement for variants? Please can you do a tutorial on variables? Thank you!
Variables and Variants have nothing to do with each other. Yes, I’m working on a new course that will cover variables.
This topic is like Inception movie for designers
Lol
please make some more indepth video like this.
Hey bhagwan apki ummer lambi hoo adbhut jsut awesome
Thank you bro 😊❤️ but I have a question how to add emo?
Google that please
Does anyone else not get the 'content' property on the button text? Im lostttt. Thanks for such an in depth video!
i have the same problem as well , also the Boolean property i cant see any toggle like in the video , is it because im in the free plan of figma or there is something i have doing wrong , help me pleeaaase
@cherry-lp8yq You should be able to see it. Doesn’t depend on the plan
We learned from you ,one curious question from where you learned all of it?
Well, when you get into the industry and work at companies that that have really good design teams, you learn there.
Very nicely explained, thank you so much for your efforts to make this video.
Can please create video on Android UI measurements,dimension, layout 8pt grid, 10pt grid. 🙏.
Thank so much. Very informative video
Just watch my first few videos on the playlist
I'm Beginner, you explained very nice but we want all yours tutorial in hindi for ... jo Hindi medium se hai please help us. Thank you
Well when I was practicing this I Sawed Figma now introduced preferred values options in instance swap. Does that mean we don't have to make base components now?
I have a video called Expose Nested Instances. You can watch that.
@@DesignPilot ok thanks a lot ❤️🙏
Revisiting this course, Did any anything change soince this course is published or are we still using base components now ? did figma bring any new ways to make this less complicated ?
Still the same
@@DesignPilot preferred values does the same job right ?
Consistency 💯
Wow. Very good tutorial. I have some problems because I don't know English. But anyway. two questions: you say Base Components, but I don't see the underscore in the component name.
And, what is that icon in the design panel. This little cirrcle with the arrow?
You need to type the underscore. That icon is to create a component property.
@@DesignPilot Thanks. Will have a look
Isn't there also a way to swap colors instead of searching endlessly in palettes? Any tutorial about that ;-)
It comes down to better organisation of colors. My videos on Color styles should help
The component properties are still not mature enough to be used in scalable design systems, so I hope Figma is listening to community feedback.
Yeah. I mentioned that in the video when I spoke about Variant Swapping
how do you get the emoji keyboard? I use a plugin but it's not as fast
Control + Command + Space
33.29 I can't find the instance property..😢😢
33:29 i can only find Boolean property...can anyone assist me?😅
Same. I'm super confused. Especially going back and forth between different conventions now I don't understand what is correct and what is not lol. @DesignPilot would appreciate a refresher 🙏🏼
A Boolean property can only found on the LAYERS section of the inspector panel.
@@DesignPilot For me the problem starts at 49:24 where I'm not able to select the checkbox icon and then add an instance swap, it just shows boolean. I checked your original file and copied the checkbox from there and I still couldn't add instance swap + I know this is asking too much but can you make a new video explaining only the best practices? I have watched this 3 times and still find it really confusing. Or if you can't can you navigate me to a resource/video that does a good job explaining it. Would really appreciate the help
Don't you think the text property is useful as you don't have to go back to the instance just to change the text after you have made changes to other properties?
I don’t really think it makes any difference whatsoever. Just a personal opinion
great course ... figma turning into a messy design tool adding all thise complocated tools which we hardly use in real life
That’s absolutely not true. Auto Layout and Component properties are heavily used. It’s impossible to build a robust design system without them.
can you change the video title to how to become Figma God haha
Haha