When designing in Figma, precision is essential. Knowing how to cut a shape in Figma allows you to fine-tune your visual elements and achieve a polished look.
Figma’s shape tool offers various ways to manipulate vectors and shapes for your UI/UX design projects.
By mastering these techniques, you’ll effectively enhance your graphic design skills and create intricate design elements.
This article will guide you through the steps to cut shapes, employ boolean operations, and utilize pathfinder tools effectively.
Whether you’re working on web or mobile app design, understanding these processes will streamline your workflow and elevate your work.
By the end of this guide, you’ll learn the nuances of shape editing, including masking, layer clipping, and shape slicing.
Key points we’ll cover:
- Utilizing Figma’s boolean operations
- Enhancing shapes with vector editing
- Practical examples for prototyping and interactive design
Unlock your potential in Figma’s design workspace by mastering these shape manipulation techniques.
How to Cut a Shape in Figma: Quick Workflow
Cropping Shapes with Masks
1. Create the Shape:
Start by drawing the shape you wish to use as a mask (e.g., rectangle, circle, or any custom vector).
2. Position Your Content:
Place the object or image you want to crop within or behind the mask shape. Ensure they are aligned as necessary.
3. Apply the Mask:
Select both the shape and the content, right-click, and choose “Use as Mask.” This will make the top shape act as the crop area, hiding everything outside of it.
4. Adjust the Mask:
After applying the mask, you can resize or reposition it and adjust the content inside the cropped area. This method is particularly useful for creating focus areas in your designs.
Using Boolean Operations
For more complex shapes, Figma’s Boolean operations can be invaluable. Here’s how to use them:
1. Draw the Shapes:
Create both the base shape and the shape you want to use for cropping.
2. Select Both Shapes:
Highlight both layers that you want to manipulate.
3. Apply the Boolean Operation:
From the toolbar, select your desired operation:
- Union: Combines shapes into one.
- Subtract: Removes parts of the base shape.
- Intersect: Keeps only the overlapping area.
- Exclude: Creates a new shape from non-overlapping areas.
For example, if you want to cut a section out of a rectangle using a circle, place the circle over the rectangle, select both, and choose Subtract.
Cutting Shapes and Images

