How to Toggle a Boolean Variable to Show and Hide Layers in Figma

Figma's help center defines it directly: "If the value of the boolean variable is true then the layer will be visible. If the value of the boolean variable is false then the layer will be hidden." You bind it by right-clicking the visibility (eye) icon in the Appearance section. The normal variable picker on fills and text won't list boolean variables, which is the first thing that trips people up.

Because the value lives in a variable, several layers can share it. Bind a dropdown panel and a dimmed backdrop to the same menuOpen variable and one click shows or hides both. If you haven't created a variable before, start with how to create variables in Figma.

The Set variable action changes a variable's value when the trigger fires. For a boolean you can enter true or false, pick another boolean variable, or write an expression. To toggle, the expression negates the current value. Figma's expressions support ! or not for negation, so ! menuOpen and not menuOpen both work. You can type the expression in the field or build it from the selection panel of suggested variables and operators.

A forum thread on exactly this question ("on click toggle boolean variable to show/hide elements") has over 33,000 views, so if you got stuck here, you're in good company.

Create a boolean for each row, such as faq1Open and faq2Open, all set to false. Bind each answer layer's visibility to its row's variable. On each question, add On click → Set variable → ! faq1Open (and so on). Put the rows in a vertical auto layout frame, so when an answer is hidden the rows below move up and close the gap. The same pattern covers a password field's show/hide icon or a settings toggle.

When one click should do different things depending on state, use a Conditional action instead of a plain toggle. Set the condition to the boolean, for example menuOpen == true, then add the actions to run when it's true and a different set under else. Expressions also support and, or, == and !=, so you can check two variables at once, such as whether a user is logged in and a form is complete.

• Use Set variable alone for simple toggles: menus, accordions, checkboxes, a password eye icon.
• Use Conditional when the click should branch: navigate to one screen if a checkbox is ticked, show an error overlay if not.
• Use Set variable mode when you want to switch a whole theme, like light to dark. See variable modes and dark mode.

1. The variable is bound to the wrong thing. A boolean variable only controls visibility through the eye icon. Right-click the eye icon in the Appearance section and confirm the variable is selected there.
2. The action sets a fixed value. If the Set variable action says true, the first click shows the layer and later clicks do nothing. Replace it with ! menuOpen so it flips each time.
3. You're on a free plan. Using variables in prototypes, including Set variable, conditionals and expressions, is available on paid plans only.
4. The default value hides the trigger. If the button itself is bound to the variable, setting it to false hides the button too. Bind only the content that should appear and disappear.