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

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.

Cell	Value
A1	Image Original Size
B1	200x150
A2	Frame Size
B2	100x100
A3	Crop Mode Result
B3	100x100 (cropped)
A4	Fill Mode Result
B4	100x100 (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

What does Crop Mode do to the image inside the frame?

A Shows part of the image clipped to frame size without scaling

B Scales the image to fill the frame completely

C Stretches the image ignoring aspect ratio

D Shrinks 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.