Design Systems 101: How to create a button component in Figma with variants and component properties

Today's video is all about how to design buttons in Figma, leveraging variants and component properties to build a truly flexible component.
Please make sure you download the design system foundation file before you begin to make it easier to follow along:
www.figma.com/community/file/...
00:51 Mapping structure and states
02:45 Designing the buttons
09:01 Configuring the properties
14:48 Create your button types
19:23 Testing your component

[@yes6799]

hey man, just wanted to say that it was great to stumble upon someone who just makes quality material, straightforward, step by step, everything described. Cheers!

[@JustUXChannel]

Thank you! Sorry for the slow response I have been neglecting checking on here

[@jwlynch]

Awesome tutorial! This was genuinely the most helpful and to-the-point guide I came across during my research before starting my work on a new design system. Really love your setup to make all the variants and properties editable/toggleable from that original "master" button. Makes everything so clean and easy to understand for both designers and non-designers.
Looking forward to watching some of your other tutorials. Cheers man! 🤘

[@JustUXChannel]

Thanks so much! Really appreciate the kind words and glad it was helpful for you :)

[@SH-ny8by]

Nice :-) would be interesting to a see a pt 2 that considers variables and best practices of using them with button components

[@JustUXChannel]

Thanks! And nice idea :)

[@prathameshjoshi2447]

I found these Figma videos really helpful. Where can I find full course videos? Really excited to see more content like this.

[@JustUXChannel]

Hey mate - sorry I've had so many work projects I haven't had time to do anything. Hopefully things will quieten down at work soon!

[@whitneywilson1991]

You might not see this comment or respond, but i'm following along and having issues with my icon only button - the button size is smaller in width even though i fixed it to 40x40 fixed in the tutorial like you did. Any thoughts?

[@JustUXChannel]

That's a weird one! Feel free to email me a screenshot of the properties panel [e-mail] and I can probably understand better.

[@michellel1383]

I notice you don't use .base component. Just curious about why that is? I'm trying to set up our button components using a .base and running into some boolean property issues and wondering if that's why.

[@JustUXChannel]

With the component properties, it became less necessary to have base components, which make the components harder to maintain ime. With boolean properties / toggling on and off icons etc I've found it's easier to build them without base components.
Some other more complex components can still be useful to build with a base component but I'd say it's safer to build buttons without them. Hope that helps :)

[@michellel1383]

@@JustUXChannel Helpful, indeed! Thanks for your response. :)