UI/UX design became the most important task in the era of digital marketing. If you are a first-timer, do you know how to crop a shape in Figma?
That said, Figma is the first choice of expert UI designers to make web pages and application interfaces. The stunning prototyping tool is so lightweight that you can use it on your web browser to experiment with different layouts.
So, we are presenting you a series of tutorials on how to crop vectors in Frigma, which leads to cutting an image in today’s article! By the way, Welcome to Ellarei, and let’s get started!
Contents
How to Crop an Image in Figma?
Figma cropping shortcuts are way too simple! You can make use of shortcut hotkeys to find the options faster! Yet, we will focus on the main menu to do the job like decent pupils!
For instance, we will use the Fill option to complete our mission. First, let’s learn some information about the Fill mode.
What is Fill mode?
Basically, Fill mode considers the dimensions of your shape or image and the to-be-added image. It displays the image based on your desired size.
How to crop an Image Using Fill Mode?
- Among all the layers, select the layer you want to reshape.
- In the Fill section of the Properties Panel, click on find the Image thumbnail, click on it, and open the Fill menu.
- On the top left corner of the image, a drop-down menu will appear with four options, Fill, Fit, crop & Tile. Select crop from that menu.
- You will see eight blue handle rectangles around the image. Now, move the positions of the handles to determine your cropping.
- Done! Click on any place on the rectangle to save your selection. Alternatively, you can click on the X to set and close the window.
Well, there is a faster way to complete the task! Especially for the newbie professionals who have a lot of work to finish in a limited time! Follow the process below.
- Select the image or shape you want to crop in.
- Hold down the control key on Windows (Command key on Mac), then drag the corners to expand or contract the selected area.
- If you change your mind, just release the control button (Command on Mac) to revert. Done!
That’s how you can crop a shape or image in Figma. Tune in to our next tutorial to learn more exciting things!
FAQ
How do I crop a specific shape?
To crop a dedicatedly drawn shape in Figma, follow these steps. 1. First, draw your circle. For example: Hit the O key on the keyboard to activate the ellipsis tool, then hold shift to draw a perfect circle. 2. Click the right button on the circle to send back the shape. 3. Click and drag the mouse on both the circle and the image. 4. Click Use as mask button on the top screen. (For a shortcut, press Ctrl + Alt + M keys together to do the same job.
Can you cut out shapes in Figma?
Yes, you can cut or erase out shapes in Figma. There is an option called Boolean Operators to complete the task. It is used for subtracting or intersecting operations. Any custom vectors drawn by the Pen tool can be changed through this operation.
How do I crop a circle image in Figma?
To crop a circle image, Click the right button on the circle to send back the shape > Click and drag the mouse on both the circle and the image > Click Use as mask button on the top screen. Done!
How do you crop a square in Figma?
To crop a square, Select the square layer > click on find the image on thumbnail > Click fill from the drop-down menu in the top corner > Move the positions of the visible eight blue handles > Click on any place on the sqy=uare image to set the selection.
