Bird
Raised Fist0
Figmabi_tool~10 mins

Image crop and fill modes in Figma - Cell-by-Cell Formula Trace

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
Sample Data

This data shows an image of 200x150 pixels placed inside a 100x100 pixel frame. It compares the results of crop mode and fill mode in Figma.

CellValue
A1Image Original Size
B1200x150
A2Frame Size
B2100x100
A3Crop Mode Result
B3100x100 (cropped)
A4Fill Mode Result
B4100x100 (scaled and filled)
Formula Trace
Image inside Frame with Crop Mode vs Fill Mode
Step 1: Original Image Size = 200x150
Step 2: Frame Size = 100x100
Step 3: Crop Mode: Image is clipped to frame size without scaling
Step 4: Fill Mode: Image is scaled to fill frame, preserving aspect ratio
Step 5: Final visible image size in Fill Mode = 100x100
Cell Reference Map
    A       B
1 | Img Size | 200x150
2 | Frame    | 100x100
3 | Crop Res | 100x100
4 | Fill Res | 100x100

References:
- B1: Original image size
- B2: Frame size
- B3: Crop mode visible area
- B4: Fill mode visible area
Cells B1 and B2 provide input sizes. B3 and B4 show results of crop and fill modes respectively.
Result
Frame (100x100)
+--------------------+
| Crop Mode:         |
| +------------+     |
| |Image 100x100|    |
| +------------+     |
| Fill Mode:          |
| +------------+     |
| |Image 100x100|    |
| +------------+     |
+--------------------+
The frame is 100x100 pixels. Crop mode shows a clipped 100x100 portion of the image. Fill mode shows the image scaled and clipped to fill the entire 100x100 frame.
Sheet Trace Quiz - 3 Questions
Test your understanding
What does Crop Mode do to the image inside the frame?
AShows part of the image clipped to frame size without scaling
BScales the image to fill the frame completely
CStretches the image ignoring aspect ratio
DShrinks the image to fit inside the frame
Key Result
Crop mode clips image to frame size without scaling; Fill mode scales image preserving aspect ratio to fill frame and clips excess.

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