How to Crop a Shape in Figma: A Comprehensive Guide

Written by Daisie Team

Published on 25 May 2023 9 min read

Designing beautiful graphics is a breeze with Figma, and in this guide, we'll walk through the process of cropping shapes to make your designs stand out. Whether you're a seasoned designer or just starting, this guide will help you master the art of cropping shapes in Figma.

1. Preparing the Workspace

Before diving into the world of cropping shapes, it's important to have a well-organized workspace. In this section, we'll discuss how to set up your Figma workspace to make it easy for you to crop shapes efficiently.

Creating a New File

First things first, you'll need a Figma file to work with. To create a new file, simply follow these steps:

Open Figma in your preferred browser or desktop app
Click on the "+" button on the top left corner of the screen
Select "New File" from the dropdown menu

Now that you have a fresh canvas, it's time to set up your workspace.

Setting Up the Artboard

The artboard is the space where all your design elements will live. In Figma, you can easily create an artboard by following these steps:

Select the "Frame" tool from the toolbar on the left side of the screen (or press the "F" key)
Choose a preset size or draw a custom-sized frame on your canvas using your mouse

With your artboard in place, you're one step closer to learning how to crop a shape in Figma.

Organizing Layers

Layers are an essential part of any design project. They help you keep your elements organized and make it easier to work with them. To create and manage layers in Figma:

Click on the "Layers" panel on the left side of the screen
Create a new layer by selecting an object on the canvas and pressing "Ctrl + G" (or "Cmd + G" on Mac)
Rename your layers by double-clicking on the layer name in the "Layers" panel

With your workspace ready, it's time to start creating shapes and exploring how to crop a shape in Figma.

2. Creating Shapes in Figma

Now that your workspace is all set up, it's time to dive into the fun part: creating shapes! In this section, we'll explore the various tools and techniques you can use to create shapes in Figma. From basic shapes to custom designs, you'll be able to create anything you need before learning how to crop a shape in Figma.

Basic Shape Tools

Figma comes with a variety of built-in shape tools that make it easy to create basic shapes in just a few clicks. These tools include:

Rectangle: Press "R" or select the Rectangle tool in the toolbar to draw squares and rectangles.
Ellipse: Press "O" or select the Ellipse tool in the toolbar to draw circles and ovals.
Polygon: Press "P" or select the Polygon tool in the toolbar to create polygons with any number of sides.
Line: Press "L" or select the Line tool in the toolbar to draw straight lines.
Arrow: Press "A" or select the Arrow tool in the toolbar to create arrows with customizable heads and tails.

Experiment with these basic shape tools to create a variety of designs before moving on to custom shapes and combining them.

Creating Custom Shapes

While basic shapes are a great starting point, Figma also allows you to create custom shapes using the Pen tool. To create a custom shape:

Press "P" or select the Pen tool from the toolbar.
Click on the canvas to create anchor points and form the shape you desire.
Close the shape by clicking on the first anchor point or pressing "Enter."

With custom shapes, your design possibilities are limitless. Keep practicing and refining your skills, and soon you'll be ready to tackle the main topic: how to crop a shape in Figma.

Combining Shapes

Another powerful tool in Figma is the ability to combine shapes to create more complex designs. There are two main ways to do this:

Grouping: Select multiple shapes and press "Ctrl + G" (or "Cmd + G" on Mac) to group them together. This allows you to move and transform the shapes as a single unit while keeping their individual properties intact.
Boolean Operations: Use the Union, Subtract, Intersect, and Exclude options in the toolbar to combine shapes in various ways. This creates a new shape based on the interaction between the original shapes, which can be helpful when learning how to crop a shape in Figma.

Now that you're familiar with creating and combining shapes, it's time to explore different techniques for cropping them to perfection.

3. How to Crop a Shape in Figma: Techniques

You've mastered the art of creating and combining shapes in Figma, and now it's time to learn how to crop a shape in Figma. This section will dive into three different techniques that you can use to crop your shapes, giving you the flexibility to choose the best method for your specific project. All of these techniques are useful, so don't be afraid to try them all out!

Using Boolean Operations

Remember those Boolean operations we mentioned earlier when combining shapes? They can also be used to crop shapes in Figma! Here's how:

Select the shape you want to crop and the shape that will act as the "cutter."
Click on one of the following Boolean operations in the toolbar, depending on the desired effect:

Union (U): This will combine the two shapes, leaving only the overlapping area.
Subtract (S): This will remove the overlapping area of the top shape from the bottom shape, effectively cropping it.
Intersect (I): This will create a new shape, showing only the area where the two shapes overlap — great for cropping a shape in Figma to a specific area.
Exclude (X): This will create a shape that shows the non-overlapping areas of both shapes, effectively cropping both shapes where they overlap.

Boolean operations are a powerful way to crop shapes in Figma, but they're not the only method available. Let's explore another technique: masking.

Masking Techniques

Masking is another way to crop a shape in Figma, and it works by hiding parts of one shape using another shape as a "mask." Here's how you can create a mask:

Create the shape you want to use as the mask. This shape will determine the visible area of the shape being masked.
Select both the shape you want to mask and the masking shape.
Right-click and choose "Use as Mask" or press "Ctrl + Alt + M" (or "Cmd + Opt + M" on Mac).

The masked shape will now only be visible within the boundaries of the masking shape. Need to make adjustments? No worries — you can easily move, resize, or modify the mask as needed. Now, let's check out one more technique: clipping!

