Image crop and fill modes in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Image Crop Mode

In Figma, when you set an image to Crop mode, what happens to the image inside its frame?

A The image is resized to fill the frame completely, possibly stretching it.

B The image is clipped to the frame boundaries without resizing, showing only the part inside the frame.

C The image is resized to fit inside the frame without cropping, keeping its entire content visible.

D The image is blurred to fit the frame size.

💡 Hint

Think about what happens when you want to keep the image's original size but only show part of it.

Crop mode clips the image to the frame boundaries without resizing it. This means only the part of the image inside the frame is visible, and the rest is hidden.

🧠 Conceptual

intermediate

Understanding Image Fill Mode

What does the Fill mode do to an image inside a frame in Figma?

A It stretches the image to fill the frame, possibly changing its aspect ratio.

B It centers the image without resizing, showing the entire image inside the frame.

C It resizes the image to fill the frame while maintaining its aspect ratio, cropping if necessary.

D It repeats the image to fill the frame.

💡 Hint

Think about how the image keeps its shape but still fills the frame completely.

Fill mode resizes the image to fill the frame while keeping its aspect ratio. If the aspect ratios differ, parts of the image are cropped.

❓ visualization

advanced

Choosing the Right Mode for Profile Pictures

You have a circular frame for user profile pictures. Which image mode should you choose to ensure the image fills the circle without distortion and no empty space?

A Tile mode, because it repeats the image to fill the circle.

B Fit mode, because it fits the entire image inside the circle without cropping.

C Crop mode, because it shows the whole image inside the circle.

D Fill mode, because it fills the circle and crops excess parts while keeping aspect ratio.

💡 Hint

Think about filling a round frame fully without stretching the image.

Fill mode resizes the image to fill the circular frame while keeping aspect ratio, cropping parts outside the circle. Crop mode does not resize and may leave empty space.

🎯 Scenario

advanced

Fixing Image Distortion in a Banner

You placed a rectangular image in a banner frame but notice it looks stretched horizontally. Which mode should you switch to in Figma to fix this without changing the frame size?

A Switch to Fit mode to resize the image proportionally to fit inside the frame without cropping.

B Switch to Fill mode to resize the image proportionally and crop excess parts.

C Switch to Crop mode to clip the image without resizing.

D Switch to Stretch mode to fill the frame by stretching the image.

💡 Hint

Think about keeping the image shape intact and fully visible inside the frame.

Fit mode resizes the image proportionally to fit inside the frame without cropping or distortion, preventing stretching.

🔧 Formula Fix

expert

Diagnosing Unexpected Image Cropping

You set an image to Fill mode in Figma, but the image appears cropped unexpectedly. What is the most likely cause?

A The frame size is smaller than the image aspect ratio, causing Fill mode to crop parts outside the frame.

B The image file is corrupted, causing random cropping.

C Fill mode always crops images regardless of frame size.

D The image was set to Tile mode accidentally.

💡 Hint

Consider how Fill mode works with different frame and image sizes.

Fill mode scales the image to fill the frame while keeping aspect ratio. If the frame's shape differs, parts of the image outside the frame are cropped.

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