Figma Design System: 12.Button Components

[@oartsoares]

Great touch on decreasing your image's opacity when navigating on the right side panel.

[@AAAdnane]

amazing tutorial chris! thank you

[@oartsoares]

Amazing performance on the beginning 🤣. The video is great too, thank you and keep going 🚀🚀🚀🚀 Very interesting this "The component gallery" website. Would appreciate one (or more) video about this topic: interesting and helpful general websites/resources to have as a UI/UX/Product Designer

[@ChristopherDeane]

Maybe later down the track, I'm going to get all the main components done fist 🙂,

[@carolinafernandez4584]

Hi Chris, Thank you so much-this is great! I have a couple of questions regarding the naming conventions and documentation for buttons (or any component essentially): 1. I've noticed that many design systems use names like "contained," "text/link," and "outlined" for buttons, while you’ve opted for "primary," "secondary," etc. Could you explain the reasoning behind choosing this naming convention? Do you find it helps designers and developers better understand and apply the components? 2. Would you consider including a label as part of the table containing all the buttons? I know they’re listed in the right-hand panel, but it might improve documentation clarity. Looking forward to your answer :)

[@ChristopherDeane]

Hi Carolina. 1. If you use Hierarchy in your buttons, other components and even in the name of you semantic variables, it's easier for designers and engineers to understand how to use them. A primary button is followed by a secondary, primary text is followed by secondary text etc. 2. After I've done a few components I'm going to create their instance tables using the Propstar plugin so that'll happen soon. Thanks for watching and Happy Holidays 🙂.

[@carolinafernandez4584]

@@ChristopherDeane Thank you so much for your reply & videos. I just had a look at your DS. It looks great. Happy Holidays :)

[@taptapninja]

First of all, great video! What are your thoughts on having duplicate components for web and app, such as button components, and having to modify them in both platforms? I’m currently in the process of merging similar web and app components because our designers often get confused about which one to use.

[@ChristopherDeane]

The FDS series is put together with an enterprise level design system in mind, which is why I'm creating different libraries for Web and App. There's also differences between the web and app versions of a component and some components that are platform centric that don't make sense to be in both libraries. For example: In the next episode I'll be removing the "Hover" state on the buttons in the App library before I do the "Button Group" component. You can still merge the libraries, and I've done this myself in my own system called Scale (scaledesignsystem.com), but in this series they'll remain separate libraries 🙂.

[@oartsoares]

Shoud I set the prototype flow for the buttons in this Component files? The interactions between states I mean

[@ChristopherDeane]

Up to you, I don't as there are times you are prototyping and don't want the button to act like it's going to take you to a destination.

[@oartsoares]

@@ChristopherDeane Understood. Thanks!

[@asmaabbas7289]

Can you show how to create this with base component

[@ChristopherDeane]

I cover why I no longer do this, and you shouldn't either in the last video I did about creating a button component. Take a look here: kzbin.info/www/bejne/rZKbgoaoprF1facsi=zNadvuHcWPD-DvJh 🙂

[@oartsoares]

Wouldn't be necessary a Focus state for the buttons?

[@ChristopherDeane]

When a few more components are done I'm going to add an A11y focus state to them, which is what you see when you tab to the component or use a screen reader. Adding one when you click on it is up to you.

[@oartsoares]

@@ChristopherDeane Makes sense. Thank you!

[@oartsoares]

Let's say that when creating Dark Mode, the button in Dark Mode won’t have a border, just a background color. Should I create another set of color variables? For example: Semantic Colors & Component Colors / Button. One way to handle this could be setting the border color variable to 0% opacity in the Dark Mode column. But that might affect how the border color variable is used in other parts of the UI.

[@ChristopherDeane]

You could and I've done this before, but for FDS it's not necessary to go into a third level of semantics.

[@oartsoares]

@@ChristopherDeane Understood 🫡

[@kenhbethongminh1]

the UI3 so difficult to use

[@ChristopherDeane]

That’s what I thought in the beginning, but you’ll eventually get used to it, just like I have 🙂.

[@LOOPFROGMUSIC]

May i ask why you moved from Sketch to Figma ?

[@ChristopherDeane]

At the time, all I wanted to do was switch automatically between light and dark mode with 2 sets of colour variables and 1 set of components. This wasn't possible in Sketch and a plugin engineer and I tried for weeks to create a plugin that would it happen. That's when I gave Figma another go, and within days was able to make it happen with 2 sets of colour styles and the Appearance plugin. So, you can see that the lack of one feature was enough for me to switch. And now I'm a DS specialist in Figma so it worked out OK 👌.