Figma: Button Component with Properties

[@Liron-InbalParsi]

One of the best tutorials I've seen. Thanks!

[@relaxchillmeditateenjoysmo5199]

Happy to see you back

[@ChristopherDeane]

Thanks! I feel the same way 🙂.

[@t0mmx]

This was amazing Christopher! Thank you!

[@bl7937]

It’s great to see you back Chris!!

[@ChristopherDeane]

It's great to be back B L!

[@mischugo]

Nice tutorial. Thanks a lot. But how is a color layer working? Thanks again

[@jpearson42]

Love it! Had no idea about the Boolean features. Cheers!

[@ChristopherDeane]

How good are they? I just love not having 100+ variants to deal with anymore 🙂.

[@utkcht]

The best tutorial I've found on how to leverage properties to make robust components. Do you have a video/ is there somewhere I can learn how you created the color style system and the best practices involved in the nomenclature of those styles/ tokens?

[@ChristopherDeane]

That’s what is coming next. How I create semantic tokens in Figma 🙂

[@vedantv21]

Hi Focus mode is missing. Can you please add that too...

[@ChristopherDeane]

This is currently a Mobile DS, so it only needs an a11y focus. You can see the updated button here: www.figma.com/file/BDgzx7fkrNoRK87uZX6sFw?node-id=891:3479&comments-enabled=1&viewer=1

[@joemontero741]

LOL! Sick intro 🤘. The rock beat reminds me of DOOM game. Thanks for this Figma video. I love it when you go into the details and how professional everything looks. It's great to see you again Chris.

[@ChristopherDeane]

Thanks Joe. It feels good to be back, with Metal AND a green screen! 🤘

[@HyberCrashDK]

A little hack for when you have variants. You can add Auto layout to the dashed bounding box so you don't have to resize anything. When ever you add new instances, it automatically adapts its size :)

[@ChristopherDeane]

That works for stacked variants, but not a grid of them 😉.

[@sebastianyepes8154]

Hi Christopher, do you know how to create an instance for the shadows called from another library? There is not a single video on KZbin about it!

[@ChristopherDeane]

Do you mean setting up elevation shadows in a library that you then use in your design file?

[@sebastianyepes8154]

@@ChristopherDeane I have already a shadow library in another Figma file because the structure of our Company Design System, but we can't integrate to Props to have it as a boolean option for a button.

[@ChristopherDeane]

You may have to create variants for "Shadow" on/off (Which is what I would do). Or nest a surface component that you use as the button BG and has it's own variants.

[@PUK1SVA]

But u cant make icon only button square with same dimensions with component properties. You will have to change that manually everytime. Or is there any way?

[@ChristopherDeane]

That's right. You "Could" add spacing components on either side and turn them off, but that's too "Hacky". So I made a different component called "Button Icon" that you can see here: www.figma.com/file/BDgzx7fkrNoRK87uZX6sFw/Scale.Design-System?node-id=891%3A3683

[@PUK1SVA]

@@ChristopherDeane Yup did it the same way. I'm doing a complex web app atomic design system atm so it was time to test properties, it's outstanding. I don't really use components in basic web designs cuz I'm lazy :D but these properties are really helpful when doing complex web apps. I'm being addicted :D

[@dotsona07]

Great video! Thanks for sharing 🙂

[@ChristopherDeane]

Thanks Andrew. Glad you liked it 🤘

[@tatokprayoga]

THANKS A LOT BROTHER , FULLY THUMB UP FOR YOU

[@zeppelin812]

Did u switch to figma from sketch? Or using both of tools?

[@ChristopherDeane]

Hi Zoood. I’ve switched to Figma, but still have Sketch. Are you interested in Figma tuts or would you still like to see some Sketch content?

[@xcoupland]

@@ChristopherDeane Figma! Good to see you back Chris. You and yours been in my thoughts!

[@siavashaslani5238]

Hey Bro, hope you and your family doing well ... can't wait to see more Figma tutorials. I think it would be nice to develop a design system like your previous playlist on Sketch just right in Figma too! 🤘🤘🤘

[@ChristopherDeane]

That's the plan! But I'm going to go a little deeper into what design systems are and the real value they provide to every org, team and product they're used in 🙂.