Creating a Design System - Buttons (with Component Props)

Creating the button component for our design system with multiple properties and variants!
.
Do subscribe, like and hit the notification icon:
/ @amdesignanddev .
.
👉 Follow me on LinkedIn and Twitter for more content.
/ asaadmahmood
/ asaadmahmood5 .
Sign up for Figma: psxid.figma.com/821dltt72sqv .
Subscribe to my newsletter to keep up to date on latest design/tech trends, update, tools and information! 🔥
the-optimal-designer.beehiiv....

[@riteshbumbak133]

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

[@AMDesignAndDev]

Appreciate the comment :)

[@gideonaboagyeagyeman1279]

Glad to Have people like you in existence. A helping hand in times of Need...

[@MadanPatil]

I must say thank you AM Design. God bless you!! 🙏

[@AlexDsage]

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

[@amina6489]

The best teacher ! so many amazing tips

[@saleh-thought]

Alhamdulillah! it's save my lots of time thank you so much! AM Design! take love!!

[@pankhudilanjewar4150]

I watched several videos about component properties, but I had trouble understanding the instance swap property. I appreciate your clear explanation.

[@AMDesignAndDev]

Glad I could be of help!

[@hamzajamal2047]

I really appreciate your effort in making this video. Thanks a lot!

[@BreathingInPixels]

Huge respect for your AM. Beautifully explained. Thank you so much for sharing brother.

[@s.hammad]

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.

[@desdemonatilica8757]

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 😁

[@mischiefbouy]

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.

[@AMDesignAndDev]

My pleasure!

[@Zahra-Opaia-0]

thank you for this content , it was so helpful , i have followed all the playlist it was just amazing.

[@farruh.mahkamov]

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.

[@AMDesignAndDev]

Thank you :)

[@Hamzeh_ux]

Thanks for this great video man, i have learned from this video a lot. 🌹

[@archerarcher5727]

This guy is a national treasure

[@MohamedAbdelaziz006]

You are really providing us with such a great content mate ! Thanks very much

[@AMDesignAndDev]

Jazak Allah :)

[@kassiopeya8740]

Thank you very much for this video! I appreciate, and it helped a lot

[@the.olawale]

Thanks for this video. It's really helpful

[@kishorekumar8216]

hey lots of love from india, your video was really insightful brother 👏

[@SH-ny8by]

would be super interesting for an update on this with how variables could help

[@atharnadeem6947]

Great video brother, learn a lot from you. thanks

[@nikita2560]

This video right here is the bomb 🙌 thank you very much my man

[@AMDesignAndDev]

Appretiated

[@safsafaf2838]

Great video again!

[@Fabiuscha]

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?

[@chaouchfedi7507]

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

[@divyeshhydrix1351]

Thanks a lot! We need a video on creating field component.

[@AMDesignAndDev]

Will do

[@egedepeter6038]

God bless you sir thank you

[@smilli6415]

revisiting after log time ..

[@smilli6415]

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]

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.

[@smilli6415]

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

[@AMDesignAndDev]

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

[@suyashhandke]

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.

[@AMDesignAndDev]

Sure Suyash, I'll true to consider that in some of my future videos!

[@smilli6415]

pease do new video on building compleate design system with new components and varients techniques.. that be very helpful

[@adebayoabraham507]

Thanks for the video Can i change the success button color to something of 500 for the default state to meet accessibility?

[@tara730]

can you make another video of button creation according to new update in config 2023.

[@rjabrm]

What if you want to animate several different types of buttons.......how would you do that? thanks.

[@nikilragav]

what app are you using to show your keyboard presses?

[@adrianjerez6090]

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!

[@AMDesignAndDev]

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 😊

[@NebulaBrewing]

You mention a design token plugin. Do you have a link to that? Thanks!

[@henrytregenza7357]

🙌🏻🙌🏻🙌🏻

[@omotayotaiwo4375]

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 ?

[@AMDesignAndDev]

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.

[@omotayotaiwo4375]

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

[@qualyoimpex]

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?

[@AMDesignAndDev]

Can you record your screen and post it somewhere? That option only appears if you have an instance inserted within that component.

[@fernwehtwl]

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

[@AMDesignAndDev]

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.

[@justkailash]

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]

There is no base component in this case, so you would change this by going to the variants.

[@justkailash]

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

[@AMDesignAndDev]

@@justkailash can you share your file so I can see the issue

[@souandremoura]

share this beautiful file... please

[@tayyabsohail8823]

Practical video lot of confusion is removed

[@fernwehtwl]

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

[@AMDesignAndDev]

Try a higher resolution, adjust the quality.

[@fernwehtwl]

@@AMDesignAndDev ah i resolved this! thank you:)

[@truthteachers]

Please indicate this is using Figma. We are unnecessarily clicking the view button assuming it is vuejs. Very misleading.

[@AMDesignAndDev]

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.

[@truthteachers]

@@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 KZbin will not complain.