Figma is a powerful vector graphics editor and prototyping tool that allows you to create stunning, interactive visual designs for websites and apps.
With an intuitive interface and a wide range of features and tools, Figma makes it easy to quickly conceptualize ideas, experiment with different layouts and content combinations, and iterate on your designs in real-time.
Whether you’re a professional designer or simply looking to create your own graphics and prototypes, Figma is the tool for you.
Learning to use Figma is super simple and in this post I’ll show how to crop images and how to cut out different shapes like a circle from a image.
How to Crop an Image in Figma
Cropping images in Figma is very simple and can be done two ways. The fastest is using the keyboard shortcut by holding down ( Ctrl ) while clicking on any blue corner icon. Make sure to have the target image selected first.
Letting go of ( Ctrl ) before clicking your mouse will cause the image to scale to the new dimensions and can cause the image to become distorted. If this happens then hitting ( Ctrl Z ) will undo the previous action.
I recommend cropping an image by changing the fill mode to “Crop”. This way you get to see the whole image compared to what your cropped area looks like.
To crop an image:
- Select you image and double click on it. The will open up the image properties panel.
- Click on the Fill mode and in the drop-down menu select Crop.
- Now you have 8 blue handles around your image. Click and drag them in their respective directions.
- Click on the image will reposition it according to the cropped area.
- Hit ( Enter ) on the keyboard to accept the changes.
If your not happy with the cropped image you can double click on the image and reposition the image or the cropping field. This is a non-destructive action and the image will be preserved.
How to Crop or Cut Out a Shape in a Image
To cut out shapes like a circle we will utilize masks. Using masks will allow us to only show specific areas of an object.
Masks are a non-destructive procedure because no portions of masked layers are changed or removed. This lets you to keep the hidden areas without having to cut them down to fit.
Follow these steps to cut out a circle in your Image:
1. First draw your shape. In this example I’m using a circle. Hit ( O ) on the keyboard to switch to the ellipse tool. Hold down ( Shift ) to draw out a perfect circle. Position the circle on the image. Have it on top of what you want to keep.
2. Either right click on the circle and select “Send to back” or just hit ( [ ) on the keyboard. Select both the photo and the circle together. Click and drag the mouse over them both.
3. Click the ” Use as mask” button at the top of the screen or ( Ctrl Alt M ) on the keyboard.
This process can be used for any shape including custom ones drawn using the Bezier Pen.
This will create a mask group. Double clicking on the text will allow you to rename the group to something more meaningful.
Clicking on the lock icon will lock the group in place, meaning you won’t be able to move the masked image at all unless you unlock it.