Boolean Operations in Figma
Last Updated :
18 Jun, 2024
Boolean Operations in Figma are a set of features that can be accessed for any set of shapes or combinations on the Figma design file. They help in improvising the design by performing combinational features to create a unique design out of the existing shapes & structures. This article will teach you the different types of boolean operations and how can one improve the features of his or her design by using them.
Boolean Operations in FigmaTypes of Boolean Operations in Figma
There are four different types on the basis of which you can implement Boolean Operations. They are placed in the top toolbar in the dropdown of the double square list as follows:
Boolean Operations1. Union Operation in Figma
The Union operation helps combine two or more shapes. They result in a combination of both the shapes & this results in an addition operation.
Create a frame and add a circle in the design along with a background color & a stroke in the following manner:
CircleThe following properties must be added in the circle:
Fill + Stroke PropertiesReplicate the same circle using Alt+Z and place the circle beside the first circle. Place both the circles over each other such that they overlap & then select on of the properties of boolean operations.
Two CirclesOverlapping the circles in the following manner:
Overlap circlesAfter Performing the Union operation the shape will look like this:
Union Operation2. Subtract Operation in Figma
The Subtract operation brings about a design in which only the layer present in the bottom remains & the layer of the top is removed.
Create the same circle & pair it in group and use the boolean operation of Subtract.
DesignAfter performing subtract operation the shape will look like this:
Subtract Boolean Operation3. Intersect Operation in Figma
The Intersect operation results in a design that takes the common out of the two shapes. Perform the same operation by taking a circle & replicating it, grouping it and then applying the intersect operation.
DesignAfter Performing Intersect Operation the shape will look like this:
Intersect Operation4. Exclude Operation in Figma
The Exclude operation is the opposite of intersection. It basically figures out those areas which are not common in both the shapes.
Perform the same operations by creating a circle, replicating it's design & grouping it to perform the exclude operation.
Exclude OperationPractical Use Cases of Boolean Operations in Figma
The Boolean Operations can be used in many practical aspects of design. One such being the art of creating artistic & improvised designs that would enhance the look of the design & in turn recreate the shapes into newer unique ones.
1. Creating a background for the shape inside the container
Step 1: Create a circle
Create a circle with the same background color & stroke as specified earlier as follows:
CircleStep 2: Duplicate the Design
Replicate the design & create two similar circles and place them side by side.
2 CirclesStep 3: Group the Circles
Group both the circles & perform the subtraction operation.
Subtraction Boolean OperationStep 4: Add a Background
Add a rectangle with a lighter color of the same color purple & place it on the design obtained.
Rectangle placed on circleStep 5: Use Exclude Option
Use the exclude operation that excludes the shapes that are not common between both the rectangle & circle. Only the stroke remains & the white color of frame regains in the circle again.
Final Design2. Creating beautiful designs
We can make small designs such as Rangolis or other beautiful aesthetic illustrations.
Step 1: Create the Pattern shown
Create two circles of the following dimensions and set the angles each one being negative of the other such that they align well.
DesignFollowing are the dimensions of the above shape:
DimensionsStep 2: Join the Shapes
Join the two shapes & group them together & choose Union Boolean Operation.
Union OperationStep 3: Replicate and Rotate the Design
Replicate the design using Alt+Z and rotate it by 180 degrees.
Design II ReplicationStep 4: Join the Designs
Join both the above displayed designs & again apply the Union Boolean Operation to it.
DesignStep 5: Add Background to the Design
To further improve the design, add a circle on the top of the design.
Circle + DesignStep 6: Apply Boolean operation
Finally, apply a boolean operation, here we have used Exclude to get the final design.
Final DesignConclusion
Boolean operations in Figma are essential tools for creating complex shapes and designs easily. They help you combine, subtract, intersect, and exclude shapes, giving you more flexibility and control over your designs. By mastering these operations, you can create unique and intricate designs more efficiently, enhancing your overall design workflow in Figma.
Similar Reads
Boolean Functions Boolean Algebra was given by George Boole. It is a set of rules used to simplify a given logical expression without changing its functionality. It is mainly used when several variables present are less. The algebraic expression used in Boolean Algebra is known as Boolean Expression and it is used to
4 min read
Binary Operation Binary Operation is an operation defined for any set S such that it takes two elements from S as input and produces a single element in S as output. As the name suggests, binary operations require at least two inputs as it is defined from the cartesian product of set to set itself.In this article, w
7 min read
Python Boolean Python Boolean type is one of the built-in data types provided by Python, which represents one of the two values i.e. True or False. Generally, it is used to represent the truth values of the expressions.Python Boolean TypeBoolean value can be of two types only i.e. either True or False. The output
7 min read
Bitwise Operators in LISP In this article, we will discuss the Bitwise operators in LISP. These operators are used to perform the manipulation of individual bits of a number. The truth table for bitwise AND, NAND, OR, XOR, NOR, & XNOR: aba and b a nand ba or b a xor b a nor b a xnor b00010011010111001110100110011100 Dif
4 min read
Flipping the boolean values in a Python list Flipping boolean values in a list involves changing True to False and False to True. This operation is straightforward in Python and can be accomplished using various methods. In this article, we'll explore different techniques to flip boolean values in a list in Python.1. Using List ComprehensionLi
3 min read
Understanding Boolean Logic in Python 3 Booleans are simple and easy to use concepts that exist in every programming language. A boolean represents an idea of "true" or "false." While writing an algorithm or any program, there are often situations where we want to execute different code in different situations. Booleans help our code to d
3 min read