How to Add a Boolean Component Property in Figma

You’ve been there. A component that should be simple — a button, a card, an input field — ends up multiplying into dozens of variants. One with an icon. One without. One with a label. One without that too. Before long, your component library looks like a maze no one wants to navigate.

This is where boolean component properties in Figma change everything.

One toggle. True or false. Show it or hide it. Instead of creating a new variant every time an element needs to appear or disappear, you attach a boolean property to the layer — and it just works.

Figma now commands over 40.65% market share in design software, and its component properties feature — including boolean — is one of the biggest reasons product teams stay. As of March 2025, Figma has over 13 million monthly active users, with nearly 95% of Fortune 500 companies using it in their workflows. Boolean properties are not a niche power-user trick. They are a core workflow tool.

This guide walks you through exactly how to add a boolean component property in Figma — from the parent layer, from the child layer, across instances, and everything in between.

What Is a Boolean Component Property in Figma?

A boolean component property is a true/false toggle that controls whether a specific layer inside a component is visible or hidden.

Think of it as a light switch. When the value is set to true, the layer is visible. When it is set to false, the layer is hidden. That’s it. No duplication. No separate variants for every visible/hidden combination.

Figma currently supports four types of component properties: Boolean, Text, Instance Swap, and Variant. Boolean is the one that handles visibility — and it’s widely considered one of the most powerful of the four.

Before boolean properties existed, the only way to handle “show or hide this element” was to create separate variants. You’d end up with “Button with Icon” and “Button without Icon” as two entirely different components. Multiply that across your entire design system and you’ve got a maintenance nightmare. Boolean properties collapse all of that into a single component with a clean toggle.

Why Boolean Properties Are Worth Learning

Here’s the real problem boolean properties solve: variant bloat.

Every time you add a new “state” to a component — icon visible, badge shown, divider hidden — without boolean properties, you’re creating a new variant. For a button component with four possible visible/hidden combinations, that’s 16 variants. Add one more toggle option and you’re at 32. The math compounds fast.

84% of designers collaborate with developers weekly via Figma, according to Figma’s own data. That means your component structure isn’t just a design decision — it’s a handoff decision. Cleaner components mean fewer misunderstandings, fewer back-and-forth messages, and faster builds on the development side.

Figma’s UI design market share grew from just 7% in 2017 to 90% by 2023, and this kind of time-saving infrastructure is a big part of why. Teams that adopt component properties — especially boolean — report significantly faster iteration cycles because they’re editing one source of truth instead of chasing down changes across 30 variants.

Boolean properties also make design systems dramatically easier to use. When someone picks up your component in a shared library, they see a clean toggle in the properties panel. They don’t need to hunt through a sea of variants to find the version they need.

What You Need Before You Start

You do not need a complex setup to use boolean properties. But a few things must be in place.

You need to be working with a main component or a component set — not a regular frame or group. Boolean properties can only be created on main components. If you’ve been working with frames and haven’t converted them to components yet, right-click the frame and select “Create component” first.

You also need to be in edit mode on the component file. If you’re working in a library file and only have view access, you won’t be able to add properties.

Finally, the layer you want to control with the boolean property must be a child layer inside the main component. Boolean properties specifically control layer visibility — so the layer needs to exist inside the component for the toggle to work.

How to Add a Boolean Component Property from the Parent Layer

This is the most direct method. You start at the top of the component and define the property from there.

Select your main component or component set. Click on it in the canvas or in the Layers panel. Make sure you’ve selected the parent — not a nested instance inside it.

Open the Properties section in the right sidebar. In Figma’s current UI, you’ll see a “Properties” section in the Design panel on the right. Click the + icon next to Properties. A dropdown will appear.

Select “Boolean” from the dropdown. This opens the “Create component property” modal.

Name your property. Give it a clear, descriptive name. Something like Has Icon, Show Badge, or With Label works well. Avoid vague names like Boolean 1 — your team (and future you) will thank you.

Set the default value. Choose true if the layer should be visible by default, or false if it should be hidden by default. You can also apply an existing boolean variable here if your design system uses variables.

Click “Create property.” The property is now created — but it is not yet applied to any layer. It exists as a property on the component, but nothing is wired to it yet.

Apply the property to a layer. Now select the specific child layer you want to control — the icon, the badge, the label, whatever you want to toggle. In the right sidebar under the layer’s visibility settings, you’ll see a small square icon (the component property icon). Click it and assign your newly created boolean property. The layer is now wired.

Once this is done, any instance of this component will show a toggle in the Properties panel that controls that layer’s visibility. One source of truth. One toggle.

How to Add a Boolean Property Directly from a Child Layer

This method is faster when you know exactly which layer you want to toggle. Instead of creating the property first and applying it later, you do both in one action.

Open the main component. Double-click to enter it, or select it in the Layers panel.

Select the child layer you want to make toggleable. This could be an icon layer, a badge group, a decorative element — anything inside the component.

Look at the right sidebar. Under the “Appearance” or “Layer” section, find the visibility icon (the eye icon or the small square icon next to the layer name). Click it — or look for the component property icon, which appears as a small hexagon or square.

Click “Create property.” A dropdown appears. Select Boolean from the options.

Name the property and set the default value. Same as before — give it a meaningful name and choose your default (true = visible, false = hidden).

Click “Create property.” Done. The property is created and applied to that layer simultaneously. No extra steps needed.

This method is especially efficient when you’re auditing an existing component and want to add boolean properties to multiple layers quickly. Select each layer, repeat the process, and your component gains a clean set of toggles without a single extra variant.