Step-by-Step Cutting Techniques
Using the Scissors Tool
Navigating the shape’s edges
First off, select the Scissors tool. Click around the shape’s edge to outline the cut path. Accuracy matters here, so zoom in if needed. Each click should be deliberate, marking the segments to cut.
Making precise cuts
After setting the cut path, click to finalize. The shape splits along the defined edges. Adjust if necessary using anchor points for precision.
Employing Boolean Operations
Subtract and Intersect for shape customization
Boolean operations are gold when customizing shapes. Use “Subtract” to remove overlapping parts of shapes, creating a cutout effect. “Intersect,” on the contrary, retains only the overlapping area, perfect for merging shapes into new forms.
Creating text-filled designs
Boolean operations shine with text too. Overlay text on a shape, then subtract the text area. Now you have a text-shaped window into your design, giving a customized, professional touch.
Advanced Cutting Approaches
Utilizing Masks for intricate cuts
Masks are your go-to for detailed cuts. Create a mask layer over the shape and adjust. This method excels with complex designs, letting you manipulate cuts at a granular level.
Cutting with Frames for grouped elements
Frames help manage grouped elements. Draw a frame around the elements you want to cut as a unit. Modify the frame to adjust the cut scope, ensuring grouped cohesion.
Custom Shape Cutting with the Pen Tool
The Pen Tool is versatile for custom cuts. Draw a tailored path around the shape. Click to add anchor points, then manipulate as needed for a precise, unique cut.
Manipulating Cropped Shapes
Refining Shape Segments
Adjusting anchor points for precision
Precision is everything when refining shape segments. Zoom in and click on the anchor points. Drag to adjust. If more control is needed, add or remove anchor points until the shape aligns perfectly with your vision.
Reshaping using Properties Panel tools
The Properties Panel is your command center here. With a shape selected, tweak parameters like height, width, and rotation. Adjust the curves and angles to mold the segment into the desired form. Simple sliders and input fields make this quick and precise.
Rearranging and Grouping Fragments
Aligning and organizing cropped parts
Select and drag cropped parts to rearrange them on the canvas. For alignment, use guides and snapping features to keep everything tidy. Misalignment can throw off the look—keep it sharp and intentional.
Grouping and naming layers for clarity
Creating groups is essential for managing multiple fragments. Select the layers and hit Ctrl+G
to group. Name each group descriptively. This makes navigation easier later, especially in complex projects with many elements and shape modifications.
Adjusting Crops Dynamically
Resizing cropped areas without distortion
To resize without distorting, hold Shift
while dragging the corners of a selected shape. This keeps the aspect ratio intact. Uniform resizing helps maintain the integrity and readability of your design.
Maintaining aspect ratios
For maintaining aspect ratios, the Constraints
feature is invaluable. In the Properties Panel, set constraints to lock proportions. This ensures elements resize proportionally, crucial for responsive design where consistency matters.
Enhancing Workflow Efficiency
Keyboard Shortcuts for Faster Edits
Common shortcuts for cropping and editing
Speed is king. Master these shortcuts:
V
: Select toolL
: Line toolC
: Crop toolCtrl + D
: Duplicate
These shortcuts streamline your process. Cropping and editing become swift, allowing more time for creativity.
Customizable shortcuts for frequent actions
Tailor your workflow. Figma lets you customize shortcuts. Access the keyboard shortcuts menu and assign keys to your most-used actions. This personalization boosts efficiency, making design tasks feel second nature.
Tips for Creating Polished Designs
Experimenting with multiple iterations
Never settle on the first design. Create several iterations. Each tweak, each version, brings you closer to your vision. Use Figma’s version history to track changes and revert if needed.
Testing visual balance with overlapping cuts
Overlapping cuts can make or break a design. Use layers to test different overlaps. Check the visual balance—adjust until it looks right. Overlapping is about harmony; it’s either balanced or it’s not. No in-between.
Troubleshooting Common Issues
Fixing misaligned cuts
Misalignments happen. Select the problematic part, and use Figma’s alignment tools—distribute, align, snap to grid. Precision comes from these small fixes. Realign until it’s perfect.
Resolving shape resizing errors
Resizing errors? They can distort your design. Use the Constraints feature in the Properties Panel. Lock aspect ratios to maintain shape integrity. Misresizing is often a sign: rethink the shape’s placement or scaling method.
FAQ on How To Cut A Shape In Figma
How do I cut a shape in Figma?
To cut a shape in Figma, first select the shape you want to manipulate.
Then, use the boolean operations found at the top menu – namely Subtract, Union, Intersect, and Exclude. These tools allow you to divide and customize the shape according to your design needs.
What’s the difference between Union and Subtract in Figma?
Union merges multiple shapes into one, combining their paths. Subtract removes the overlapping portion of one shape from another.
Both are part of Figma’s pathfinder tools, essential for complex vector editing tasks. This provides flexibility in shape manipulation.
How can I split a shape into multiple parts in Figma?
To split a shape, duplicate the initial shape and use the Subtract or Intersect operations.
Then, place new shapes over the areas you wish to split and apply the desired boolean operation. This will create individual segments of the original shape.
Can I use masking to cut shapes in Figma?
Yes, masking is another way to cut shapes. Place your desired shape over the mask layer, right-click, and select Use as Mask.
This non-destructive method adjusts visibility without altering the original shape, making it ideal for shape overlay and detailed adjustments.
Do Figma’s pathfinder tools support complex shape editing?
Absolutely, Figma’s pathfinder tools include functionality like Union, Subtract, Intersect, and Exclude, perfect for detailed graphic design.
These tools allow for precise adjustments and shape manipulations, ensuring high-quality design elements tailored to your project’s requirements.
How do I access Figma’s boolean operations?
Select the shapes you want to combine or subtract. Look at the top menu or right-click to find boolean operations: Union, Subtract, Intersect, and Exclude.
These tools provide essential shape customization options for UI/UX design, enabling intricate shape editing.
Is there a shortcut for cutting shapes in Figma?
There isn’t a direct shortcut for cutting shapes, but boolean operations like Union (Ctrl/Cmd + Option + A), Subtract (Ctrl/Cmd + Option + S), Intersect (Ctrl/Cmd + Option + I), and Exclude (Ctrl/Cmd + Option + E) streamline the process. Utilize these for efficient shape manipulation.
How do I fix issues with shape intersections in Figma?
When intersections don’t look right, check your layer order and path directions. Use the shape tool and modify the paths manually if needed.
Figma’s alignment tools also help ensure precision, correcting any misalignments in your design process.
Can I cut text like a shape in Figma?
Yes, convert text to outlines by right-clicking and selecting Outline Stroke. Then, treat it like any other shape.
Use boolean operations to cut and manipulate text for unique graphic enhancements and creative visual elements.
What are some common problems when cutting shapes in Figma?
Common issues include misaligned layers, incorrect path directions, and overlapping shapes not combining correctly.
Double-check your layers, path orientations, and use Figma’s alignment tools for precise adjustments.
These steps help avoid most problems encountered during shape manipulation.
Conclusion
Mastering how to cut a shape in Figma is a vital skill for anyone working on UI/UX design or graphic design projects. From basic shape tool adjustments to leveraging boolean operations and pathfinder tools, Figma offers comprehensive functionalities to suit your creative needs.
By utilizing the Union, Subtract, Intersect, and Exclude operations, you can efficiently manipulate shapes to fit your design. Additionally, techniques like masking and layer clipping provide further flexibility for intricate vector editing tasks.
In this guide, we’ve explored the crucial steps and tools needed to effectively cut shapes in Figma. Implement these techniques to enhance your design elements and ensure precision in your projects. Now, whether you’re designing a web interface, mobile app, or any digital product, your newfound skills will empower you to create compelling visual designs.