How to Create Boolean Variant in Figma: Step-by-Step Guide

In Figma, create a boolean variant by adding a Variant to your component and defining a property with Boolean type. This lets you toggle between two states like true/false inside the variant panel easily.

Syntax

To create a boolean variant in Figma, you first create a component and add variants. Then, define a property with the type set to Boolean. This property controls the two states: true and false.

• Component: The base design element.
• Variant: Different states or versions of the component.
• Property: The attribute that toggles between states, set to Boolean type.

text

Component > Variants > Property: Boolean (true / false)

Example

This example shows how to create a button with a boolean variant for isActive state. The button changes color when isActive is true or false.

text

1. Select your button design and create a component (Right-click > Create Component).
2. Click the '+' icon next to Variants in the right panel to add a variant.
3. In the Variants section, click 'Add new property'.
4. Name the property <code>isActive</code> and set its type to <code>Boolean</code>.
5. For the first variant, set <code>isActive</code> to <code>false</code> and style the button with a gray background.
6. For the second variant, set <code>isActive</code> to <code>true</code> and style the button with a blue background.
7. Now you can toggle <code>isActive</code> in the properties panel to switch button states.

Output

A button component with two variants toggled by the boolean property 'isActive': gray when false, blue when true.

Common Pitfalls

Common mistakes when creating boolean variants in Figma include:

• Not setting the property type to Boolean, which disables the true/false toggle.
• Forgetting to assign different styles for each variant state.
• Using multiple properties unnecessarily instead of a single boolean for simple toggles.

Always double-check the property type and variant styles to ensure toggling works smoothly.

text

/* Wrong: Property type set as Text instead of Boolean */
Property: isActive (Text) with values "true", "false"

/* Right: Property type set as Boolean */
Property: isActive (Boolean) with values true, false

Quick Reference

Step	Action	Notes
1	Create a component	Base design element to add variants to
2	Add variants	Click '+' in Variants panel
3	Add property	Name it and set type to Boolean
4	Design each variant	Style for true and false states
5	Toggle property	Switch between states in properties panel

Key Takeaways

Create a component first before adding boolean variants.

Set the variant property type explicitly to Boolean for true/false toggling.

Design distinct styles for each boolean state to see clear differences.

Avoid using text properties for simple true/false states to keep toggling easy.

Use the properties panel to switch boolean states quickly during design.