Really loved your video! Very informative and filled with great tips. Thanks for taking the time to explain how to add padding to the label itself in a button component. That's been bothering me for a while and didn't know how to fix it until now 😁
Hello Am. Thank you very much for your video, it has been very helpful to me to understand the creation of buttons in Figma. If you allow me, I have a constructive criticism: it would be interesting if in certain parts of the tutorial you go more slowly with the creation of components, variants, etc. The movements of the mouse and the actions are so fast that it happened to me that I had to go back several times the video to understand what you were doing or where you were clicking. Outside of this criticism (I repeat only with the intention of being constructive) I once again thank you very much for sharing your knowledge. Greetings!
Thank you so much for your valuable feedback, I will consider it. Also please do not shy away from any more criticism, it helps me bro! Much appreciated 😊
once again thanks for keeping us updated with the figma updates that was great tutorial loved it ❤. one little request.. can you pls zoom onto your currsor during the videos cuzz i think your screen's resolution is very high & on my screen it all looks so small so its difficult to see comfortably.
Thanks for your great tutorials! They're helping me a lot! I just don't really understand this approach when it comes to maintenance. With the base component adjustments are easily done but this approach I would need to adjust each variant manually or am I getting it wrong?
Great video. Actually, I was asking myself the exact same thing that the base component is somewhat confusing with this new update. Couldn't manage to get some time these days to test the theory out. Glad your video came at the right time 👍. Thanks for the hard work mate. JazakAllah.
when we we use icon in large and medium button we will increase it size and don't you think the stroke should also be increased slightly and if yes then how can we apply the same instance property to all the variants weather having different stroke values..?
I don’t get why you can’t use base components anymore, I still use them and components properties with no problem… you just need to activate “nested properties”
I have been struggling with components props using the base button with citations from the previous video and it has been hell, Thank you update, you have just saved me from feeling insane
Thanks for the Video, it's always fun learning new knowledge.Using the old technique, I have a greater deal of control over changes down to font properties and colors from the base component but with this new technique, how can I make a font change to one component and have it appear in all other variants ?
No, unless you create a separate component for the text content. Or you use design tokens. This approach definitely lacks that central way of managing your content which I miss.
AM Design. Thanks for the great video, I was following your video and can create DS for my project. But got stuck in "Create Component Property". I couldn't find the "Preferred value" options. Can you please help me out with this?
Design trends are always changed. So my question is to be if I make a 40px height for a button, for example. Now, Product UI demand that size to bd increased so what we should to do?
Updates! So glad I'm subscribed because I was confused. I even instructed the base component narrative when I was out of date. Thank you for your chanel, Sir.
Thank you so much for creating such an amazing video! Your clear and concise explanations, along with your valuable tips and advice, have helped me tremendously with understanding how Figma components work.
ONE OF THE BEST VIDEOS EVER MADE IN UI .. PLEASE DO REAL TIME PROJECT DESIGNING APPS .. TO SHOW US TRICKS AND TIPS AS YOU DESIGN AND PLEASE DO DESIGN TOKENFULL VIDEO
@@AMDesignAndDev hahaha we will try anf catch up with you boss .. u r figma guru .. just want to ask you.. i am applying for my first ui role , what are the top 3 things i need to master in figma ? (things you expericned designers cant live with out) ?
@@smilli6415 1. Modern aesthetics, design sense that matches with top designers on dribbble behance. 2. Ability to communicate with client ot employer 3. Know Figma basics
Assalamou alykom 👋, as usual great content! Thanks a lot for the update I know how much time and energy these videos take! I really hope you update the text field and form group as well! Take care brother😊.
@AMDesignandDev im trying to understand what is the best way to design buttons... I know its different among other designers but i was following Adham Dannaway's design system and he advised for buttons (primary and secondary) they should be consistent color.. the secondary button should not have a filled color to confuse users. The colors should be consistent so that there is no confusion. But i see Air B n b has red and black buttons.. their design is really beautiful but they follow a different style of buttons. When designing what is the best way to define the buttons?
There is no single best way. It depends on the brand, and the particular aesthetics that the designer wants to go with. I agree with Adham though, when not sure, just stick with what he has suggested.
what about if i want to change padding for medium size button for all medium size?.... as i can see we have a master button (the first top left) where we can by default icons hide/unhide... but if i want to change other things like i mentioned... how to do that?
@@AMDesignAndDev Thank you... got it... one more problem i am facing ... i want a container for icon only .. and it will have several sizes like 16-20-24 etc.. and i have icon set... so i just want to use a container everywhere and only swap the icons.. i did it but the problem is all the icons are apearing in square shape... like if there is any icon which longer it also convert to square shape.. please make a dedicated video for this ..
There’s a figma icon in the thumbnall and its in a Figma noob to pro playlist. If I say “Creating a design system in Figma - Buttons (with component props) That’ll make the title very long.
@@AMDesignAndDev I understand but title like this "Figma Buttons - Create Design System (component props)" is not long (only 5 extra characters) and it is clear that it is Figma related. Dont worry UA-cam will not complain.
I must say thank you AM Design. God bless you!! 🙏
The best teacher ! so many amazing tips
Huge respect for your AM. Beautifully explained.
Thank you so much for sharing brother.
Thanks for this great video man, i have learned from this video a lot. 🌹
Really loved your video! Very informative and filled with great tips. Thanks for taking the time to explain how to add padding to the label itself in a button component. That's been bothering me for a while and didn't know how to fix it until now 😁
hey lots of love from india, your video was really insightful brother 👏
Great content..But many shotcuts you never talk about...
thank you for this content , it was so helpful , i have followed all the playlist it was just amazing.
Hello Am. Thank you very much for your video, it has been very helpful to me to understand the creation of buttons in Figma. If you allow me, I have a constructive criticism: it would be interesting if in certain parts of the tutorial you go more slowly with the creation of components, variants, etc. The movements of the mouse and the actions are so fast that it happened to me that I had to go back several times the video to understand what you were doing or where you were clicking. Outside of this criticism (I repeat only with the intention of being constructive) I once again thank you very much for sharing your knowledge. Greetings!
Thank you so much for your valuable feedback, I will consider it. Also please do not shy away from any more criticism, it helps me bro!
Much appreciated 😊
Practical video lot of confusion is removed
once again thanks for keeping us updated with the figma updates that was great tutorial loved it ❤.
one little request.. can you pls zoom onto your currsor during the videos cuzz i think your screen's resolution is very high & on my screen it all looks so small so its difficult to see comfortably.
Sure Suyash, I'll true to consider that in some of my future videos!
Alhamdulillah! it's save my lots of time thank you so much! AM Design! take love!!
Thanks for your great tutorials! They're helping me a lot! I just don't really understand this approach when it comes to maintenance. With the base component adjustments are easily done but this approach I would need to adjust each variant manually or am I getting it wrong?
Great video again!
Man what a practical video on buttons i rarely comments on any video but this video made me to thank you, so thank you soo much
Appreciate the comment :)
Great video. Actually, I was asking myself the exact same thing that the base component is somewhat confusing with this new update. Couldn't manage to get some time these days to test the theory out. Glad your video came at the right time 👍. Thanks for the hard work mate. JazakAllah.
Thank you! Great stuff. I have an issue with swapping icons-it changes the stroke width initially instead of scaling them. Any suggestions?
when we we use icon in large and medium button we will increase it size and don't you think the stroke should also be increased slightly and if yes then how can we apply the same instance property to all the variants weather having different stroke values..?
I don’t get why you can’t use base components anymore, I still use them and components properties with no problem… you just need to activate “nested properties”
I have been struggling with components props using the base button with citations from the previous video and it has been hell, Thank you update, you have just saved me from feeling insane
can you make another video of button creation according to new update in config 2023.
Thanks for the Video, it's always fun learning new knowledge.Using the old technique, I have a greater deal of control over changes down to font properties and colors from the base component but with this new technique, how can I make a font change to one component and have it appear in all other variants ?
No, unless you create a separate component for the text content. Or you use design tokens.
This approach definitely lacks that central way of managing your content which I miss.
@@AMDesignAndDev I figure I can mix using base components with component properties, do you have a video on design tokens ? I'd love to see it. Thanks
Thanks for this video. It's really helpful
You mention a design token plugin. Do you have a link to that? Thanks!
I really appreciate your effort in making this video. Thanks a lot!
what app are you using to show your keyboard presses?
AM Design. Thanks for the great video, I was following your video and can create DS for my project. But got stuck in "Create Component Property". I couldn't find the "Preferred value" options. Can you please help me out with this?
Can you record your screen and post it somewhere? That option only appears if you have an instance inserted within that component.
Glad to Have people like you in existence. A helping hand in times of Need...
revisiting after log time ..
You're Brilliant
Design trends are always changed. So my question is to be if I make a 40px height for a button, for example. Now, Product UI demand that size to bd increased so what we should to do?
Increase it in the component, what else.
Updates! So glad I'm subscribed because I was confused. I even instructed the base component narrative when I was out of date. Thank you for your chanel, Sir.
My pleasure!
share this beautiful file... please
🙌🏻🙌🏻🙌🏻
Thank you so much for creating such an amazing video! Your clear and concise explanations, along with your valuable tips and advice, have helped me tremendously with understanding how Figma components work.
Thank you :)
Thanks for the video
Can i change the success button color to something of 500 for the default state to meet accessibility?
pease do new video on building compleate design system with new components and varients techniques.. that be very helpful
What if you want to animate several different types of buttons.......how would you do that? thanks.
Thanks a lot! We need a video on creating field component.
Will do
This video right here is the bomb 🙌 thank you very much my man
Appretiated
ONE OF THE BEST VIDEOS EVER MADE IN UI .. PLEASE DO REAL TIME PROJECT DESIGNING APPS .. TO SHOW US TRICKS AND TIPS AS YOU DESIGN AND PLEASE DO DESIGN TOKENFULL VIDEO
I design very fast, I'm sure a lot of people are going to be like, you're moving too fast, it's not useful, and all that.
@@AMDesignAndDev hahaha we will try anf catch up with you boss .. u r figma guru .. just want to ask you.. i am applying for my first ui role , what are the top 3 things i need to master in figma ? (things you expericned designers cant live with out) ?
@@smilli6415
1. Modern aesthetics, design sense that matches with top designers on dribbble behance.
2. Ability to communicate with client ot employer
3. Know Figma basics
Assalamou alykom 👋, as usual great content! Thanks a lot for the update I know how much time and energy these videos take! I really hope you update the text field and form group as well! Take care brother😊.
Thank you very much for this video! I appreciate, and it helped a lot
would be super interesting for an update on this with how variables could help
the quality of hte video is very blurred:( im wondering if its this video or my computer but other videos i watch are more sharp
Try a higher resolution, adjust the quality.
@@AMDesignAndDev ah i resolved this! thank you:)
Great video brother, learn a lot from you. thanks
God bless you sir thank you
You are really providing us with such a great content mate !
Thanks very much
Jazak Allah :)
@AMDesignandDev im trying to understand what is the best way to design buttons... I know its different among other designers but i was following Adham Dannaway's design system and he advised for buttons (primary and secondary) they should be consistent color.. the secondary button should not have a filled color to confuse users. The colors should be consistent so that there is no confusion. But i see Air B n b has red and black buttons.. their design is really beautiful but they follow a different style of buttons. When designing what is the best way to define the buttons?
There is no single best way. It depends on the brand, and the particular aesthetics that the designer wants to go with.
I agree with Adham though, when not sure, just stick with what he has suggested.
I watched several videos about component properties, but I had trouble understanding the instance swap property. I appreciate your clear explanation.
Glad I could be of help!
This guy is a national treasure
what about if i want to change padding for medium size button for all medium size?.... as i can see we have a master button (the first top left) where we can by default icons hide/unhide... but if i want to change other things like i mentioned... how to do that?
There is no base component in this case, so you would change this by going to the variants.
@@AMDesignAndDev Thank you... got it... one more problem i am facing ... i want a container for icon only .. and it will have several sizes like 16-20-24 etc.. and i have icon set... so i just want to use a container everywhere and only swap the icons.. i did it but the problem is all the icons are apearing in square shape... like if there is any icon which longer it also convert to square shape.. please make a dedicated video for this ..
@@justkailash can you share your file so I can see the issue
Please indicate this is using Figma. We are unnecessarily clicking the view button assuming it is vuejs. Very misleading.
There’s a figma icon in the thumbnall and its in a Figma noob to pro playlist.
If I say “Creating a design system in Figma - Buttons (with component props)
That’ll make the title very long.
@@AMDesignAndDev I understand but title like this "Figma Buttons - Create Design System (component props)" is not long (only 5 extra characters) and it is clear that it is Figma related. Dont worry UA-cam will not complain.