Figma Boolean Variables: State Without Variant Sprawl

WHY IT EXISTS: Before variables, managing state in Figma meant creating a separate variant for every combination. A button with a loading state, an error state, and an optional icon could balloon into eight variants. Updating a corner radius or font size required manually syncing every single one. Boolean variables were introduced to collapse these binary branches into a single component controlled by true or false flags, so a design system can scale without exploding maintenance overhead.

THE MENTAL MODEL: Think of a boolean variable as a light switch that controls several fixtures at once inside a component. Instead of building two rooms, one dark and one lit, you wire one switch to the bulbs. When the switch is false, the layers are hidden or inactive; when true, they illuminate. The variable is the single source of truth for that dimension of state, and every layer bound to it reacts together.

HOW IT WORKS: You create a boolean variable in the Variables panel, then bind it to supported properties such as layer visibility or component instance swaps. In practice, this usually means linking the variable to a layer so that false equals hidden and true equals visible. You can also combine booleans with other variable types, for example using a boolean to toggle whether a number variable drives spacing or not. When you change the boolean value at the component level, all instances update immediately. In prototyping, interaction triggers can flip these variables to simulate state changes like opening a modal or toggling a switch.

WHEN TO USE IT: Use boolean variables for any binary decision that recurs across components. Common examples are showing or hiding a loading spinner on a button, revealing an error icon on an input field, toggling badge visibility on a card, or switching between empty and populated states in a list. They are especially powerful when the same true or false condition should affect multiple sibling layers, because one variable keeps them synchronized without nested variants.

WHEN NOT TO USE IT: Do not use a boolean variable when a state has more than two values. Button hierarchy, for example, is not true or false; it is primary, secondary, or tertiary, which calls for a string variable or variant property. Avoid using booleans to store content like labels or hex codes. Also resist the temptation to create a component with ten boolean switches; debugging why a layer is missing becomes a combinatorial nightmare, and the component becomes fragile.

ONE CANONICAL EXAMPLE: Consider a card component that optionally displays a New badge. Without a boolean variable, you maintain two variants: Card and Card with Badge. When the brand color changes, you update both. With a boolean variable named showBadge, you build one card component, bind the badge layer visibility to showBadge, and expose the variable as a component property. On your dashboard mockup, you set showBadge to true; on the archive page, you set it to false. When the badge color changes next quarter, you edit one layer in one component, and every state inherits the change automatically.