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.

Practice

1. What does the exposure filter primarily adjust in an image?

easy

A. The size of the image

B. The sharpness of the image edges

C. The color saturation of the image

D. The overall brightness of the image

Solution

1. Step 1: Understand exposure effect

   Exposure changes how bright or dark the entire image looks by adjusting light intensity.

2. Step 2: Compare with other filters

   Contrast changes difference between light and dark areas, not overall brightness.

3. Final Answer:

   The overall brightness of the image -> Option D

4. Quick Check:

   Exposure = brightness [OK]

Hint: Exposure means brightness, contrast means light-dark difference [OK]

Common Mistakes:

• Confusing exposure with contrast
• Thinking exposure changes color saturation
• Assuming exposure changes image size

2. Which of the following is the correct way to increase contrast in Figma's image filter settings?

easy

A. Set contrast slider to 0

B. Set exposure slider to a value less than 0

C. Set contrast slider to a value greater than 1

D. Set exposure slider to a value greater than 1

Solution

1. Step 1: Identify contrast slider usage

   In Figma, contrast values above 1 increase difference between light and dark areas.

2. Step 2: Differentiate exposure and contrast sliders

   Exposure affects brightness, not contrast; setting contrast to 0 removes contrast.

3. Final Answer:

   Set contrast slider to a value greater than 1 -> Option C

4. Quick Check:

   Contrast > 1 increases contrast [OK]

Hint: Contrast > 1 means stronger contrast [OK]

Common Mistakes:

• Using exposure slider to change contrast
• Setting contrast to 0 thinking it increases contrast
• Confusing slider values less than 0 as valid

3. If an image in Figma has exposure set to 0.5 and contrast set to 2, what is the expected visual effect?

medium

A. Image will be brighter with high contrast

B. Image will be darker with high contrast

C. Image will be brighter with low contrast

D. Image will be darker with low contrast

Solution

1. Step 1: Analyze exposure value 0.5

   Exposure 0.5 means increasing brightness moderately (above 0 is brighter).

2. Step 2: Analyze contrast value 2

   Contrast 2 means doubling the difference between light and dark areas, so high contrast.

3. Final Answer:

   Image will be brighter with high contrast -> Option A

4. Quick Check:

   Exposure 0.5 = brighter, Contrast 2 = high contrast [OK]

Hint: Exposure > 0 brightens; contrast > 1 increases difference [OK]

Common Mistakes:

• Thinking exposure 0.5 darkens image
• Confusing contrast 2 as low contrast
• Mixing effects of exposure and contrast

4. A user sets the contrast slider to -1 in Figma but sees no change in the image. What is the likely cause?

medium

A. Contrast values below 0 are invalid and ignored

B. Exposure must be set before contrast works

C. The image file is corrupted

D. Contrast slider only accepts integer values

Solution

1. Step 1: Understand valid contrast range

   Figma contrast slider does not accept negative values; values below 0 are ignored.

2. Step 2: Rule out other causes

   Exposure setting or file corruption does not affect slider acceptance; contrast accepts decimals.

3. Final Answer:

   Contrast values below 0 are invalid and ignored -> Option A

4. Quick Check:

   Negative contrast ignored [OK]

Hint: Contrast slider values must be ≥ 0 [OK]

Common Mistakes:

• Assuming exposure affects contrast slider
• Thinking image corruption causes no change
• Believing contrast slider only accepts integers

5. You want to make an image in Figma look clearer by increasing brightness but without losing detail in shadows. Which filter settings should you choose?

hard

A. Increase exposure a lot and decrease contrast

B. Increase exposure slightly and increase contrast moderately

C. Decrease exposure and increase contrast a lot

D. Set exposure and contrast both to zero

Solution

1. Step 1: Increase brightness carefully

   Increasing exposure slightly brightens image without washing out details.

2. Step 2: Increase contrast moderately

   Moderate contrast increase enhances difference between light and dark, preserving shadow details.

3. Step 3: Avoid extremes

   Too much exposure or contrast can lose shadow details or cause harsh image.

4. Final Answer:

   Increase exposure slightly and increase contrast moderately -> Option B

5. Quick Check:

   Balanced exposure and contrast improve clarity [OK]

Hint: Brighten with exposure; keep contrast moderate for detail [OK]

Common Mistakes:

• Increasing exposure too much losing shadows
• Decreasing contrast losing image depth
• Setting filters to zero causing flat image