Skip to main content

I have one component containing 5 variants. I want to be able to click a button (a different component) to toggle through those 5 variants in a specific order. When reaching the last variant in the list, pressing again returns to the first one. To do this I’m using a variable and a “On click” conditional with 5 “if…” statements - one for each variant. All “else…” conditions are blank.


However, it is not possible to toggle through all the variants, it almost works but at least one item is always skipped - and which one is skipped seems to depend on the order of the “if…” statements. Reordering them changes the results, which makes me think there is a bug somewhere in the conditional implementation. Is there a another way to do this (while staying in the same Frame)?


Interactions execute sequentially. So if you have set varTemp to any value, the next if statement will hold true and will change the value of varTemp and you will get unexpected result.

You can try this with only two changes:


varTemp will always give you Cold even if you want it to switch from Sanitize to Warm/


Ok, I think I understand - I thought it would stop executing once an “if…” resolved to true, but of course they are separate statements that will all execute in turn.


Why is there no “else if” conditional? It would make things so much easier.


Anyway I think I solved it by creating another variable to check if the setTemp has already been changed. It feels like a very roundabout way of doing things but I guess it works. Thanks!


image


Yeah, the Else If is much needed. Comparing with Axure, Figma still is lacking a lot of great things!

PS: Do mark the thread resolved!


Reply