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
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.
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.
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.
The prototype renders the variables by order, from top to bottom, exactly like in javascript.
Behind the scenes it is javascript
Thank you! I was looking for any workaround for missing elseif and haven’t found anything until you pointed out this is possible. 🙂
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:
really work!!
Agree. We really, really need ‘else if’
I am just going to add my thoughts on this thread as well. I really hope this gets added to Figma because I am currently trying to do a loop with a variable and just using multiple If statements does not work for me.
Basic functionality is a carousel type situation so variable starts at state 1:
If I leave it as is above it looks like nothing happens because it cycles through since it runs each statement. If I change the order to check for state 3, then state 2, then state 1 it works the first time through but when it comes to the last state (3 to 1) it ends up skipping state 1 (see below) so that still doesn’t solve my problem.
I really hope we can get else if statements or some way to jump out of the loop so it wouldn’t run the statements afterwards. I wish more updates were made to the prototyping side of Figma at ConFig, hopefully next year they will add some cool new functionality.
Hey All, thanks for the feedback and sorry for the lack of acknowledgement here!
We’ll pass this onto our prototyping team for future consideration.
It will work in some cases… but won’t work in some cases… example if in the Action you change the state of the thing you are testing for in the IF statement 😏
All the IF get evaluated one after another so if initially the state didn’t exist, one of the preceding actions could have changed it so it does and it all falls apart.
This would be useful even just for relatively basic prototyping.
I’m trying to set up a group of segmented controls with variables and conditionals. The segments are a subcomponent which can have 1 of 4 selection states:
For simplicity’s sake, I’ll show my issue based on a group with only two segments. The group can have four possible combinations:
What I need is essentially this:
If I string these together as 4 separate IF statements instead, it simply won’t execute properly. From past prototyping projects I understand that Figma executes each action in turn. I’m assuming it’s because if clicking on an item sets it to “false” and the next action checks for “false” to set it to “true”, they simply cancel each other out.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