<div style=”float: right; position: sticky; top: 24px; width: 260px; background: #ECECFE; padding: 24px 20px; border-radius: 14px; margin: 0 0 28px 32px; font-family: sans-serif; box-shadow: 0 4px 18px rgba(42,90,248,0.10);”> <h2 style=”color: #1F2124; font-size: 19px; font-weight: 800; line-height: 1.3; margin: 0 0 10px;”>🎯 Build Pipeline While You Build Products</h2> <p style=”color: #1F2124; font-size: 14px; line-height: 1.6; margin: 0 0 18px;”>SalesSo designs complete outbound campaigns that turn your ideal clients into booked strategy meetings</p> <a href=”https://salesso.com/strategy-meeting” style=”background: #2A5AF8; color: #ffffff; padding: 11px 18px; border-radius: 7px; text-decoration: none; font-weight: 700; font-size: 14px; display: block; text-align: center; letter-spacing: 0.02em;”>Book Strategy Meeting</a> </div>

How Boolean Properties Work Across Instances

Once the boolean property exists on your main component, every instance across your design files inherits it automatically.

When someone picks up an instance of your component, they’ll see the boolean toggle in the right sidebar under the Properties section. No deep-selecting. No digging through layers. One click to show or hide the element.

This is what makes boolean properties so powerful for design systems shared across teams. Non-designers make up two-thirds of Figma’s 13+ million monthly active users — that includes product managers, marketers, and content leads who interact with components without editing them directly. Boolean properties give them the ability to customize components without touching the underlying structure. They see a toggle. They use the toggle. The design stays intact.

One important note: boolean properties currently control layer visibility only. They do not control color, size, or any other attribute. If you need to control those aspects, you’ll use a combination of text properties, instance swap properties, or variant properties alongside boolean.

Updating the Default Value of a Boolean Property

Sometimes you build a component with the icon hidden by default, then your design system evolves and you want it visible by default. Updating this is straightforward.

Select the main component or component set. In the Properties section of the right sidebar, click the pencil icon next to the boolean property you want to edit. The “Edit component property” modal opens. Use the dropdown in the Value section to switch between true and false. Click save.

The updated default value will reflect automatically on any instance that hasn’t had a manual override applied. Instances where someone has already toggled the property will retain their override.

How to Apply Boolean Variables to a Property

If your design system uses Figma’s variables feature, you can link a boolean variable to a boolean component property. This enables mode-based behavior — the property responds to a mode switch rather than a manual toggle.

To apply a variable: when creating or editing a boolean property, click “Apply variable” in the modal. A dropdown shows your available boolean variables. Select the one you want. The property is now driven by the variable’s value in each mode.

This is especially useful for light/dark mode design systems or for multi-brand component libraries where certain elements should appear in one context but not another.

Best Practices for Boolean Component Properties

Name properties for what they do, not what they are. Show Icon is clearer than Boolean 1. Has Divider is clearer than Divider Property. Good naming pays compounding dividends every time someone uses your component in a shared library.

Set defaults that match the most common use case. If 80% of your button instances need the icon, default to true. Your team will spend less time toggling and more time designing.

Combine boolean with other property types strategically. A button component might have a boolean property for the icon, a text property for the label, and an instance swap property for the icon type. Together, these three properties can replace 20 or more variants.

Add documentation to your components. Figma lets you add descriptions and links to documentation directly on a component. For complex components with multiple boolean properties, a short description of what each toggle does prevents misuse.

Be mindful of prototyping connections. This is the most common gotcha. If you’re consolidating two components that previously had prototype connections between them using boolean properties, those connections will be lost. Figma’s prototyping links must connect between two objects — boolean properties that replace those separate objects break the noodle. If you need prototyping interactions alongside visibility toggles, use interactive components with variant properties instead.

Common Mistakes to Avoid

Applying a boolean property to the parent instead of the child. The property needs to be wired to a specific child layer. If you create it from the parent and never assign it to a layer, Figma will show a “Not Used Within Component” warning, and the toggle won’t do anything.

Confusing boolean properties with boolean variables. These are two different things. A boolean property controls visibility. A boolean variable is a reusable value that can be applied to certain aspects of your design system. As of Figma’s current setup, boolean variables cannot be directly applied to boolean properties — but they can be mapped to variant properties.

Skipping the naming step. Leaving properties with default names like “Boolean” creates confusion in shared libraries. It takes ten seconds to name it properly. Do it.

Expecting boolean properties to work in prototypes like interactive components. Boolean properties toggle visibility in design mode. They do not trigger transitions in prototype mode. If you need a click to toggle visibility in a prototype, build that interaction with variables and variant properties.

Conclusion

Boolean component properties are one of the clearest examples of Figma doing exactly what a great tool should do — removing friction that was never supposed to be there in the first place.

Instead of multiplying variants every time you need a layer to appear or disappear, you attach a toggle and move on. Your component library stays clean. Your handoffs get clearer. Your team stops wasting time hunting for the right variant.

The steps are simple once you know them: select your component, open the Properties panel, add a boolean property, name it well, set a sensible default, and wire it to the right child layer. Whether you start from the parent or the child layer, the outcome is the same — a cleaner, more scalable component.

If you’re building design systems for products that need to generate pipeline, the same principle applies to outbound. Clean, targeted, scalable. At SalesSo, we build cold email, cold LinkedIn, and cold calling campaigns with the same level of precision — targeting the right people, with the right message, at the right time. Book a strategy meeting to see how we can build your outbound engine.