Bird
Raised Fist0
Figmabi_tool~15 mins

Image crop and fill modes in Figma - Real Business Scenario

Choose your learning style10 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Scenario Mode
👤 Your Role: You are a UI/UX designer working with the marketing team.
📋 Request: Your manager wants you to prepare a dashboard mockup with images that fit perfectly in their frames without distortion or empty spaces.
📊 Data: You have several images of different sizes and aspect ratios to place inside fixed-size frames on the dashboard.
🎯 Deliverable: Create a Figma file showing how to use image crop and fill modes to make images fit well inside frames for a clean dashboard look.
Progress0 / 5 steps
Sample Data
Image NameOriginal Size (px)Frame Size (px)Aspect Ratio
Product A800 x 600400 x 3004:3
Product B1200 x 800400 x 3003:2
Product C600 x 900400 x 3002:3
Product D500 x 500400 x 3001:1
1
Step 1: Place each image inside its fixed-size frame in Figma.
Use the Frame tool to create frames of 400x300 pixels. Drag each image into its frame.
Expected Result
Each image is inside a 400x300 frame but may not fit perfectly yet.
2
Step 2: Apply 'Fill' mode to images to make them cover the entire frame without empty spaces.
Select each image, then in the right panel under 'Image', choose 'Fill'.
Expected Result
Images fill the frame completely, but some parts may be cropped to maintain aspect ratio.
3
Step 3: Apply 'Fit' mode to images to show the entire image inside the frame without cropping.
Select each image, then choose 'Fit' in the image settings.
Expected Result
Images fit inside the frame fully visible, but empty spaces appear if aspect ratios differ.
4
Step 4: Compare 'Fill' and 'Fit' modes to decide which works best for the dashboard.
Look at images in both modes and note which looks better for user experience.
Expected Result
Fill mode gives a clean look with no empty spaces but crops images; Fit mode shows full images but may have gaps.
5
Step 5: Use 'Crop' mode to manually adjust image visible area inside frames.
Select image, choose 'Crop', then drag edges to show important parts of the image.
Expected Result
Images show the most important parts without distortion or unwanted cropping.
Final Result
Product A - Fill
↓
Image fills frame, cropped
↓
Product B - Fit
↓
Image fits, empty spaces
↓
Product C - Crop
↓
Image cropped manually
↓
Product D - Fill
↓
Square image fills frame
✓Fill mode is best when you want no empty space but can crop images.
✓Fit mode shows full images but may leave empty spaces in frames.
✓Crop mode lets you control which part of the image is visible.
✓Choosing the right mode depends on the image and dashboard design goals.
Bonus Challenge

Create a Figma prototype that switches images between Fill, Fit, and Crop modes on button click.

Show Hint
Use interactive components and variants in Figma to toggle image modes for user testing.

Practice

(1/5)
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