Boolean Variables in Figma are variables that store only two possible values: true or false. They are mainly used to control on/off states, layer visibility, component variants, and interactive prototype states. Boolean variables make designs more flexible because a single variable can represent whether a particular feature, element, or state is enabled or disabled.
For professional Figma learning, explore JustAcademy Figma Training and Register for Figma Course Demo.
A Boolean Variable is a Figma variable whose value can be either true or false. Unlike Color, Number, or String variables, a Boolean Variable represents a binary state.
For example, an interface may need to know whether a notification badge should be visible. Instead of manually changing the visibility every time, we can create a Boolean Variable such as showNotification.
showNotification = true
showNotification = false
When the value is true, the related layer can be visible. When the value is false, the related layer can be hidden.
Boolean variables support only two logical values:
| Value | Meaning | Example |
|---|---|---|
| true | Enabled, active, visible, selected, or available | showIcon = true |
| false | Disabled, inactive, hidden, unselected, or unavailable | showIcon = false |
A Boolean Variable should be used whenever the design logic naturally has two possible states.
Boolean Variables reduce repetitive manual changes and make designs easier to manage. They are especially useful when a design contains many components or interactive states.
Boolean Variables and Boolean Component Properties both use true/false values, but they serve different purposes.
| Feature | Boolean Variable | Boolean Property |
|---|---|---|
| Purpose | Stores a reusable true/false value | Controls a component property |
| Values | true / false | true / false |
| Layer Visibility | Yes | Yes |
| Component Variants | Can be mapped to true/false variant properties | Can control component behavior |
| Prototype Logic | Yes | Not primarily a variable storage mechanism |
| Reusable Across Designs | Yes | Usually associated with a component |
In simple terms, a Boolean Variable stores the state, while a Boolean Property exposes a component-level true/false control.
Common Boolean Variable names can describe whether a feature or state is enabled.
isLoggedIn = true
isDarkMode = false
showNotification = true
showBadge = false
isSelected = true
isDisabled = false
showIcon = true
hasError = false
isExpanded = true
isLoading = false
Good Boolean names normally communicate a condition or state clearly.
Boolean Variables can be created from Figma's Variables view.
Collection: Component States
Variable: showBadge
Type: Boolean
Default Value: true
A Boolean Variable can be understood using four basic parts: collection, name, type, and value.
Variable Collection
|
+-- Component States
|
+-- showBadge
| Type: Boolean
| Value: true
|
+-- isDisabled
Type: Boolean
Value: false
Good naming is important because Boolean Variables are frequently used in design systems and prototypes.
Use names that clearly describe the state or condition.
| Good Name | Reason |
|---|---|
| showIcon | Clearly indicates visibility |
| isDisabled | Clearly indicates a state |
| isSelected | Clearly represents selection |
| hasError | Clearly represents an error condition |
| showBadge | Clearly represents badge visibility |
Avoid unclear names such as value1, flag, test, or boolean2.
One of the most useful applications of Boolean Variables is controlling layer visibility.
For example, suppose a card contains a promotional badge. Instead of manually showing and hiding the badge, create a Boolean Variable called showBadge.
showBadge = true
↓
Badge Visible
showBadge = false
↓
Badge Hidden
Figma supports applying Boolean Variables to layer visibility. When the variable is true, the layer is visible; when false, the layer is hidden.
showNotification = true
↓
Notification Layer → Visible
showNotification = false
↓
Notification Layer → Hidden
Boolean Variables can also be mapped to component variant properties that have true and false values. This makes it possible to switch component variants based on a Boolean state.
For example, create a button component with two variants:
Button
├── hasIcon = true
└── hasIcon = false
A Boolean Variable such as hasIcon can then determine which variant should be used.
Consider a button that can have an optional icon.
Variable:
showIcon = true
Component:
Button
├── showIcon = true
│ → Icon Visible
└── showIcon = false
→ Icon Hidden
This approach allows the component to respond to a reusable Boolean state instead of requiring multiple unrelated controls.
Boolean Variables are useful for representing whether an item is selected.
isSelected = true
→ Selected State
isSelected = false
→ Unselected State
This can be useful for cards, tabs, filters, checkboxes, navigation items, onboarding options, and other interactive UI elements.
A Boolean Variable can represent whether an interface element is disabled.
isDisabled = true
→ Disabled Button
isDisabled = false
→ Active Button
For a design system, variables such as isDisabled can help model reusable component states.
Notification badges are another practical example.
hasNotification = true
→ Display notification badge
hasNotification = false
→ Hide notification badge
This is particularly useful when designing dashboard interfaces, messaging applications, social media interfaces, and e-commerce applications.
Boolean Variables can represent whether a component is currently in an error state.
hasError = true
→ Show error message
hasError = false
→ Hide error message
For example, a form field can contain an error message layer that becomes visible when hasError is true.
Boolean Variables can also represent loading conditions.
isLoading = true
→ Show loading indicator
isLoading = false
→ Show normal content
This is useful when creating prototypes for login screens, dashboards, checkout processes, search results, and data-loading interfaces.
Boolean Variables can have different values across variable modes. Modes allow a collection to store different values for different design contexts.
Collection: UI States
Mode: Default
showBadge = true
Mode: Alternate
showBadge = false
Modes can be useful when the same variable needs to represent different contexts without creating separate variables for each context.
Boolean Variables are not limited to colors. They can represent whether a particular UI element should appear in a specific context.
Light Mode:
showDecorativeIllustration = true
Dark Mode:
showDecorativeIllustration = false
This can be useful when a decorative element is appropriate in one design context but should be hidden in another.
Boolean Variables can also represent whether an element should be available in a particular responsive context.
Desktop:
showSidebar = true
Mobile:
showSidebar = false
This concept can help communicate responsive behavior in a design system or prototype, although responsive layout behavior should still be designed using appropriate layout and component techniques.
Boolean Variables can help control optional interface elements when different localized versions of a design require different content structures.
showSecondaryLabel = true
showSecondaryLabel = false
For example, a design may show an additional label in one context and hide it in another when the available space is limited.
Boolean Variables are especially powerful in Figma prototypes because interactions can update variable values. Figma's Set variable action can assign true or false to Boolean Variables.
User clicks Toggle
↓
Set variable
↓
isDarkMode = true
↓
Dark state appears
This allows designers to build interactive experiences without creating a separate frame for every state.
A prototype can use the Set variable action to change a Boolean Variable.
Trigger: Click
Action: Set variable
Variable: isActive
New Value: true
A dark mode prototype can use a Boolean Variable to represent whether dark mode is enabled.
Variable:
isDarkMode
Initial Value:
false
User clicks Dark Mode Toggle
↓
Set variable
↓
isDarkMode = true
↓
Dark Mode Active
When the user interacts with the toggle again, the variable can be changed back to false.
A password field can use a Boolean state to represent whether the password visibility option is active.
showPassword = false
↓
Password appears hidden
showPassword = true
↓
Password appears visible
This is a useful example for demonstrating Boolean logic in an interactive prototype.
A Boolean Variable can represent whether a navigation menu is expanded.
isExpanded = false
↓
Collapsed Menu
isExpanded = true
↓
Expanded Menu
This can be used for sidebar navigation, accordion sections, dropdown menus, and mobile navigation prototypes.
In an e-commerce interface, a Boolean Variable can represent whether a product is added to a wishlist.
isWishlisted = false
↓
♡ Add to Wishlist
isWishlisted = true
↓
♥ Added to Wishlist
The variable can be updated through a prototype interaction.
A dashboard notification icon can use a Boolean Variable to control its badge.
hasUnreadNotification = true
↓
Show Badge
hasUnreadNotification = false
↓
Hide Badge
This provides a simple way to demonstrate conditional visibility in a prototype.
Boolean Variables can represent validation conditions in prototypes.
hasError = false
↓
Normal Input
hasError = true
↓
Show Error Message
Show Error Styling
For more advanced prototypes, Boolean Variables can be combined with expressions and conditional logic to create more realistic flows.
Figma prototypes can use variables with expressions and conditional logic. Boolean values can participate in logical checks such as whether a condition is true or false.
isLoggedIn = true
IF isLoggedIn
→ Show Dashboard
ELSE
→ Show Login Screen
This makes Boolean Variables useful for creating state-driven prototypes.
Conditional logic can be used to evaluate Boolean states.
IF isSelected = true
→ Show Selected State
ELSE
→ Show Default State
This approach is useful for onboarding flows, quizzes, filters, forms, dashboards, and other interactive experiences.
Boolean Variables can become part of a larger design-system architecture. A collection can contain reusable variables representing component states.
Component States
├── isDisabled
├── isSelected
├── isLoading
├── showIcon
├── showBadge
└── hasError
Organizing Boolean Variables in a dedicated collection can make large design systems easier to understand and maintain.
Boolean Variables are stored inside variable collections. A collection can group related variables together based on their purpose.
Variable Collection: Component States
├── isDisabled
├── isSelected
├── isLoading
├── showIcon
└── hasError
This creates a logical structure for managing component-related states.
| Feature | Boolean | Number |
|---|---|---|
| Values | true / false | Numeric values |
| Example | isDisabled = false | spacing = 16 |
| Main Use | Binary states | Sizes, spacing, dimensions |
| Visibility | Yes | No |
| Logical State | Excellent | Not primarily intended |
| Feature | Boolean | String |
|---|---|---|
| Value | true / false | Text |
| Example | isActive = true | buttonText = "Submit" |
| Main Purpose | Binary state | Text content or string-based values |
| Visibility Control | Yes | Not primarily |
Component variants represent different versions of a component, while Boolean Variables can provide reusable true/false values that can be mapped to appropriate variant properties.
Boolean Variable
↓
isSelected = true
↓
Component Variant
↓
Selected State
This combination is particularly useful for interactive components and design systems.
Create a toggle component using a Boolean Variable.
Name: isOn
Type: Boolean
Value: false
Create two visual states representing the toggle's off and on conditions.
Toggle
├── isOn = false
│ → Off
└── isOn = true
→ On
Add an interaction that changes the value of isOn.
On Click
↓
Set variable
↓
isOn = true / false
Run the prototype and click the toggle. The Boolean Variable should change state and the related component behavior should update.
Create a notification settings prototype.
Variable:
notificationsEnabled = true
ON:
Notifications Enabled
OFF:
Notifications Disabled
Use a toggle component and Set variable interaction to switch the value.
Create a mobile navigation menu controlled by a Boolean Variable.
Variable:
isMenuOpen = false
false → Menu Closed
true → Menu Open
When the hamburger icon is clicked, update the Boolean Variable and change the menu state.
Create a product card containing an optional discount badge, wishlist icon, and availability state.
Variables:
showDiscount = true
isWishlisted = false
isAvailable = true
These states can control different visual elements of the product card.
Create a login prototype using Boolean Variables.
Variables:
isLoggedIn = false
hasError = false
isLoading = false
Login Click
↓
isLoading = true
↓
Validation
↓
IF successful
→ isLoggedIn = true
→ isLoading = false
ELSE
→ hasError = true
→ isLoading = false
This example demonstrates how multiple Boolean Variables can represent different application states.
When developers inspect designs in Dev Mode, they can encounter Boolean Variables along with other variable types. Variable details can provide information such as the variable name, collection, mode, value, scope, and code-related information.
This makes well-named Boolean Variables useful for design-to-development handoff.
Use clear names that developers can understand without additional explanation.
Good:
isDisabled
isSelected
showBadge
hasError
Avoid:
flag1
state2
boolValue
testBoolean
Consistent naming makes it easier to understand the intended behavior when reviewing designs.
| Pattern | Example | Purpose |
|---|---|---|
| is + State | isActive | Represents a state |
| has + Feature | hasError | Represents existence or condition |
| show + Element | showBadge | Controls visibility |
| can + Action | canSubmit | Represents permission or capability |
| should + Action | shouldAnimate | Represents a conditional behavior |
Do not use a Boolean Variable when more than two numeric values are required.
Wrong:
spacing = true
Better:
spacing = 16
Wrong:
flag = true
Better:
showBadge = true
Avoid creating separate variables for the same logical state when one well-organized variable can serve the required purpose.
Understand whether the requirement is to store a reusable value or expose a component-specific control.
Identify Binary State
↓
Create Variable Collection
↓
Create Boolean Variable
↓
Set true / false Value
↓
Apply to Layer or Variant
↓
Create Prototype Interaction
↓
Change Variable Value
↓
Test Prototype
↓
Document and Maintain
| Item | Details |
|---|---|
| Type | Boolean |
| Possible Values | true / false |
| Primary Use | Binary states |
| Layer Visibility | Supported |
| Component Variant Properties | Can be mapped to true/false values |
| Prototype Interaction | Can be changed using Set variable |
| Modes | Can represent different values by mode |
| Common Names | isActive, isSelected, showBadge, hasError |
A Boolean Variable is a variable that stores either true or false.
The two values are true and false.
They can be applied to layer visibility and can be mapped to component variant properties with true and false values.
Yes. Boolean Variables can be changed through prototype interactions such as Set variable.
The associated layer is visible.
The associated layer is hidden.
Examples include isActive, isSelected, showBadge, hasError, and isLoading.
Yes. Boolean Variables can be mapped to variant properties that have true and false values.
They provide reusable binary states that can help manage component behavior, visibility, and interactive states consistently.
A Boolean Variable stores a reusable true/false value, while a Boolean Component Property provides a component-level true/false control, primarily for layer visibility.
Learn Figma Variables
↓
Understand Variable Collections
↓
Learn Boolean Variables
↓
Create true/false States
↓
Control Layer Visibility
↓
Use Component Variants
↓
Use Prototype Interactions
↓
Use Set Variable
↓
Use Conditional Logic
↓
Build Interactive Components
↓
Create Design System States
Boolean Variables are an important part of Figma's variable system because they provide a simple way to represent two-state conditions. With only true and false values, they can control visibility, component variants, prototype states, and interactive behaviors.
When Boolean Variables are combined with variable collections, modes, component variants, and prototype interactions, designers can create flexible design systems and realistic interactive prototypes with fewer duplicated components and frames. Using meaningful names such as isSelected, isDisabled, showBadge, and hasError also makes the design easier to understand and maintain.
