Image crop and fill modes in Figma - Step-by-Step Guide

Introduction

This feature helps you adjust how images fit inside frames or shapes in your design. You can crop images to show only part of them or fill the shape completely without stretching.

When you want to show only a specific part of a photo inside a frame.

When you need an image to cover the entire shape without leaving empty spaces.

When you want to keep the image proportions but fit it inside a shape.

When you want to create a profile picture circle with the image cropped inside.

When you want to avoid distortion of images in your dashboard or report visuals.

Steps

Step 1: Select

- the image or frame containing the image

The image properties appear in the right sidebar

Step 2: Click

- the Fill section in the right sidebar

The image fill settings expand showing crop and scale options

Step 3: Click

- the dropdown menu next to the image thumbnail under Fill

Options for 'Crop', 'Fit', 'Fill', and 'Tile' appear

Step 4: Select

- Crop mode

You can drag the image inside the frame to choose which part to show; the frame size stays the same

💡 Drag the image to reposition the visible area inside the frame

Step 5: Select

- Fill mode

The image scales to cover the entire frame, cropping parts if needed without distortion

Step 6: Select

- Fit mode

The entire image fits inside the frame without cropping, which may leave empty space

Before vs After

Before

An image inside a square frame shows the entire photo with white space around it

After

The image fills the square frame completely, cropping edges but no white space remains

Settings Reference

Fill mode dropdown

📍 Right sidebar > Fill section > image thumbnail dropdown

Choose how the image fits or crops inside the frame or shape

Default: Fill

Image reposition

📍 Right sidebar > Fill section when Crop mode is selected

Adjust which part of the image is visible inside the frame

Default: Center

Common Mistakes

Choosing Fit mode when you want the frame fully covered

Fit mode keeps the whole image visible but leaves empty space if aspect ratios differ

Use Fill mode to cover the frame fully, cropping excess parts

Not dragging the image inside Crop mode to show the important part

The default crop may hide key parts of the image

Drag the image inside the frame to position the desired area

Summary

Image crop and fill modes control how images fit inside frames or shapes.

Crop mode lets you choose which part of the image shows by dragging.

Fill mode covers the entire frame, cropping if needed without distortion.

Fit mode shows the whole image but may leave empty space.

Use these modes to keep images looking good and focused in your designs.

Practice

1. Which image fill mode in Figma shows the entire image but may leave empty space around it?

easy

A. Crop

B. Fit

C. Fill

D. Tile

Solution

1. Step 1: Understand the Fit mode

   Fit mode scales the image to show the whole picture inside the frame, preserving aspect ratio.

2. Step 2: Compare with other modes

   Fill crops the image to fill the frame, Crop lets you select visible parts, Tile repeats the image.

3. Final Answer:

   Fit -> Option B

4. Quick Check:

   Fit shows whole image with space [OK]

Hint: Fit shows all image, Fill crops to fill space [OK]

Common Mistakes:

• Confusing Fill with Fit
• Thinking Crop shows whole image
• Assuming Tile fits image once

2. Which of the following is the correct way to set an image fill mode to Tile in Figma?

easy

A. Select image > Fill > Choose Tile

B. Select image > Crop > Choose Tile

C. Select image > Fit > Choose Tile

D. Select image > Fill > Choose Fit

Solution

1. Step 1: Locate Fill settings

   Tile mode is set under the Fill section where you choose how the image fills the shape.

2. Step 2: Confirm Tile selection

   Choosing Tile under Fill repeats the image to fill the frame.

3. Final Answer:

   Select image > Fill > Choose Tile -> Option A

4. Quick Check:

   Tile is a Fill option [OK]

Hint: Tile is under Fill, not Crop or Fit [OK]

Common Mistakes:

• Trying to set Tile under Crop
• Confusing Fit with Tile
• Selecting Fit instead of Tile

3. Given an image with aspect ratio 4:3 placed inside a square frame using Fill mode, what will happen to the image?

medium

A. The image will be cropped to fill the square without distortion.

B. The image will be stretched to fit the square exactly.

C. The image will fit inside the square with empty space around it.

D. The image will repeat to fill the square.

Solution

1. Step 1: Understand Fill mode behavior

   Fill mode scales the image to cover the entire frame, cropping parts if needed, without stretching.

2. Step 2: Apply to 4:3 image in square frame

   The image will crop some parts to fill the square frame fully, preserving aspect ratio.

3. Final Answer:

   The image will be cropped to fill the square without distortion. -> Option A

4. Quick Check:

   Fill crops image to fill frame [OK]

Hint: Fill crops, Fit leaves space [OK]

Common Mistakes:

• Thinking Fill stretches image
• Confusing Fit with Fill
• Assuming Tile repeats image

4. You set an image fill mode to Crop but the image does not show the expected part. What is the likely mistake?

medium

A. You used Fit mode which always shows the whole image.

B. You selected Tile instead of Crop mode.

C. You forgot to adjust the crop area after selecting Crop mode.

D. You set Fill mode which crops automatically.

Solution

1. Step 1: Understand Crop mode usage

   Crop mode requires manually adjusting the visible area to show the desired part.

2. Step 2: Identify common user error

   If the image does not show expected part, likely the crop box was not moved or resized.

3. Final Answer:

   You forgot to adjust the crop area after selecting Crop mode. -> Option C

4. Quick Check:

   Crop needs manual adjustment [OK]

Hint: Adjust crop box after selecting Crop mode [OK]

Common Mistakes:

• Assuming Crop auto-shows correct part
• Confusing Tile with Crop
• Using Fit instead of Crop

5. You want to create a repeating background pattern inside a large frame in Figma. Which fill mode should you use and why?

hard

A. Use Fit mode to show the whole image once with empty space.

B. Use Fill mode to crop and stretch the image to fill the frame.

C. Use Crop mode to select a part and stretch it to fill the frame.

D. Use Tile mode to repeat the image and fill the frame seamlessly.

Solution

1. Step 1: Understand repeating patterns need Tile mode

   Tile mode repeats the image multiple times to fill large areas seamlessly.

2. Step 2: Compare other modes

   Fit shows one image with space, Crop selects part but no repeat, Fill crops but no repeat.

3. Final Answer:

   Use Tile mode to repeat the image and fill the frame seamlessly. -> Option D

4. Quick Check:

   Tile repeats images for patterns [OK]

Hint: Tile repeats images; perfect for backgrounds [OK]

Common Mistakes:

• Using Fill or Fit for repeating patterns
• Thinking Crop repeats image
• Stretching image instead of repeating