Steps on how to use images in Figma - Free Figma Tutorial

In this following tutorial we'll learn how we can use images on Figma.


Importing Images

There are a few different techniques you can follow to import an image in your Figma file. You can just drag and drop the image to the Figma file. You can also either press Ctrl+Shift+K on your keyboard or select the Place Image option in the shape tool.

Image Formats

You can import images in any of the following formats: PNG, JPEG, GIF, TIFF or WEBP. Once an image is uploaded, it will show up in the Fill sections of the properties panel in the right.


Copying & Pasting

Importing images in Figma can be as simple as copy and pasting. All you need to do is right-click the perfect image you've found in your browser, select 'Copy image' and then, paste it in your design file in Figma. Most browsers support this feature.


Drag & Drop

Figma also allows you to drag and drop any assets you'd like to add to your design file. This is very useful when you'd like to add multiple images to the same file.


Editing/customizing images

Figma allows you to Crop, Resize, or applying filters like Exposure, Contrast, Highlight, Shadows, etc. After importing an image on the Figma canvas press Enter on your keyboard, or you can click on the Crop Image button at the top instead to open the image panel.

Buy Me a Coffee

Would love your thoughts, please comment.x