I use Bootstrap, which has several variations for button styles. It comes with 9 different button colors--a "primary" one that matches a brand color, one for representing "success" type messages, one for representing "error" type messages, one for representing "warning" type messages, and so on. There are also three different button sizes--small, medium (the default) and large. There are also "outline" versions of each color and size but for simplicity's sake let's forget about that for now.
What I want to do in XD is have three main components (one for each button size) that can handle all those button colors. I'm learning XD and I thought I could do this by just having a main component with the default button color, then copy/paste that component (i.e. make an instance of that component) and change the background/text/padding for each of the variants--a component instance for a large primary button, a component instance for a small warning button, etc. That was fine until I realized the only button that would show up in Libraries > Document Assets > Components was the main component button.
So I tried to achieve something acceptable by creating a component that's just the button background so I could have the different colors as states--a primary state, a success state, etc. That way I could have my 3 main components for button sizes and use the same background component across all of them. That didn't work because I discovered you can't have a component as a "background" when you want to use padding, and I want to use padding. Even if it did work, I'd have to have 9 different states, plus 9 more for each hover state, and another 9 for any other states I want to use (maybe disabled, active, etc.)
So now what do I do? Do I make a main component with 18+ states, and two more components like that for the small and large sizes? That would be ok-ish if I didn't have to do that all over again for the small and large button sizes because apparently, you can't duplicate a main component as another separate main component, which means I'd have to re-create all 18 states from scratch, twice.
I just want to be able to make changes in fewer places. Say I have a main component for each button size (so 3 components), and I need to change the primary button background color, plus its hover background color. That means I need to make that change in 6 places--once for 3 default states, and once for 3 hover states. Or, say I have a main component for each button color (so 9 components) and I need to change the padding on the large button size. If I'm not mistaken, I'd have to make that change at least 9 times, possibly more since it seems like padding changes you make to the default state don't get carried over to existing states.
1
Reply
AdChoices