LAUNCHED: Apply negated boolean variable (to the layer visibility)

Sometimes a particular boolean variable can affect several layers. And some of that layers may require inverted visibility state. E.g. Layer 1 is visible when the variable is truthy and Layer 2 is visible when the same varaible is falsy.

Let’s say, we have a multiselect field with a dropdown. When we select the first option, it should be added into the input as a label (label layer becomes visible). But also this option should be removed from the dropdown list as it’s no longer availiable for selection (option layer becomes hidden). So, both states depend on the same variable, but their conditions are inverted.

It would be nice to have some negation operator when applying a varaible. Kinda logical not (!) in JS: ! isSelected. Or just allow us to apply boolean expressions as we do in prototypes , e.g. isSelected != true.

2 Likes

Agreed, I was surprised that the variable logic wasn’t able to conditionally display an element if the value was false. This is something you see all the time in front-end code.

2 Likes

Figma team should make all the fields bindable to a variable. The visibility (on/off boolean) one is a no brainer to me. I’ve already had a couple of prototypes where I wanted to do that exact behavior.

3 Likes

I wanna toggle visibility of layer 1 with a boolean property, and then layer 2 should be toggled with negation of the same property.

For example, I have a block with 2 sub-blocks. Sub-block 1 should be visible if a boolean property “Market open?” is set to true, and sub-block 2 should be hidden in this case. When I toggle the property, visibility of the blocks should swap.

Of course, I can create 2 variants: one with sub-block 1 only, and another with sub-block 2 only. But they share the same design of all the other sub-blocks, and I wouldn’t like to have 2 sources of truth

image

2 Likes

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.

Hey everyone!

We are pleased to announce that with the launch of some new Figma Prototyping updates, you can now negate a boolean: a user can now use “!” or “not” in a boolean conditional check, rather than check “true” or “false”. Learn more in our article here.