Boolean operations let you combine multiple layers into a single object with shared properties called a boolean group. Boolean operations are non-destructive actions, which means you can still select and modify the layers in the boolean group. This flexibility allows you to keep iterating on designs without having to ungroup the layers or start over from scratch. You can apply boolean operations to shape layers, vector paths, and text layers. Note: Boolean operations now use a layer’s stroke and fill to calculate the geometry of the resulting shape.
Boolean operations: what you can do
The union selection operation combines the selected layers. If the layers overlap, the new object’s outer path is created by merging the outer edges of the layers. The layer at the top of the layer hierarchy will be used to determine the object’s fill, stroke, and effect properties but you can modify these properties at any time.
The subtract selection operation removes any areas overlapping the bottom layer of the current selection. The layer at the bottom of the layer hierarchy will be used to determine the object’s fill, stroke, and effect properties but you can modify these properties at any time.
The intersect selection operation creates a new object from where the selected layers overlap. Anything outside the overlapping area is removed, leaving just the areas where all layers intersect. The layer at the top of the layer hierarchy will be used to determine the object’s fill, stroke, and effect properties but you can modify these properties at any time.
The exclude selection operation creates a new object by removing the overlapping areas, keeping just the non-overlapping parts. The layer at the top of the layer hierarchy will be used to determine the object’s fill, stroke, and effect properties but you can modify these properties at any time.
Boolean operations are non-destructive actions. You won’t be able to change the fill, stroke, effects, or opacity properties of individual layers inside the group.
Practical scenarios and considerations
What if there are multiple instances of the same component and we only want to control one of them at a time? Similarly, I have cards with a border tied to a Boolean property. I want the boolean property to change to true when I click the CTA on the card, but only for one instance. You can attach the variable to a single instance to avoid changing all instances at once.
For interactive components, you can create a boolean property to control visibility or appearance without duplicating states as separate variants. This helps maintain reusability while enabling targeted interactivity, though some workflows may still require careful planning when refactoring existing components into component properties.
Text and appearance: You can use text properties to indicate which text layers should be edited directly from the instance, and you can use boolean properties to control visibility or styling without having to create separate variants for every combination. When a boolean property is created for layer visibility, a value set to false means the layer will be hidden. Set the default value to true or false as needed.
Component properties: four types and how they relate to booleans
Component properties expand beyond boolean visibility. There are four property types: Variant Properties, Instance Swap Properties, Text Properties, and Boolean Properties. Boolean Properties let you set true/false values for different layers where true means visible and false means hidden. This allows you to reduce the number of canvas states you must create explicitly, especially for large component libraries.
Variant Properties represent the traditional variants that create individual component states. Instance Swap Properties indicate which nested instances can be swapped. Text Properties enable editing of text layers directly from the instance in the Properties Panel. Boolean Properties tie to layer visibility and can streamline the management of common UI states across multiple variants or components.
When working with booleans, you can map them to relevant properties in the Properties Panel. If Show Description is true, you may also expose its text property for easy editing; if false, that text property may stay hidden. This approach keeps the panel clean and focused on applicable controls.
Best practices for using boolean properties in components
- Use boolean properties to minimize the number of variants required to represent UI states.
- Attach booleans to specific nested layers to control visibility without affecting the entire component.
- Consider how boolean properties interact with text and instance swap properties to maintain intuitive workflows.
- When refactoring, anticipate potential impacts on thousands of existing instances and plan publishing and syncing accordingly.
Common challenges and how to address them
Some users report difficulty finding where to apply boolean properties to specific layers within deeply nested components. The recommended approach is to select the target nested layer or the leaf you want to affect and then apply a boolean property from the right-hand panel. If your workflow relies on rapid multi-edit across variants, enable multi-edit to speed up editing of matching objects.
For text-heavy components, remember that applying a text property allows editing without deep-clicking into the text layer, which can improve consistency across variants and states. If you need a boolean to affect only a single instance, ensure the property is attached at the appropriate nested level rather than at the top level of the component.
Examples in practice
Imagine a Button component set with multiple variants. You can introduce a Boolean Property named “Has Icon” to toggle the presence of an icon across instances. Rather than creating separate variants for each combination, the boolean can govern visibility, simplifying maintenance. Another example is a notification component with a close button; boolean properties can reduce the number of required variants by controlling the close button’s visibility.
A practical tip is to create and apply text properties to match the text layer with the property name, ensuring overrides remain predictable across instances. You can also use instance swap properties to define which icons can be swapped, surfacing this option in the Properties Panel for quick changes.
Tips for starting with component properties
The easiest path is to update existing components to use text properties first, then gradually introduce boolean properties to simplify visibility and state management. If you’re migrating from legacy variants, approach the transition incrementally to maintain stability across your design system. Publishing updated components to the team library helps teammates access the latest behavior and properties.
Figma Boolean: Quick Guide in 3 Minutes
From a practical standpoint, the four property types can be used together to optimize component libraries: variant properties handle distinct states, instance swap properties manage nested icon substitutions, text properties enable quick copy edits, and boolean properties govern visibility and simple state toggles.
In short, booleans provide a scalable way to manage visibility and state across complex components, reducing the need to create numerous visually distinct variants and enabling more dynamic and maintainable design systems.