Image crop and fill modes in Figma - Real Business Scenario

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.

Sample Data

Image Name	Original Size (px)	Frame Size (px)	Aspect Ratio
Product A	800 x 600	400 x 300	4:3
Product B	1200 x 800	400 x 300	3:2
Product C	600 x 900	400 x 300	2:3
Product D	500 x 500	400 x 300	1: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.