In this lesson, we’ll learn a few ways to edit vector layers and craft a skills list to showcase our areas of expertise. For a personalized touch, we’ll start by creating some custom shapes which we’ll then combine with text layers in an auto layout frame. Figma Design is a vector-based design tool that can be used to create scaleable assets like icons, illustrations, and user interface elements.
But what are vectors exactly? Well, vectors are digital images that consist of points, lines, and curves, all defined by mathematical formulas. We’ll use vector layers to create the custom shapes for our skills list. Unique touches like this are a great way to leave a lasting impression on visitors to your portfolio.
Duplicating frames and shaping with corner radius
Duplicate the frame 4 times. Set the Corner radius to 24 to achieve a pill look. Because the rectangle is so small, changing the corner radius to 24 is enough to fully round the corners. Drag the new layer to the right of the original, aligning the tops of both layers.
Even though the shape looks like a single object, it’s made up of three separate layers, each with their own properties. Take a look at the layers section. To keep our shapes organized once we turn them into main components, we’ll give each of them a descriptive name.
Boolean operations: combining and shaping
Boolean operations let you combine multiple layers into a single object with shared properties called a boolean group. Union combines the selected layers. If the layers overlap, the new object’s outer path is created by merging the outer edges of all the layers. The opposite of union is subtract, which removes the area of a layer from the layer below it. Similar to using a cookie cutter layers at the top of the layer hierarchy cut out the area where they overlap with the layer at the bottom of the current selection.
Next is Intersect, which creates a new object from where the original layers overlap. Anything outside the overlapping area is removed, leaving just the areas where all layers intersect. The opposite of intersect is Exclude, which removes the overlapping area, keeping just the non-overlapping parts. You can apply boolean operations to shape layers, vector paths, and text layers. Boolean operations are non-destructive actions, which means you can still select, move, and resize the original layers. This flexibility allows you to keep iterating on designs without having to ungroup the layers or start over from scratch.
Because layers in a boolean group share a single set of properties, changes made to the properties of an individual layer will have no effect until it is removed from the group.
Practical examples: subtracting and rotating
Select the Subtract layer and rotate it 45 degrees using the handle on the canvas or the Rotation field in the right sidebar. The Subtract boolean operation cut the area of the ellipse out of the rectangle, meaning that any layers placed behind the rectangle will show through the hole that was created.
Duplicate the rectangle and rotate the new layer 45 degrees. Remember how we learned that duplicating layers can be used to create rotating patterns? With the duplicated layer still selected, duplicate it twice more using the shortcut. Select all four layers and use the Union boolean operation to merge them into a flower shape. Select it and the Union boolean group. Just like we did with the Diamond shape, we’ll use the Subtract boolean operation to punch a hole through the center of the flower.
Beyond this lesson: exploring more tools
In the next chapters, we’re going to set boolean operations aside and check out some other tools you can use to create custom shapes. We’ve only just scratched the surface, but hopefully you’re starting to see just how flexible and powerful boolean operations can be in your design workflow. If you’re looking for more practice, we’ve included some additional shapes and icons in the Figma Design for beginners Community file. Try recreating them using what you’ve just learned.
Infographic showing how vectors are built from points, lines, and curves and how boolean operations combine shapes.
An Introduction to Boolean Variables in Figma
Video tutorial snippet illustrating Union, Subtract, Intersect, and Exclude with practical examples.
| Operation | Result | Use Case |
|---|---|---|
| Union | Single outer path from overlapping edges | Combine shapes into a single form |
| Subtract | Hole where the top layer overlaps the bottom | Punch holes or cutouts |
| Intersect | Only overlapping region remains | Reveal common area |
| Exclude | Non-overlapping parts retained | Remove overlaps, keep shape edges |
Boolean operations are non-destructive actions, which means you can still select, move, and resize the original layers. This flexibility allows you to keep iterating on designs without having to ungroup the layers or start over from scratch.