Interactive size selection component for clothing website

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.

There is definitely a step missing from this, as i followed it exactly and it doesn’t work for me. I’m trying to build a shoe size selector with 15 different sizes. The size text on the component keeps changing to what I have in the master

You mean the text label? It might have something to do with your main component or your layer names.