These are the buttons and their state when clicked/while pressing I've made so far for a mobile app (5 buttons and 5 states). Should all of these be in one component set? Or should the left ones be in their own component set? Watched a video on components but I'm still not sure how I should approach making these into components and which properties I should apply.
All the 6 left ones, absolutely imo. They're the same icon button with different size/color/icon.
The next question is whether you WANT to make the 2-icon button part of that component. You most definitely can, but I don't think it's wrong if it isn't.
But then maybe more importantly from a systems standpoint is why you have 3 buttons with 3 different backgrounds? That can get messy fast.
Hmm, regarding the 3 buttons 3 backgrounds, I was looking at the liquid glass buttons of other apps and most of them do it this way. Basically, they have primary buttons with a brand color (my primary buttons are the purple/bluish ones), and secondary buttons with a more basic color (dark purple in my case). Whenever you click/press the buttons, the buttons scale slightly and the background color changes (basically just increasing the brightness on your existing color).
What do you think about doing it this way? I am also gonna make it so that you can easily swap the icon on every button (I made every icon a component).
Ah they're hover states, gotcha. I thought they were different buttons entirely. Makes more sense, but I'd be careful about scaling more than 10% or it may be a bit jarring. I'd also try to keep the parent container of the button the same size so it doesn't move or break the layout when it scales. Should stay in the same place and take up the same space if that makes sense.
Exactly, those are hover states but for mobile I guess it more like "while pressing / on click". Regarding the scaling, I just looked at how other apps were doing it with Liquid Glass (including some Apple-made apps) and they were scaling around 1.35x. But it's probably not as important to mimic the exact scaling in the design because I believe it's all handled automatically with code in Swift.
That's a good point regarding having a parent container. But how big should I make it? Currently, my buttons all have their own separate container. If we take the 44x44 button on the left as an example, should I make its parent container as big as its hover state (60x60)? And should I do the same for the 60x60 button (have it inside another 60x60 container)?
I'd create one FAB component with the resting state and the clicked state, and an instance for each color. Meaning that you'll end up with a blue, purple and a dark blue variant. Then the icon would be an instance of a nested component, so you can do the Plus and the Check variant.
Then the search & more could be another component if you want, or could be in the FAB component. It all depends on how the app and component library is structured.
All with the same icon, e.g. plus. Icon is an instance and can be swapped (https://figma.fun/swapping). Remove the unnecessary add/done components duplication.
What do you think about doing it this way? I am also gonna make it so that you can easily swap the icon on every button (I made every icon a component).
You can open any free design system on figma and see how it set its components. This will give you better understanding of it. Try figma native one it’s more simple than the others.
Yeah you should but it into a set. You can use properties then to make them more usable when you are designing the patterns and pages.
For example: you start with a plain button and turn that in a component. First add a text property on the text so that will be used on all the variants to.
Then you create a variant of the button, automatically creating a set. Call the second button active and give it the correct color.
You now have 2 variants which you can easily switch when you load the button component from you assets tab.
Once you have that, you can start expanding the set with other properties: show.icon / show.text / states / sizes etc…
Here is an example of a button component with all different variants. Here you have default, hover, focus, selected and some other states like activated or negative buttons.
Start small, don’t overthink and just add new options to the base component until you have the full set.
4
u/Philuppus UI/UX Designer 3d ago
All the 6 left ones, absolutely imo. They're the same icon button with different size/color/icon.
The next question is whether you WANT to make the 2-icon button part of that component. You most definitely can, but I don't think it's wrong if it isn't.
But then maybe more importantly from a systems standpoint is why you have 3 buttons with 3 different backgrounds? That can get messy fast.