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.