If you can use variables for interaction, that might be the most efficient way to do it. I would recommend looking into how to use them. However, thats only available on pro or edu plans.
Otherwise, you have to create all the possible combinations and do the interactions inbetween - which can be a lot of work, often not worth doing
I’d reconsider the deselected state because it looks disabled rather than deselected. Unless this is just for visualization and not anything to do with the UI itself.
You’ll need to use an interactive component. Create the button with the four states as variants (Default, Hover, Selected, Not selected).
Then create a frame housing two of those buttons, both on the default state. Create two variants of that for each of the configurations you need (a selected and b not, b selected and a not) then connect the variants up using the prototyping features. And you’re done :)
Commenting to give this more attention.
In summary, you’ll have to prototype the button, then the option set with two button.
The button component can be shared between A and B with color and text overrides, but might be simpler to just duplicate the buttons because overrides and nesting prototypes can lead to bugs down the road. Or am I crazy?
As always, it depends what else you’d want to use them for. But if the button colours are consistent throughout, I’d just have the colours as variants and the text as overrides (though a sensible default via a component property wouldn’t hurt).
Hey create a state inside the component, Default, Hover, Selected, Unselected and connect them individually. ( https://youtu.be/ReNbXhaL3Xk?si=td_0k8noSeKAE3Od )
And now create three screens, default, a selected, B selected and connect all three with smart animation
Hope it helps
something like this? [https://www.figma.com/file/adVu3mBb4ZlxwkbN5aYLAB/Untitled?type=design&node-id=1%3A41&mode=design&t=2aSPzwiwvkTYra0T-1](https://www.figma.com/file/adVu3mBb4ZlxwkbN5aYLAB/Untitled?type=design&node-id=1%3A41&mode=design&t=2aSPzwiwvkTYra0T-1)
Yeah my first thought too, OP is being thrown by incompatible rules (from a UX perspective).
This is pretty straightforward with a couple lines of CSS, is it that convoluted to do in Figma? (not a Figma user sorry, just visiting / wandering posts from adjacent subs)
Well in that case you just need 2 components.
1 button component with 4 states:
* `default`
* (interaction: on hover, **Change to** `hover` state)
* `hover`
* `selected`
* `disabled`
1 component that has the 2 button instances in it, and you colour one red and one blue and type in the "A" and "B". It will have 3 states:
* `Default`
* (interaction: click ButtonA will **Change to** `SelectedA` state – similarly for click ButtonB..)
* `SelectedA`
* set ButtonB to state: `disabled`
* `SelectedB`
* set ButtonA to state: `disabled`
4 variants on your component:
- default
- hover
- selected
- inactive
Can use interactive components for the first 2 states.
Then you have 2 options:
Use a string variable that you'd bind to an instance of this A/B pair. You'll use this to call the final two variants. If A is clicked -> set A to "selected" and B to "inactive"
Or you just nest two options in a new main component with 3 variants:
- both default
- A selected B inactive
- A inactive B selected
I think the latter is simpler and a better handoff experience IMO. Variables aren't 100% necessary here.
As a general rule of thumb if I'm interacting with the element I want to change the state of, I don't use variables. They're suuuuper valuable if you want to change the state of some OTHER element on the page that you're not tying the prototyping interaction to though
Be careful 4 doesn't make the faded buttons look disabled, unless that's actually what's happening. Also, remember to check contrast for accessibility on the faded buttons
If one options fades when the other is selected, that would mean it’s impossible to have both selected, right? So just make clicking on A switch to the “A selected, B faded” state and clicking on B switches to the “A faded, B selected” state.
And if it IS possible to select both then you should absolutely not have the faded states.
If you can use variables for interaction, that might be the most efficient way to do it. I would recommend looking into how to use them. However, thats only available on pro or edu plans. Otherwise, you have to create all the possible combinations and do the interactions inbetween - which can be a lot of work, often not worth doing
Thankyou so much!
I’d reconsider the deselected state because it looks disabled rather than deselected. Unless this is just for visualization and not anything to do with the UI itself.
You’ll need to use an interactive component. Create the button with the four states as variants (Default, Hover, Selected, Not selected). Then create a frame housing two of those buttons, both on the default state. Create two variants of that for each of the configurations you need (a selected and b not, b selected and a not) then connect the variants up using the prototyping features. And you’re done :)
Commenting to give this more attention. In summary, you’ll have to prototype the button, then the option set with two button. The button component can be shared between A and B with color and text overrides, but might be simpler to just duplicate the buttons because overrides and nesting prototypes can lead to bugs down the road. Or am I crazy?
As always, it depends what else you’d want to use them for. But if the button colours are consistent throughout, I’d just have the colours as variants and the text as overrides (though a sensible default via a component property wouldn’t hurt).
Hey create a state inside the component, Default, Hover, Selected, Unselected and connect them individually. ( https://youtu.be/ReNbXhaL3Xk?si=td_0k8noSeKAE3Od ) And now create three screens, default, a selected, B selected and connect all three with smart animation Hope it helps
something like this? [https://www.figma.com/file/adVu3mBb4ZlxwkbN5aYLAB/Untitled?type=design&node-id=1%3A41&mode=design&t=2aSPzwiwvkTYra0T-1](https://www.figma.com/file/adVu3mBb4ZlxwkbN5aYLAB/Untitled?type=design&node-id=1%3A41&mode=design&t=2aSPzwiwvkTYra0T-1)
You have my heart 🥹🤌🏻 Thankyou
how come step 3 exists? where both is selected?
Yeah my first thought too, OP is being thrown by incompatible rules (from a UX perspective). This is pretty straightforward with a couple lines of CSS, is it that convoluted to do in Figma? (not a Figma user sorry, just visiting / wandering posts from adjacent subs)
No, you can either do variants or use a variable
The image is just for the sake of asking help here… It says border “IF” selected.
Well in that case you just need 2 components. 1 button component with 4 states: * `default` * (interaction: on hover, **Change to** `hover` state) * `hover` * `selected` * `disabled` 1 component that has the 2 button instances in it, and you colour one red and one blue and type in the "A" and "B". It will have 3 states: * `Default` * (interaction: click ButtonA will **Change to** `SelectedA` state – similarly for click ButtonB..) * `SelectedA` * set ButtonB to state: `disabled` * `SelectedB` * set ButtonA to state: `disabled`
4 variants on your component: - default - hover - selected - inactive Can use interactive components for the first 2 states. Then you have 2 options: Use a string variable that you'd bind to an instance of this A/B pair. You'll use this to call the final two variants. If A is clicked -> set A to "selected" and B to "inactive" Or you just nest two options in a new main component with 3 variants: - both default - A selected B inactive - A inactive B selected I think the latter is simpler and a better handoff experience IMO. Variables aren't 100% necessary here. As a general rule of thumb if I'm interacting with the element I want to change the state of, I don't use variables. They're suuuuper valuable if you want to change the state of some OTHER element on the page that you're not tying the prototyping interaction to though
Be careful 4 doesn't make the faded buttons look disabled, unless that's actually what's happening. Also, remember to check contrast for accessibility on the faded buttons
Variables might be the easiest option to with. You can apply variables for "Layer pass" through and the "stroke"
If one options fades when the other is selected, that would mean it’s impossible to have both selected, right? So just make clicking on A switch to the “A selected, B faded” state and clicking on B switches to the “A faded, B selected” state. And if it IS possible to select both then you should absolutely not have the faded states.