Boolean Component Properties in Figma

WHY IT EXISTS: Before component properties existed, Figma designers managed optional elements by creating separate variants for every combination. A simple button with an optional icon required two variants, and the matrix grew exponentially as more options were added. Boolean properties were introduced to collapse these binary visibility choices into a single toggle, shrinking variant trees and making components easier to maintain.

THE MENTAL MODEL: Think of a boolean property as a light switch wired to a specific layer inside your component. Instead of building two rooms that are identical except for one lamp, you install one switch. When the switch is on, the lamp is visible. When it is off, the lamp is hidden. The room itself does not change.

HOW IT WORKS: You select a layer nested inside a main component and create a boolean property, giving it a clear name like Show Icon or Has Badge. Figma exposes a toggle in the right sidebar when an instance is selected. Setting the toggle to true keeps the layer visible, while false hides it. The layer remains in the component's layer tree; only its visibility changes per instance. This works best when the layer is a self-contained element that does not hold together the surrounding auto-layout frame.

WHEN TO USE IT: Use boolean properties for any binary visibility decision that does not require a different component structure. Common cases include showing a notification dot on an avatar, displaying a helper text block under an input field, adding a trailing icon to a button, or revealing a close button in a modal header. If the only difference between two states is whether something appears, a boolean property is the right tool.

WHEN NOT TO USE IT: Avoid boolean properties when hiding the layer would break the layout because the layer was acting as a structural spacer or auto-layout padding element. Do not use them when you need to swap the hidden element for a different one, since boolean properties only control visibility and cannot change the underlying node. If the component needs different styling, sizing, or behavior when the element is absent, a dedicated variant is usually safer.

ONE CANONICAL EXAMPLE: Consider a button component that can optionally display a star icon. Instead of maintaining Button Default and Button With Icon as separate variants, you build one Button component with an icon layer inside and add a boolean property named Show Icon. A designer placing the instance simply flips the toggle to show or hide the star. If you later need to swap the star for a heart, you can pair the boolean with an instance swap property on the same layer, keeping the component surface small and the system scalable.