Skip to main content

Hey! I’m relatively new to Figma and I need a bit of help.
I want to create a size selection button for my clothing e-shop prototype.

Each size selection should be highlighted with a fill independently when selected—meaning to say if I have size S,M,L,XL, I can only choose one option.

Additionally, I also want a ‘unavailable’ option where the button cannot be interacted with.

 

 

Thank you so much! 😃

 

Hi ​@Edryian Sazaly,

 

I’d definitely recommend setting this up using variables. Specifically a set of variables for each product you want to display in your prototype. These might be vars for what sizes are available (to control what your visual size selector component displays), what size is currently selected for this product (to control the visual selector and any other information components in the design). 

There are some very good variables tutorials available. I’d start there.

Hope that helps.


Hey ​@Ellwood ,

 

Thanks for the reply! 😃 I did manage to solve this earlier by using booleans, conditionals and a bit of trial and error. Everything is flawless right now.


Reply