How to Use a Boolean Formula in Figma

Figma is known as one of the best programs for graphic designers worldwide. Its features are comprehensive, helping users create anything from eye-catching logos to unique landing pages. Notably, the Boolean feature (also part of the component properties update in 2002) allows you to achieve custom shapes by combining their layers through multiple formulas.

Here you’ll learn how to use the Boolean features in your next design.

The Boolean Formula Options for Custom Shapes

Before creating your custom shape, you’ll need to know how Boolean formulas work and what they achieve. Whenever you make a Boolean group, it’ll count as a single shape layer with both fill and stroke properties.

You can find the Boolean icon with two overlaying squares in the top bar of your interface. You’ll have four formula options from the drop-down menu when you click on it.

These formula options include:

• Union Selection – This option turns your selected shapes into a Boolean group. When using Union, the outer sub shape’s paths will form the new custom shape’s outline. However, it won’t include any of the inner overlapping segments.
• Subtract Selection – Considering this option is the opposite of the union selection is helpful. It removes the whole area of a shape from the base shape. This leaves only the bottom layer visible.
• Intersect Selection – With intersect selection, users can create a custom shape only consisting of the overlapping segments of the original shapes or sub-layers.
• Exclude Selection – Exclude functions is the opposite of the intersect Boolean group option. Using it will give you a custom shape from the non-overlapping parts of the original shapes.

Remember that you’ll need to select two or more shapes before you can effectively use the Boolean option from the top menu. This is because Boolean only combines multiple shape layers into one custom and complex shape.

Using the Figma Instance Swap Property

When Figma announced the component properties update in 2022, the Boolean selection was only one of the multiple new features available. The whole point of the components update is to help you make variation templates effectively rather than digging through out-of-the-way options.

While Boolean is an important part of this, users can also use the instance swap property. Here’s how to do so:

1. Select an element of your design.
   
2. Navigate to the instance swap menu on the right side of the interface and click on it. The icon has a diamond with an arrow on it.
   
3. Give a name to the property, such as “icon” on the pop-up menu, and set the value to a check mark, for example.
   
4. Select “Create property.” Figma will then mark the component property where the swap menu originally was.
   
5. Create a copy of your design by selecting it and using the command CTRL + C. Then, set the instances side by side.
   
6. Select a new icon from the marked component property menu by clicking on it. This will automatically change the element on the instance.

The instance swap function is all about convenience. Using the swap instance option, you’ll streamline the design process while quickly switching variations (instances) side by side.

Using the Text Property Option for Easy Instance Changes

Let’s say you’re designing a call to action button for a landing page. You have two variations side by side, and you’ve used the instance swap property to view different icons. However, the wording is another element to factor in.

Usually, you’d need to shuffle through the layers section to complete the process. With the text component property, you can view and change this on the sidebar instead. Here’s how you to use the text property feature to your advantage:

1. Select the text element on your design.
   
2. Give your element a name such as “text” and the value “button” before clicking on “Create property.”
   
3. You’ll then be able to change the text and experiment with wording for your call to action.

The text property is convenient to use alongside the instance swap and Boolean options.

How to Use Variant Properties on Figma

With the new component updates on Figma, you can create multiple variants and control them all from the right sidebar. Doing so will help you change text and swap icons more efficiently. You can also control other aspects of your variant’s design. Let’s see how to do so:

1. Select your design and click on “Add variant” in the top bar. Hold left, click on your design, and drag the variant right next to it.
   
2. You’ll notice how the second variant property will appear on the right sidebar. Re-label the property to “button” and the value next to it to “red.”
   
3. These properties will now label your variant. If you select your original design, you’ll notice the value is changed back to “default.”
   

FAQs

Can I make logos using the Boolean option?

Technically, the Boolean property allows you to combine multiple shapes using their paths. While this can be a way to make simple logos, the options are limited to simple shapes like ellipses. Instead, using the pen tool for things like logo creation is best. You can still use the other component updates to make the layering process easier.

Can I change the font using the text component property option?

Unfortunately not. The text component property allows you to change the text rather than the font. However, you can still select the text and find the appropriate font through the right sidebar.

What are some design instances where I’ll need to use the above component properties?

You don’t need to use component properties for variants. However, it makes the design process much easier and faster. Examples are buttons requiring different colors, primarily similar with only one component change, or small landing page shape variants. They’re also helpful for creating two designs and choosing the best one.

Streamline Your Design Process With Component Properties on Figma

With options like Boolean, you can create new custom shapes from a combination of old ones. This is done through the top sidebar with four formula options. These include union, subtract, intersect, and exclude. Likewise, you can use other component property options, such as text property and instance swap. Doing so makes it easy to create variants with different components. Ultimately, using component properties helps streamline the design process.

What complex shapes did you make using the Boolean option? Did you find the component property options easy to use too? Let us know in the comment section below.