We could use IF, ELSE IF, ELSE statements?

We could use IF, ELSE IF, ELSE statements… Many times in code you may want to do many different things based on different string values

For example, I might have three different landing pages based on 3 conditions, and upon button press I might want to say

IF “has-users”==0 goto empty landing
ELSE IF “has-users”==1 goto landing a
ELSE IF “has-users”==2 goto landing b
ELSE goto other

2 Likes

I did find that you can string a bunch of IF statements together and leave the ELSE blank, but that feels a bit hacky to me ;). It does work though, if others are looking for this capability.

1 Like

I’m too lazy to test - if you string a load of IFs together, do they all get evaluated equally?

Not sure if I am following you, but for my purposes I am checking for a string value of 0, 1, or greater than 1 and it’s doing what I want and going to the correct location based on that value. I haven’t attempted to see what happens if two or more items evaluate to true at the same time though.

I think I mean that if you have multiple IFs, does it stop evaluating at the first TRUE? Not sure what to expect.

It would be great to have more “else if’s” and “while” conditionals. It can get a bit unwieldy.

For example, I worked on a swipe+loader that would show/hide elements if a variable was a certain number (this makes it look like it is spinning), I had to use a few if statements.

I’d love to be able to copy and paste conditionals/variables, so I wouldn’t have to retype everything if I am reusing a similar statement.

1 Like

We definitely need this. Not just is a bunch of if’s with blank else’s a bit tiresome hacky to do, but it is also a problem, that you can stop the following statements from being evaluated, so you have to add additional conditionals to your if’s to prevent it.

3 Likes

The prototype renders the variables by order, from top to bottom, exactly like in javascript.
Behind the scenes it is javascript

Yup- definitely need this.

Thank you! I was looking for any workaround for missing elseif and haven’t found anything until you pointed out this is possible. :slight_smile:

Agreed. It felt hacky even doing it, and it took me a while to even consider it as a possibility because I thought surely that wouldn’t work right, but once I got desperate enough for a solution I decided to just try it and see what happened. I was like “Oh, that does work” hahaha

I was hoping this would be helpful to someone else. Took me a while to consider it as a possible solution because it felt so janky. I tried it out of pure desperation.

First we check the condition if the condition is satisfy the we take 1st condition else if condition is not satisfy then we going on 2nd condition in that way we can do it

Another update for anyone using this hack…

I just got done merging a branch of fixes into our prototype where I discovered that Figma must have updated to a more strict sequencing protocol with there ‘if’ statements. So if you were using a string of ‘if’ statements to achieve an ‘if/else if/else’ behavior, like I was, you might have to re-evaluate your sequencing order and swap the order to assure that an evaluation of true on a smaller value doesn’t move your math along unintentionally.

So I original had a string of 'if’s

if var == 1
set properties or other variable values
if var == 2
set properties or other variable values
if var > 2
set properties or other variable values

I had to swap the order to

if var > 2
set properties or other variable values
if var == 2
set properties or other variable values
if var == 1
set properties or other variable values

Seems like the original Figma behavior was to stop at the first evaluation of true in the string of statements, but now it runs through each statement and on to the next (until complete done with all), which is fine as long as you know and expect that. None of this will mater if they decide to just give us true if/else if/else statements, but until then stringing if statements with blank else works if you understand how Figma will process that when you hack it 😉

So now that it seems to move on to the next until it gets through the whole sequence, I found I had to flip the order so some of the properties I was setting at 1, didn’t cause 2 to immediately evaluate to true as well. In my particular case just checking the higher values first fixed the problem of it evaluating to true at every step.

Hopefully I am explaining this clearly enough hahaha

I think I have an answer to this now. Originally it seemed Figma was stopping at the first evaluation of true, but they recently changed something that broke my hacks, causing me to change my sequencing to get it to function correctly again. Now it looks at each statement until it gets to the end, so you have to be careful with sequencing or you can evaluate each line to true by the time it hits the next line in the sequence. In my case I just had to swap to Highest to Lowest value ordering, instead of Lowest to Highest to get things to work again. You can see my more detailed explanation in the main thread.

Doesn’t really inspire confidence in Figma if they’re making basic changes like this without warning. Not a mark of quality software, if you ask me.

Running into this now. Creating a prototype where im letting the demoer whos using the prototype can show different flows depending on the user type (like admin vs non-admin). I want to be like if admin AND featureEnabled do X, else if admin and featureDisabled do Y else if notAdmin…etc I can string together ifs but agree it feels hacky and also I feel like I’m gonna end up with a hole or opposite where more than 1 if evaluates by accident or something.

[MY SIMPLE SOLUTION]

I thought about it as a coder and came up with elegant solution.
The steps are following:

  1. create a condition frame
  2. IF var==1 then go to Frame A; ELSE go to condition frame.
  3. on condition frame set up interaction: delay 1ms and then condition:
    IF var == 2 then go to frame B; ELSE go to frame C.
  4. profit.
    Optional: this way you can create unlimited ELSEIFs. :slightly_smiling_face: