Skip to main content

Hello Figma community


I’m trying to create size selection component with hover and selected with 5 variants .

XS S L M XL -

⬜ - this is default state inside written Labels ( Xl , L… )

⬛ - 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.

image


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.

image


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.

image


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.


image


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



image
image


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.

Reply


Terms & ConditionsCookie settings