Clipping Path Figma Tutorial − Learn to Crop, Mask, and Remove Backgrounds

Like Adobe Photoshop, Figma is another highly popular image editing software that allows you to edit images with great results. Whether it’s cropping, masking images in different shapes, removing the background, or enhancing the color of images, Figma enables you to do most kinds of editing easily. However, in this guide, we’ll be walking you through an in-depth, step-by-step guide on clipping path Figma Tutorial. Therefore, if you’re interested in learning background removal, cropping, and masking in Figma, don’t miss out on this guide.

Step-by-Step Guide to Clipping Path in Figma

To do a clipping path (Removing background), you’ll need to be familiar with the pen tool. This tool is found in many image editing software such as Adobe Photoshop, Illustrator, Figma, etc. The pen tool works the same in all software. If you’re new to clipping path or background removal, you better select an image that’ll be easy to clip.

You can choose an image containing a smartphone, a laptop, or a TV. Just pick an image subject that has straight edges. However, here we’ll be looking at how you can easily remove the background from an image or extract the subject from an image.

Step 1 – Open the Image in Figma

The first thing to do is load the image on the Figma canvas.

How do you do that?

There are a few ways to load an image, and the simple one is to drag the image from the folder and drop it over the canvas.

If that’s not an option, go to the “File” option, where you should find another option named “Place Image.”

Click on that to open an image in Figma.

Step 2 – Zoom the Image

The more you zoom the image, the easier it’ll be for you to clip the subject properly. That being said, if the image quality is poor, then zooming much won’t do any good. In that case, keep the image at a range from where you can do the clipping easily.

Step 3 -Using the Pen tool

After importing the image and zooming it in, now it’s time to use the Pen tool. And this is where the actual clipping path process starts from. Select the pen tool from the left of the top column, the pen icon you see that’s what you’re looking for.

After selecting the pen tool, you are now ready to do the clipping. What you’ve to do is, draw along with the subject edge. Place the cursor at the edge of the image subject, press the right button of the mouse, keep it pressed and trace along with the edge.

You don’t have to draw long paths or lines, just draw short paths. And when you connect the ending point to the starting one, the path is closed.

Step 4 – Select the Layers

You should see an option named “Mask Group” on the left side of the screen. Check how many layers there are under the mask group. If your canvas has only one image over which you’ve used the pen tool, then there should be two layers.

The layer names would be “Vector 1,” and another would be the name of the image. Now, to remove the background of the subject you just have clipped around, you’ll have to drag the vector layer under the image.

Simply left-click on the “Vector” layer, keep the mouse button pressed and drag that layer under the image layer. To select both layers, keep the “CTRL” button pressed and right-click on both layers.

Step 5 – Removing the Background

When you’ve selected both layers, click on the icon (Looks like a moon) in the middle of the top column. That’s it! You have successfully removed the background.

Tip: If you’re a beginner it might feel a little hard for you to draw a clipping path around the subject accurately in the beginning. All you need to do is keep repeating the process until you achieve accuracy. Things get sweatier when the image subject has hundreds of curves and holes. Tracing those edges requires a great grip on the pen tool.

How to Crop a Shape in Figma?

Every designing tool has an image cropping feature, but the use process differs in tools. Cropping a shape in Figma is very simple, and here we’ll be taking you through the steps that’ll easily teach you how to do it.

Step 1 − Select the Shape

First, determine in what shape you want to crop the image. Right after opening the Figma, you should see a rectangle icon along with a downward arrow located on the left of the top column.

Clicking on that icon will drop a list that has different shape options. Choose the shape you need from the list.

Step 2 − Draw the Shape

Once you’ve selected a shape, now it’s time to draw it. To do that, you’ll have to take the cursor to the canvas, right-click on the mouse, and drag. This should draw the shape you selected earlier.

You can increase and decrease the size according to your need.

Step 3 − Select the Image

Go to the “Fill” option. You’ll find it in the right column. Upon clicking on that, you will see another option popping up named “Choose Image.” Click on that, and you’ll be able to pick the image you want to crop.

Step 4 − Crop the Image

After selecting an image from the file, you’ll see your desired image in the canvas. You’ll also notice 4 points in the corners of the image. If you take the cursor to any of the points, press the left button on the mouse (Keep the button pressed), and move, you’ll see the size increasing and decreasing, but the image won’t crop, rather it will keep on filling into the different sizes.

To crop the image, you’ll have to go to the small tab opened on your right (from where you chose the “Image” option). Click on the down arrow, and you’ll see four options in the list from where you’ll have to choose crop.

When you select the “Crop” option, a new rectangle shape with 8 blue points will appear on the image. Those points will allow you to crop the image according to your need.

How to Do a Clipping Mask in Figma?

Masking an image in Figma is very easy, it’s just a matter of a few clicks. In the guide below, we’ll take you through a step-by-step guide on how you can create text masks easily within a few minutes.

Step 1 − Creating Text

First, create a text on the canvas. To do that, you’ll have to select the “T” option found in the top left column. Select your desired font and then write the text you want to use as a mask. Increase the size according to the need, usually, people keep the size between 200 – 400. Keep the text you just have created in the center of the canvas.

Step 2 − Load the Image

There are several ways to load an image into Figma, and you can drag the image from the file and paste it over the canvas. Or you can install plugins that’ll allow you to import images from different sources. The most widely used plugin is Unsplash. Here’s how you can add unsplash plugin to Figma –

• Go to the Figma plugin page from the “Menu” option on the top.
• Select “Install a Plugin”, that’ll open a new window allowing you to search for the plugin.
• Search for your desired plugin and hit “Install”.

You can also import images from the “Choose Image” option that’s found in the “Fill” section. After loading the image, the text will be underneath the image.

Step 3 − Select the Layers

If you’ve only created a single text (YES, for example), that’s one layer. And the image which you have just load, that’s another layer. That means, right now, you have only two layers on the canvas. You can check that in the left column under “Mask Group.”Now, to mask the image, you’ll have to select both layers. There are two ways to select them.

You can put the cursor on a blank space in the canvas, press the left button of the mouse and drag through the entire canvas. Doing so will select all the layers you have on the canvas.

Another way is to keep the “CTRL” button on the keyboard pressed and click on both the layers displayed on the left column.

Step 4 − Masking

Once you’ve selected both layers, now you’re just a single click away from witnessing the magic.

There is an icon that looks like a moon, located in the middle of the top column. Click on that, and it’s done.

Frequently Asked Questions About  Clipping Path Figma Tutorial

we have answered some critical questions below.

Can you edit a PNG file in Figma?

Yes, you can. In fact, it’s very easy to do in Figma compared to other image editings software like Photoshop and Illustrator. Not only in PNG, but you can also edit images of most formats in Figma.

Does Figma have an image library?

One of the most appealing features of Figma is its large image gallery which allows you to browse through millions of attractive images.

What are the limitations of Figma?

The only limitation of Figma is, it’s hard in the beginning for people who don’t have experience in using vector-based image editing software.

Conclusion

Wrapping up this article on clipping path Figma tutorial with a few last words. Before you start editing the image, make sure you understand every step. A silly mistake is enough to frustrate you to the extent that you would end up giving up. You’ll require time to get a decent hold of Figma or any other image editing tool. Hence, be patient and keep practicing!!!