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.