Setting "prices" using a conditional logic checkbox

Hiya Figma community,

I have a bit of a dilemma here,

I have a checkbox component with a simple prototyping setup to be checked / unchecked when the user clicks on the instance in prototyping mode.

What I want to do is when the user clicks on the checkbox, it adds a price value to the total price and then removes it when it’s unchecked via figmas conditional logic.

I have a feeling that the conditionals I have set in the prototype design are being reset when the component is clicked on, so depending on the state that is originally set, you either add to the price or take away from the price.

(I’d normally publish this, but I don’t have admin rights, sorry)

Attached images


I’d love to know what I am doing wrong if anything.

Thanks for the help, everyone.

Hello @Rav

There are two things on the checkbox interactions that seems odd:

1 - Conditions
The expression of a condition will always ends up by being either true or false. And thus will only apply the rule(s) described in the condition if it’s true (e.g: if my checkbox is checked do something)
So when you create the condition “if false” it will never run the logic put in it because the evaluation of this condition will always be: false.

I’m not able to see the whole definition of the interaction from the state checked to unchecked but if you’re not defining anything in the else I advised you to remove the conditions of your interactions

2 - Set variables
On the component interactions, the variable Store Prices is set twice (in both check and uncheck state of the component)

  1. First Store Prices is set to Prices: Product 1
  2. Then Store Prices is set to 0.

Thus the variable Store Prices will always display 0 according to the last set variable.

Because it’s not visible in your screenshot I’ll assume you use Store prices to set Display Prices.
It appears that the :

  • Store prices variable is never printed on screen,
  • the first set variables of Store prices has to be overwrite to change its collection in order to change the value of the product added according to your checkbox

Then you may avoid the usage of the variable Store prices

A simple set variable of :
Display Prices set to Display Prices + Prices (or - Prices according to the component states) should do just fine

Let me know if it helped.

1 Like

@Haroll Yes this really helped a lot, thanks for helping me out here !

1 Like