Clipping Content

Clipping is similar to masking, but instead of using one shape to hide parts of another, it uses a frame to define the visible area. This technique is perfect for cropping a shape in Figma when you want to keep everything neatly organized within a frame. Here's how to clip content using a frame:

Create a frame by pressing "F" or selecting the Frame tool from the toolbar.
Draw the frame around the shape you want to crop, leaving the desired visible area inside the frame.
Drag the shape into the frame in the Layers panel. The shape will now be clipped to the boundaries of the frame.

With clipping, you have the flexibility to change the size of the frame, and the content will automatically adjust to fit inside. This is especially useful when working with responsive designs or creating components that need to adapt to different screen sizes.

You're now equipped with three powerful techniques for cropping shapes in Figma. Next, let's learn how to edit your cropped shapes to make them even more impressive!

4. Editing Cropped Shapes

Now that you've learned how to crop a shape in Figma, it's time to fine-tune your masterpiece. In this section, we'll cover resizing and rotating, adjusting colors and styles, and modifying anchor points. Each of these techniques will help you refine your design and make it look even more polished. So, let's get started!

Resizing and Rotating

After cropping your shape in Figma, you may need to resize or rotate it to fit your design perfectly. Here's how you can do it:

Select the cropped shape by clicking on it.
For resizing, drag any of the bounding box handles to adjust the size. Hold Shift while dragging to maintain the aspect ratio.
For rotating, hover your cursor slightly outside a corner handle until it turns into a curved arrow. Click and drag to rotate the shape. You can also hold Shift while rotating to snap the angle in increments of 15 degrees.

Resizing and rotating are essential tools in your design arsenal, but there's more to explore! Let's move on to adjusting colors and styles.

Adjusting Colors and Styles

Once you've cropped your shape in Figma, you might want to change its color, gradient, or style to match your design. Here are a few simple steps to do just that:

Select the cropped shape you want to adjust.
Open the Properties panel on the right side of the Figma window.
Under the Fill section, click on the color box to open the color picker. Choose a new color, or adjust the gradient or pattern as needed.
If you want to change the stroke color or width, find the Stroke section in the Properties panel and make your adjustments there.

Now that your shape looks stunning, let's learn how to modify anchor points for even more control over the shape's appearance.

Modifying Anchor Points

Modifying anchor points allows you to fine-tune the shape you've cropped in Figma. This can be especially helpful when working with custom shapes or complex designs. Here's how you can modify anchor points:

Select the cropped shape you want to edit.
Double-click on the shape to enter the Vector edit mode. You'll see small squares at the corners and along the edges of the shape — these are anchor points.
Click and drag any anchor point to move it, which will adjust the shape's contour. Hold Shift while dragging to keep the movement constrained to vertical or horizontal directions.
To add a new anchor point, click on the edge of the shape where you want the new point to appear. To remove an anchor point, simply select it and press Delete or Backspace.

Now you're a pro at editing cropped shapes in Figma, making your designs even more impressive! But what's next? Let's learn how to export and share your cropped shapes with others.

So you've mastered how to crop a shape in Figma and edit it to perfection, but what good is that if you can't share your creations with the world? In this section, we'll cover various ways to export your cropped shapes, collaborate on your designs, and integrate Figma with other apps. Let's dive in!

Export Options

When it comes to exporting your cropped shapes in Figma, there are several file formats and options to choose from. Here's a quick guide on how to do it:

Select the cropped shape(s) you want to export.
Press Ctrl+Shift+E (or Cmd+Shift+E on Mac) to open the Export panel, or click on the Export button in the right sidebar.
In the Export panel, choose the desired format from the dropdown menu. Popular formats include PNG, JPEG, SVG, and PDF.
You can also adjust settings like size, scale, and quality, depending on the chosen format.
Click Export and choose a location to save your file.

Now that you've got your cropped shapes exported, let's talk about collaborating with your team or clients.

Collaboration Tools

One of the best things about Figma is its built-in collaboration features, making it easy to work on projects with others in real-time. Here's how to invite people to your Figma file:

Click the Share button in the top right corner of the Figma window.
Type in the email addresses of the people you want to invite, or you can copy the link and send it to them directly.
Set their access level: Can view for those who only need to see the design, or Can edit for those who need to make changes.
Click Invite, and your collaborators will receive an email notification with a link to your file.

Working together has never been easier, but what if you want to take your designs to another app? Let's explore Figma's integration options.

Integrations with Other Apps

While Figma is an amazing design tool on its own, you might need to connect it with other apps for a seamless workflow. Here are a few popular integrations:

Prototyping: Figma works well with tools like Marvel and ProtoPie, allowing you to export your designs and create interactive prototypes.
Project management: You can integrate Figma with task management apps like Trello, Asana, and ClickUp to keep your team on track and ensure everyone knows their responsibilities.
Version control: Abstract and Plant are two version control tools that can be connected with Figma, making it easy to track changes and manage different design iterations.

With these integrations, Figma becomes even more powerful, helping you stay organized and efficient throughout your design process.

Now you're equipped with all the knowledge you need to not only crop a shape in Figma but also edit, export, and share your designs with ease. Go forth and create amazing designs that leave your audience in awe!

If you found our comprehensive guide on how to crop a shape in Figma helpful, don't miss out on the workshop 'Start Designing in Figma' by Tetiana Gulei. This workshop will help you dive deeper into Figma and its powerful features, enabling you to create stunning designs with ease and confidence.