Interactive size selection component for clothing website

Hello Figma community

I’m trying to create size selection component with hover and selected with 5 variants .
:white_large_square: - this is default state inside written Labels ( Xl , L… )
:black_large_square: - this is hover state and clicked state is same .
Problem is when I click to XS to select it , it changes to clicked state but if I want to change it from XS to S , both will be in clicked state .
It is possible to make it work with only default and clicked state . But I want it with default, hover and clicked state . Someone to help me?

Hi, Mikayil.

If you’re using a professional or up plan, you can use conditional prototyping to create this kind of prototype.

First, you need to create a button component with 3 variants—Default, Hover, Clicked, and 2 boolean properties—Hover and click.

Second, create 5 boolean variables(because you have 5 sizes) and set all of them to false by default. You can name it however you want as long as you wont get confused by it.

Third, create the sizes-buttons and apply the boolean variables only on the click property of the component. Do this for all button instances, make sure that click-xs variable is on xs instance and so on.

Fourth, prototype the instance and apply change to effect and a conditional effect that will deselect the other sizes. The logical condition is like this:

If XS-booleanVariable is equal to True,
set variable S-booleanVariable to False,
set variable M-booleanVariable to False,
set variable L-booleanVariable to False,
set variable XL-booleanVariable to False

By doing this, you are giving commands to set all variables that are true(click) back to false when the button is selected.

Lastly, on the main component, add hover prototype on the default state using change to to the hover variant, and add another condition to the clicked variant that will deselect(change it back to default) when clicked again. (Why did I do this? There’s an issue on the prototype when I only used change to that it only works on 1 instance and not all 5) The logical condition is like this:

If XS is equal to True or S is equal to True or M is equal to True or L is equal to True or XL is equal to True ,
set variable XS to False,
set variable S to False,
set variable M to False,
set variable L to False,
set variable XL to False

Here’s a sample prototype.