You draw a circle, drop a smaller circle on top of it, and you want the middle gone. That’s the whole job. Figma gives you three separate ways to do it, and the one you pick decides whether the shape is still editable next week or frozen forever.
Boolean pairs and masks handle a lot, but not everything. Some silhouettes just don’t come out of two overlapping rectangles.
One detail worth knowing before you start: Figma’s Help Center documentation, current as of 2026, confirms boolean operations now calculate the resulting geometry from a layer’s stroke and fill, not just its outline. Most guides on this skip it. It changes what you get back when your shapes have thick strokes.
What Is Cutting a Shape in Figma
Removing, splitting, or carving away part of a vector object, right on the canvas. That’s it. You end up with a hole, a notch, some custom silhouette, or two separate shapes that used to be one.
People confuse it with a few things it isn’t. The Slice tool exports regions and never touches your geometry. Cropping an image inside a frame is a different operation entirely. And resizing changes scale while leaving the form exactly as it was.
Worth knowing how many people are doing this daily: 95% of the Fortune 500 used Figma as of March 2025, according to the company’s own SEC filing.
Font Awesome’s design team rebuilt its entire icon workflow around the tool. They’ve said the boolean features feel almost custom-built for icon creation, and the exported SVG files come out clean.
Here’s the part that matters more, though. Two out of three of Figma’s active users are not trained designers, per that same filing. Which is why nobody needs a lecture on vector theory when they’re trying to ship a working user interface component by Friday.
Cutting a Shape vs Masking a Shape in Figma
A mask hides part of a shape or image and leaves the underlying path alone. A cut rewrites the path. Unless the method you used stays editable, that rewrite sticks.
Masks make sense while the layout is still moving around and shapes might shift later. They also make sense when the original geometry should never change, full stop, for any reason.
Have you seen the latest Figma statistics?
Discover comprehensive Figma statistics including revenue growth, market share, user demographics, and funding data.
Check them out →An actual cut earns its place when you need one clean exportable icon or logo, when the file has to leave Figma as a single closed path, when the hole needs to be baked into the geometry rather than faked, or when you want the thing to behave as one object everywhere it gets dropped.
Figma’s own guide to masking a shape goes deeper on the reversible side of this.
Cropping an image inside a frame sits nearby but works differently, and it’s worth understanding the difference between crop and cut before you reach for either.
Masking is temporary. Cutting is structural.
How Boolean Operations Cut a Shape in Figma
Two or more vector layers get combined into one compound object, called a boolean group. Figma’s documentation calls this a non-destructive action, which in practice means the original shapes are still sitting inside the result, still selectable.
| Operation | Effect | Mac shortcut |
|---|---|---|
| Union | Merges outer edges into one shape | Option Shift U |
| Subtract | Removes the top shape’s overlap from the bottom shape | Option Shift S |
| Intersect | Keeps only the overlapping area | Option Shift I |
| Exclude | Removes the overlap, keeps the rest | Option Shift E |
These work on shape layers, vector paths, and text layers. They don’t work on frames or sections, which trips people up more often than you’d think.
Figma added dedicated shortcuts for all four in its February 2025 release, after enough people complained that the interface redesign had buried them behind extra clicks.
Why Subtract Is the One That Cuts
When someone says “cut a shape,” they almost always mean Subtract. It’s the operation that takes area away instead of adding it.
The layer stack decides everything. Whatever sits at the bottom of your selection keeps its fill, stroke, and effects. Whatever sits on top acts as the cutter and vanishes into the hole it leaves behind. Put a small circle over a large one and you get a donut, not two shapes.
The other three solve different problems. Union joins, Intersect isolates the overlap, Exclude keeps everything except the overlap. Only Subtract was built to remove.
What a Boolean Group Looks Like in the Layers Panel
You get a single nested layer, not two separate shapes sitting side by side.
Open it up and you can still edit some things, though not everything. Dimensions, position, and rotation of each inner layer are all fair game. So is corner radius on individual shapes inside the group. Fill, stroke, effects, and opacity, on the other hand, only apply at the group level.
Right-click and choose Ungroup to break the whole thing back into independent shapes.
That reversibility is the entire argument for using a boolean operation instead of Shape Builder.
How the Shape Builder Tool Cuts a Shape in Figma
You click or drag directly on a region where shapes overlap, and that region goes away. Fast, intuitive, and permanent. Figma’s documentation is blunt about it being a destructive action that changes any layer it touches.
Select your vector layers, press Enter to drop into vector edit mode, then pick Shape builder from the secondary toolbar.
From there you’ve got three behaviors, each triggered differently.
| Action | How to trigger it |
|---|---|
| Merge regions | Click and drag across them |
| Extract a region | Click it to move it to its own layer |
| Subtract a region | Hold Option (Mac) or Alt (Windows), then click |
Cut the wrong bit? Undo it immediately. Once you’ve moved on to other work, version history is your only way back.
Same tool on every tier, incidentally, so there’s nothing missing between Figma’s free and professional plans here.
How Vector Edit Mode Cuts a Shape at the Path Level
This one drops you down to the anchor points themselves. Add them, move them, delete them.
Press Enter, or just double-click the vector shape, and every point and bezier handle shows up.
Once you’re inside, there are two ways to make a cut. Deleting a point or segment opens the path where it used to close. Or you grab the Pen tool and draw a fresh line straight through the shape.
Vectors only. Raster images and live text give you nothing until they’ve been flattened or outlined.
Left with two loose endpoints after a cut? Join Selection reconnects them and you don’t have to redraw anything.
It’s the slowest method of the three. It’s also the only one that can produce a cut line no boolean pair would ever give you.
Choosing the Right Way to Cut a Shape in Figma
What the shape has to do after the cut is what should decide this, not which tool feels easiest in the moment.
My default is boolean subtract, pretty much always. It stays editable, and most of the Figma keyboard shortcuts people memorize are built around it anyway.
| Method | Best for | Reversible |
|---|---|---|
| Boolean subtract | Two shapes, needs to stay editable | Yes, non-destructive |
| Shape Builder | Several overlapping shapes, fast cleanup | Only via undo or version history |
| Vector edit mode | A precise, custom cut line | Editable while you work, permanent once saved |
| Mask | Hiding a shape or image without changing it | Fully, remove the mask anytime |
Font Awesome went boolean-first for this exact reason. Keeping every icon editable was worth more to them than shaving seconds off each cut.
Teams optimizing for throughput usually go the other way and live on Shape Builder, eating the destructive trade-off in exchange for fewer clicks.
Neither is wrong. They’re just weighted differently.
How to Cut a Shape Using Boolean Subtract
Under a minute once the shapes are in position.
Start from a consistent grid, the kind Figma’s own icon tutorials push, and every cut shape you make will line up with the rest of the set instead of drifting a pixel off.
- Draw or place the two shapes so they overlap where the cut should happen
- Move the shape you want removed above the shape you want to keep, in the layer list
- Select both shapes
- Open the Boolean operations menu and choose Subtract, or press Option Shift S (Mac) or Alt Shift S (Windows)
- Check the result: the top shape’s overlap is gone, and the bottom shape’s fill and stroke carried over
When the result looks wrong, it’s usually one of a few things. Nothing happened at all? One of the objects probably wasn’t a supported layer type. The whole shape disappeared? Your layers weren’t actually overlapping. Fill looks off? Swap which shape sits on top and run it again.
You can enter the boolean group afterward and nudge either original shape without redoing any of this.
How to Cut a Shape With the Shape Builder Tool
Better suited to messier work. Three or four shapes tangled together, not a tidy pair.
- Select every vector layer involved in the cut
- Press Enter to open vector edit mode
- Choose Shape builder from the secondary toolbar
- Hold Option (Mac) or Alt (Windows) and click each region you want gone
- Press Enter again, or click away, to lock in the result
Two habits worth building. Save a version first if the file actually matters, because this edit can’t be walked back the way a boolean group can. And zoom in on the tight corners, since one stray click takes out the wrong region and you might not notice until much later.
For several overlapping shapes, this usually beats running boolean subtract twice on click count alone.
How to Cut a Shape Manually With the Pen Tool
The only route to a cut line that no boolean pair or Shape Builder region could trace on its own.
- Select the shape and press Enter to open vector edit mode
- Switch to the Pen tool
- Click a point on the existing path where the cut should begin
- Trace the new line across the shape, clicking each point along the way
- Close the line against the opposite edge of the path to finish the cut
Zoom in before placing each point. The zoom controls in Figma make it easy enough to do without losing track of where you are on the canvas.
Once the cut closes, delete whichever half of the split path you don’t want.
It’s hand work. Expect it to take longer than either automated method, and don’t start it five minutes before a handoff.
Figma vs Adobe Illustrator for Cutting Shapes
Illustrator had shape cutting solved for two decades before Figma shipped its own take.
In Figma, boolean operations and Shape Builder both live inside one app, so there’s no panel switching. Shape Builder is the newer arrival here, folded into Figma Draw at Config 2025. There’s still no dedicated freehand knife tool.
Illustrator splits the same territory across three separate tools: Pathfinder, Shape Builder, and the Knife tool. The Knife cuts freehand along any path you draw, which Figma has no direct answer for. Pathfinder’s stacking order changes what Minus Front and Minus Back give you, and that catches people out for a while.
Adobe’s own documentation confirms the Knife tool divides a shape into multiple closed paths, with Option or Alt held down to force a straight cut.
Some history for context. Illustrator’s Pathfinder panel dates back to 1998. Its Shape Builder tool arrived in Illustrator CS5 in 2010, fifteen years ahead of Figma’s version.
American Bible Society’s design team said in a public StackShare post that they dropped Illustrator from daily use after moving to Figma, while still calling Illustrator’s vector tools strong.
Neither app is missing anything critical. They just carve up the same handful of ideas along different lines.
When Cutting a Shape in Figma Does Not Work
All three methods have a point where they fail quietly instead of throwing an error.
Apply Intersect to shapes that don’t overlap and they simply disappear from the canvas until you move them back together. Vector edits, boolean operations and Shape Builder included, don’t reach inside a component instance. And locked or hidden layers get skipped without a word from whichever operation you ran.
To cut a shape sitting inside a component, edit the main component. Or detach the instance and accept that it stops updating with the rest of the system, which is a real cost, not a formality.
Figma’s community forum has tracked reports of Outline Stroke corrupting complex paths since 2021. Support staff have confirmed the bug and noted it mostly hits icons imported from other apps.
As recently as May 2026, users reported Figma crashing after an unsuccessful Shape Builder cut. Confirmed and ticketed by the support team.
None of this is unusual. It’s what editing paths inside a browser costs you.
Keyboard Shortcuts for Cutting Shapes in Figma
Four keys cover most of what comes up after a shape is already cut.
- Flatten a selection: Command E (Mac) or Control E (Windows)
- Join Selection: Command J (Mac) or Control J (Windows), reconnects two open path endpoints
- Ungroup a boolean group: Command Shift G (Mac) or Control Shift G (Windows)
- Pen tool: P, for drawing a manual cut line
All of these assume the default Figma layout. Remapped keyboards or older shortcut sets will behave differently.
If you’re cutting more than a couple of shapes a week, four keys beat digging through menus every time.
Exporting a Cut Shape Out of Figma
Boolean groups and Shape Builder results export as a single object, same as anything else on the canvas.
Format depends entirely on where the file’s headed.
| Format | Keeps it a path | Best for |
|---|---|---|
| SVG | Yes, fully scalable | Icons, logos, code |
| PNG | No, becomes pixels | Flat images, transparency |
| Yes, but only at 1x | Print, fixed layouts |
Figma’s export documentation notes that strokes convert to fills on the way out. So a cut shape with a visible stroke looks identical after export but stops behaving like one, which is a fun thing to discover in a developer handoff.
Text behaves differently between an exported SVG versus PNG file too. SVG turns text into glyphs by default, so uncheck “Outline text” if the copy still needs to be editable downstream.
Clean up stray points first. Then optimizing the SVG strips out the leftover metadata that boolean groups like to leave behind.
Name your export settings before hitting Export. Across a full icon set, that one habit saves an entire renaming pass.
FAQ on How To Cut A Shape In Figma
What Is the Difference Between Cutting a Shape and Cropping an Image in Figma
Cropping trims what shows inside a frame or mask and leaves the original image or path completely untouched.
Cutting rewrites the path for good. Crop photos. Cut when the asset has to leave Figma as one solid shape.
What Happens to Strokes When You Cut a Shape in Figma
Per Figma’s documentation, a cut shape with both inner and outer edges (a donut, say) gets strokes applied along both.
Subtract keeps the bottom layer’s stroke settings. Match your colors before cutting, otherwise the result inherits the wrong one and you’re undoing it.
Can You Undo a Cut Shape in Figma
Command Z or Control Z reverses a cut right after you make it.
Boolean groups stay reversible longest, since ungrouping brings back the originals whenever you want. Shape Builder and vector edit mode leave you with undo or version history once you’ve moved on.
Can Figma Plugins Cut Shapes Faster Than the Native Tools
Figma Community has plenty of plugins built around boolean and vector operations, and most of them exist to batch repetitive cuts across many layers at once.
None of them replace Subtract or Shape Builder. They speed up scale, not the mechanics.
Can You Cut a Shape Out of Text in Figma
Live text has no path to cut until you convert it.
Flatten merges the whole thing into one vector layer. Outline Stroke keeps each glyph as its own editable layer. Either one unlocks boolean operations and vector edit mode on the letterforms.
Can You Cut an Image Directly in Figma Without a Mask
No.
Raster images are pixels, not a path, so boolean operations, Shape Builder, and vector edit mode all ignore them entirely. Trace a vector shape over the image, or use a mask and fake the same visual result.
Can You Cut a Shape Inside a Component or Auto Layout Frame
Auto layout resizes and repositions its children on its own, which can distort a shape the second your cut lands.
Cut the shape first, then drop it into the auto layout frame. Or turn off resizing on that specific layer before you start editing.
What Should You Learn First in How To Cut A Shape In Figma?
Boolean subtract comes first in how to cut a shape in Figma, ahead of Shape Builder and the Pen tool, because it’s the only one that leaves every layer editable when you’re done.
Working in this order saves rework later:
- Boolean subtract for two shapes
- Shape Builder for three or more regions
- Vector edit mode for one custom cut line
Two out of three Figma users aren’t trained designers, and Figma’s own documentation flags Shape Builder as destructive. Put those two facts together and you get the real problem: the people most likely to be cutting a shape are the least likely to spot a permanently altered layer before it ships.
The trade-off is speed. On complex multi-shape icons, Shape Builder genuinely finishes faster, and I won’t pretend otherwise.
A cut shape only proves itself once it’s inside an interface, so the obvious next move is building it into a button in Figma.
