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.
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❤
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 ♥
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.
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.
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
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
🙏 gifted capability to simplify stuffs.. you can do another video with added two set of complexity in this - light/dark mode & multi-language handling.
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?
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
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 ?
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?
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?
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.
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?
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
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! 🙂
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 is the highest form of teaching! Frikking gold mine
This is such a fantastic tutorial, Chethan. It is really a blessing to have this content for free. To getting 100x better 🥂
No one has explained about components in such detail. Thank you Chetan :)
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❤
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 ♥
one of the best tutorials I have ever seen(since last 15yrs).. hats off to your skills and detailing's in the video
🔥🔥🔥
Thank you 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.
It's Literally Awesome Chethan....! 💖
This is the tutorial I have been looking for.
GREAT VIDEO OF COMPONENTS AND BASE COMPONENTS , I ALREADY LEARN AUTO LAYOUT FROM YOUR VIDEO , THAT ALSO THE GREAT ONE , THANK YOU CHETHAN
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!
11:36 So good to know this. Otherwise, I'd be making multiple variants for buttons with icons and without icons
Chethan you are so so so so great in this field thank you so much for this much knowledge
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
Thanks you very much Chetan!
Awesome man...This is going to be crazy series..💯
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.🙌
Hey chethan!! Are base components still relevant after the " expose from nested instances "feature ? i feel its quite easier and straightforward in nested instances.
Nice... Excited
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
Wow nice... Another episode, super excited
Great stuff
Thanks for the tutorial ❤
Great content as always! Thank you
please make some more indepth video like this.
I enjoyed this, very awesome content, up next is app critique🚀
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. 🙌🙌❤️
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🚀❤
You the best bro!
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
Great video. Thank you so much!!
🙏 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!
Just amazing sir, remember me I'm Aakash
This topic is like Inception movie for designers
Lol
Thank you so much ❤
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.
Hey bhagwan apki ummer lambi hoo adbhut jsut awesome
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
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
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
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 ?
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 ❤️🙏
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
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
Thank you bro 😊❤️ but I have a question how to add emo?
Google that please
Consistency 💯
Hey Chethan, I am unable to find the instance swap at 33:29? It is showing only Boolean.
Send me your Figma file
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 🙏🙏
how do you get the emoji keyboard? I use a plugin but it's not as fast
Control + Command + Space
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
33.29 I can't find the instance property..😢😢
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.
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
can you change the video title to how to become Figma God haha
Haha