How to use Boolean Variables in Figma

Oscar de la Hera Gomez
A flower that represents Figma with the text "Use Boolean Variables" beneath it.

Select an element, right click on the eye icon under Layer and click the Boolean Variable.

Please note that you cannot yet apply variables to component properties.

To apply a boolean variable to a component, you must detach the component from its instance and then apply the variable as if it were a standalone frame.

Step One: Select the UI Element

A screenshot of Figma highlighting a frame. Please note that boolean variables can be applied to the layer visibility of any UI element including frames, text, paths, images or videos.

In a Figma design file, select a UI element.

Step Two: Apply the Variable

A screenshot of Figma with a UI element selected. We have highlighted how if you right click on the eye icon under <em></em>"Layer" on the right menu sidebar, it will open up the variables menu. Select the boolean variable you wish to apply. True will mean it is visible, false that it is not visible.

Right click the eye icon under Layer and select the variable you wish to apply.

  • True will make the UI element visible.
  • False will make the UI element invisible.
A screenshot of Figma showing that the boolean variable has been applied. The variables window is open and it shows that as it is set to true, the UI element is visible.

if you update the boolean variable, it will update the visibility in any location where it is applied.

A screenshot of Figma showing that the boolean variable has been applied. The variables window is open and it shows that we have updated it to false, and that the UI element is now invisible.

Looking to learn more about things you can do with Variables or Figma ?

We recommend you check out our Figma Variables Guide or search our blog to find educational content on learning how to use Figma.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details