Boolean Property in Figma Components: What It Is and How to Use

A boolean property in a Figma component is a true/false toggle that controls which variant or state of the component is shown. It lets you switch features like visibility or style inside a component easily without detaching it. This helps create interactive and flexible designs by toggling options like on/off or show/hide.

How It Works

Think of a boolean property in a Figma component like a light switch in your room. It can be either ON (true) or OFF (false). When you toggle this switch, the component changes its appearance or behavior based on that setting.

Inside Figma, components can have properties that control their look or function. A boolean property specifically lets you choose between two states, such as showing or hiding an icon, changing a color, or toggling a button’s active state. This means you don’t need separate components for each variation; one component can adapt by flipping this true/false switch.

This makes your design cleaner and easier to manage, just like having one remote control for multiple devices instead of many remotes.

Example

This example shows a simple toggle button component with a boolean property called IsOn. When IsOn is true, the button shows a green circle; when false, it shows a gray circle.

figma

Component ToggleButton {
  BooleanProperty IsOn

  Variant On {
    Circle {
      fill: green
      visible: IsOn
    }
  }

  Variant Off {
    Circle {
      fill: gray
      visible: !IsOn
    }
  }
}

// Usage
ToggleButton(IsOn = true) // Shows green circle
ToggleButton(IsOn = false) // Shows gray circle

Output

When IsOn = true, the button displays a green circle.
When IsOn = false, the button displays a gray circle.

When to Use

Use boolean properties in Figma components when you want to toggle between two simple states without creating multiple separate components. This is perfect for things like:

• Switches or toggle buttons (on/off)
• Showing or hiding icons or labels
• Changing colors or styles based on a condition
• Enabling or disabling parts of a component

For example, if you design a checkbox, a boolean property can control whether the checkmark is visible or not. This keeps your design system neat and interactive.

Key Points

• A boolean property is a true/false toggle inside a component.
• It controls which variant or state the component shows.
• Helps reduce the number of separate components needed.
• Great for simple on/off or show/hide interactions.
• Makes components more flexible and easier to update.

Key Takeaways

Boolean properties let you toggle component states with true/false values.

They simplify design by reducing the need for multiple component versions.

Use them for switches, visibility toggles, and simple style changes.

Boolean properties make components flexible and interactive.

They help keep your Figma files organized and easy to maintain.