Image filters (exposure, contrast) in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a marketing analyst at a retail company.

📋 Request: Your manager wants you to create a visual report with product images that clearly show differences in lighting and contrast to highlight product features.

📊 Data: You have a set of product images with varying lighting conditions. You can apply image filters like exposure and contrast to improve their visual clarity.

🎯 Deliverable: A Figma file with a dashboard showing product images with adjusted exposure and contrast filters side by side for comparison.

Sample Data

Product	Image Filename	Original Exposure	Original Contrast
Red Chair	red_chair.jpg	0.5	1.0
Blue Lamp	blue_lamp.jpg	0.7	0.8
Wooden Table	wooden_table.jpg	0.6	1.2
Green Sofa	green_sofa.jpg	0.4	1.1
Yellow Vase	yellow_vase.jpg	0.8	0.9

1

Step 1: Import all product images into your Figma project.

Use the 'Place Image' option to add each image file: red_chair.jpg, blue_lamp.jpg, wooden_table.jpg, green_sofa.jpg, yellow_vase.jpg.

Expected Result

All five product images appear on your Figma canvas.

2

Step 2: Create two copies of each product image side by side for comparison.

Select each image and duplicate it once. Arrange originals on the left and copies on the right in a grid layout.

Expected Result

You see two columns of images: original on the left, copy on the right.

3

Step 3: Apply exposure filter to the right-side copy of each image to increase brightness.

Select the right image copy, open 'Adjustments' panel, increase Exposure value by +0.3.

Expected Result

Right images appear brighter than originals.

4

Step 4: Apply contrast filter to the right-side copy of each image to enhance details.

In the same 'Adjustments' panel, increase Contrast value by +0.4.

Expected Result

Right images show stronger contrast and clearer details.

5

Step 5: Add labels below each image to indicate 'Original' and 'Filtered'.

Use text tool to add 'Original' under left images and 'Filtered' under right images.

Expected Result

Each image pair is clearly labeled for easy comparison.

6

Step 6: Arrange all images and labels neatly with consistent spacing and alignment.

Use Figma's alignment tools to create a clean grid layout with equal gaps.

Expected Result

Dashboard looks organized and professional.

Final Result

Product Image Comparison Dashboard

+----------------+----------------+
|   Original     |    Filtered    |
+----------------+----------------+
| Red Chair      | Red Chair      |
| (normal)       | (exposure +0.3 |
|                | contrast +0.4) |
+----------------+----------------+
| Blue Lamp      | Blue Lamp      |
| (normal)       | (exposure +0.3 |
|                | contrast +0.4) |
+----------------+----------------+
| Wooden Table   | Wooden Table   |
| (normal)       | (exposure +0.3 |
|                | contrast +0.4) |
+----------------+----------------+
| Green Sofa     | Green Sofa     |
| (normal)       | (exposure +0.3 |
|                | contrast +0.4) |
+----------------+----------------+
| Yellow Vase    | Yellow Vase    |
| (normal)       | (exposure +0.3 |
|                | contrast +0.4) |
+----------------+----------------+

Bonus Challenge

Create an interactive Figma prototype where users can toggle exposure and contrast sliders to see real-time changes on product images.

Show Hint

Use Figma's interactive components and variants to simulate slider controls adjusting image filters.