Image import and placement in Figma - Step-by-Step Guide

Introduction

This feature lets you add pictures to your design. You can bring in images from your computer and place them exactly where you want on your canvas. It helps make your reports or dashboards more visual and engaging.

When you want to add a company logo to your dashboard

When you need to include a product photo in a sales report

When you want to place a background image behind your charts

When you want to show a map image to highlight regions

When you want to add icons or illustrations to explain data points

Steps

Step 1: Click

- Main menu > File > Place Image

A file browser window opens allowing you to select an image from your computer

💡 Use common image formats like PNG or JPEG for best compatibility

Step 2: Select

- File browser window

The chosen image is loaded and attached to your cursor ready to place

💡 You can select multiple images at once to place several on the canvas

Step 3: Click

- Canvas area

The image appears at the clicked location on the canvas

💡 Click and drag to place and resize the image in one step

Step 4: Drag

- Image on canvas

The image moves to a new position as you drag

💡 Hold Shift while dragging to keep the image aligned horizontally or vertically

Step 5: Use

- Selection handles around the image

The image resizes proportionally or freely depending on how you drag

💡 Hold Shift while resizing to keep the image proportions

Before vs After

Before

Canvas is empty with no images

After

Canvas shows the imported image placed at the chosen location and size

Settings Reference

Image fill mode

📍 Right sidebar > Design panel > Fill section

Controls how the image fits inside its frame

Default: Fill

Opacity

📍 Right sidebar > Design panel > Opacity slider

Adjusts the transparency of the image

Default: 100%

Image position snapping

📍 View menu > Snap to geometry

Helps align images precisely with other objects

Default: On

Common Mistakes

Trying to drag an image before placing it

The image must be placed on the canvas first before it can be moved

Click on the canvas to place the image, then drag to move it

Not holding Shift while resizing to keep proportions

The image can become stretched or squished if proportions are not locked

Hold Shift while dragging a corner handle to resize proportionally

Importing unsupported file formats

Figma does not support some image types like TIFF or BMP

Use supported formats like PNG, JPEG, or SVG

Summary

You can import images from your computer and place them on the Figma canvas.

Images can be moved, resized, and adjusted using handles and settings.

Remember to hold Shift to keep image proportions when resizing.