Skip to main content

I’m using a checkbox-component from a common component library. The checkboxes-component have some simple interactions for checking and unchecking the boxes.


I’m using this checkbox-component in a prototype where you can select add-ons to a main product and I simply want to update the total price when the user is checking or unchecking the box. I’ve made a simple version of this prototype here.


image


I’m trying to add logic to the interactions that’s already a part of the component, but it seems like it only register the interactions added on the initial state. (In this case it means that it keeps adding to the total price when checking the box, but never subtracting when unchecking).


Is there a way to do this?


(I could probably rebuild the variants I need for this simple component locally, but it just feels wrong 🥺 )


Thanks in advance!

Hi, Krister.


If you have a professional license, you can do conditional prototyping by adding a boolean variable.



If not, you need to create a unique component with variant specifically for the insurance only.


Put the add condition on the unchecked variant and the subtract condition on the checked variant.

image


image

Hi @Raphael_M, thanks for your suggestion, this is the closest I’ve come to a solution.


The only problem with this solution is that I have to delete the variant interaction, and this is unproblematic in this simple case, but the fact that this is necessary kind of renders variant interactions in libraries obsolete, in my opinion. In our organisation we have a lot of more advanced variant interactions with animations etc, that we don’t want to remake for each prototype.


Thanks for your help, Raphael_M 🙂

Hi, Krister.


Sorry about that.


Other work around is you will have to create a ghost frame on top of your component and put the interaction on that ghost frame.

Yes, that could be another workaround, but I was hoping to avoid that as well. Thanks, @Raphael_M, lets just hope Figma will fix this in the future.

Reply


Terms & ConditionsCookie settings