Bird
Raised Fist0
Figmabi_tool~3 mins

Why Image filters (exposure, contrast) in Figma? - Purpose & Use Cases

Choose your learning style10 modes available

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
The Big Idea

What if you could fix all your report images' brightness and contrast in just seconds, without leaving your dashboard?

The Scenario

Imagine you have a report dashboard with product images that look dull or too bright. You try to fix each image manually in a photo editor before adding them to your report.

This takes a lot of time and you have to repeat it every time the images update.

The Problem

Manually adjusting exposure and contrast for many images is slow and tiring.

You might make mistakes or have inconsistent looks across images.

It's hard to keep the report visually clear and professional when images don't match.

The Solution

Using image filters like exposure and contrast directly in your BI tool or design software lets you quickly adjust all images consistently.

You can tweak settings live and see instant results without leaving your dashboard or design.

This saves time and keeps your visuals clear and appealing.

Before vs After
Before
Open image editor > Adjust exposure > Save > Import image
After
Apply exposure filter > Adjust slider > Done
What It Enables

You can create polished, easy-to-understand reports with images that always look their best, improving viewer focus and decision-making.

Real Life Example

A sales dashboard shows product photos with consistent brightness and contrast, making it easier for managers to spot trends and issues at a glance.

Key Takeaways

Manual image editing is slow and inconsistent.

Image filters let you adjust exposure and contrast quickly and uniformly.

This improves report clarity and saves valuable time.

Practice

(1/5)
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