Can You Cut Shapes in Figma?
Yes, you can cut or erase out shapes using Boolean Operators. Specifically using the Subtract or Intersection operation. Any custom vectors you draw with the Pen tool can be modified using these operations as well.
These are the closes thing to an eraser tool in Figma. Subtract along with the Intersect Boolean operation should get you very far in not needing an actual eraser tool.
Subtract vs Intersection
Both the subtract and intersection operations can be used with text. For subtraction, as long as the text is overlapping the other shape at least partially it will work. It is also possible to cut out part of image file, like a PNG or JPG. I would recommend to crop the image but if you need a more custom shape cut out then using this Boolean operation is the way to go.
Using intersection you will get the inverse of subtraction and the text will now be filled with whatever is below it that was selected. This is great to use for creating text filled with an image. Example walkthrough of this text effect is below.
Subtract will combine( in a sense) all selected shapes into a single Boolean group. Just like the union operation except the new object will have a part/s ‘erased’ from it instead of being combined together. The group will be named ‘Subtract’ automatically. Using this operation only makes sense if the objects are overlapping each other, otherwise look into creating a group instead.
All the overlapping shapes/parts will be cut out of the bottom most shape. Appling a stroke illustrates this, as it will follow the contours of the new object and new cut out shapes within.
Intersect will cut away from the top most layer/shape that isn’t being overlapped by the bottom and remove the rest. Essentially erasing that top part of the image or shape.
Both can be applied to as many shapes you want, using (Shift Click) to select all of them. You can also cut out from other custom shapes that have been created through a previous union or other Boolean functions.
Note that once the object created from the subtract will inherit all the properties from the bottom most layer object, i.e. color, stroke.
Of course, the color and stroke of the new shape can be changed at anytime.
How to Cut or Erase Shapes in Figma
Cutting shapes, vectors, or images is simple in Figma, follow these steps:
- Select all the shapes that you would like to cut and the shape that you want to cut.
- Go to the top bar that has the three icons in the center and click on the arrow of the right most icon (Boolean Groups). This is only available after you’ve selected multiple shapes.
- Click on the Subtract Selection from the dropdown list.
If you do make a mistake this operation can be reversed by either right clicking on the new ‘Subtract’ shape layer and selecting “Ungroup” from the popup menu or just hitting ( Ctrl Shift D ) on the keyboard.
Can you Edit Shapes That Have Been Cut or Subtracted From?
Individual shapes can still be edited or moved even once you have subtracted or intersected them, just double click on the shape you would like to edit and you can move it around or even change the shape.
This is not the case for images that have been intersected with text. You can’t move the text around within the image.
You can consider the shapes in a group. If you click on arrow in the layers panel you will see all the individual shapes within the ‘Subtract or Intersect group’.
To keep things a bit more organized, once you are happy with the newly created shape you can flatten everything down with ( Ctrl E ). Make sure that your on the actual top Boolean layer and not a layer within it.
How to Create Photo Background Text
Below is a quick example of how to use the intersect operation. I will show you how to cut out text from a background image.
First import your image that you would like to use as the background for your text. I like to use Unplash, as they are high quality images that are royalty free as well. To do just just drag in the image from where ever you’ve downloaded it to.
Create the text, select your font type and size. In this example I’m using Inter font extra bold.
Position the font within the image, placing it where you think it will cut out the best pieces of the image. Don’t be afraid to experiment with these. Just duplicate the text and image multiple times ( Ctrl D ) and try out different options.
Once your are happy with the text placement, send the text layer to the back ( bottom ) by either doing it in that manually in the layers panel or with the keyboard shortcut ( [ ).
Select both the image and text together and go the the Boolean Groups tab in the top bar and select Intersect selection.
While on the on the ‘Intersect’ layer, hit ( Ctrl E ) to flatten it down into one layer and make sure to rename it.
Conclusion
The Boolean operations like subtract and intersection in Figma are a great way to make custom shapes or cool text effects. Paired with the union operation and you can pretty much make any shape or icon you wish.
Please comment below to let me know if you have any questions or suggestions on other topics you would like covered.
Thank you for reading!