Image filters (exposure, contrast) in Figma - Deep Dive

Overview - Image filters (exposure, contrast)

What is it?

Image filters like exposure and contrast adjust how bright or dark an image looks and how much difference there is between light and dark areas. Exposure changes the overall lightness, making the image look brighter or darker. Contrast changes the difference between the lightest and darkest parts, making details stand out more or less. These filters help make images clearer and more appealing in reports and dashboards.

Why it matters

Without exposure and contrast adjustments, images in reports can look dull, washed out, or too dark, making it hard to see important details. Good image filters help highlight key information visually, improving understanding and decision-making. They make dashboards more engaging and easier to interpret, which saves time and reduces mistakes.

Where it fits

Before learning image filters, you should understand basic image properties like brightness and color. After mastering filters, you can explore advanced image editing, visual storytelling, and creating interactive dashboards with dynamic visuals.

Mental Model

Core Idea

Exposure controls overall brightness, while contrast controls the difference between light and dark areas to make details pop.

Think of it like...

Adjusting exposure and contrast is like adjusting the lighting in a room: exposure is turning the main light brighter or dimmer, and contrast is like opening or closing the curtains to let in more or less sharp shadows.

┌───────────────┐       ┌───────────────┐
│   Original    │──────▶│   Exposure    │
│    Image      │       │  Adjustment   │
└───────────────┘       └───────────────┘
                              │
                              ▼
                      ┌───────────────┐
                      │   Contrast    │
                      │  Adjustment   │
                      └───────────────┘
                              │
                              ▼
                      ┌───────────────┐
                      │  Final Image  │
                      └───────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding Image Brightness Basics

Concept: Learn what brightness means in an image and how it affects visibility.

Brightness is how light or dark an image looks overall. If an image is too dark, you can't see details well. If it's too bright, details can wash out. Exposure is the filter that changes this brightness evenly across the whole image.

Result

You can identify when an image needs brightness adjustment to improve clarity.

Understanding brightness is key because exposure directly controls this property, affecting how easy it is to see image details.

2

Foundation

Grasping Contrast in Images

Concept: Learn what contrast means and how it affects image detail visibility.

Contrast is the difference between the darkest and lightest parts of an image. High contrast means strong differences, making edges and details stand out. Low contrast means the image looks flat and dull. Adjusting contrast changes how much these differences show.

Result

You can tell when an image looks flat and needs contrast adjustment to highlight details.

Knowing contrast helps you understand how to make important parts of an image stand out, improving visual communication.

3

Intermediate

Applying Exposure Filter in Figma

🤔Before reading on: do you think increasing exposure always improves image clarity? Commit to your answer.

Concept: Learn how to use the exposure filter in Figma to adjust image brightness.

In Figma, select an image and open the 'Effects' panel. Add an 'Image Filter' effect and choose 'Exposure'. Moving the slider right increases brightness; left decreases it. Be careful: too much exposure can wash out details or make the image too dark.

Result

You can brighten or darken images in your design to improve visibility.

Understanding that exposure affects the whole image evenly helps avoid over-brightening that hides details.

4

Intermediate

Using Contrast Filter in Figma

🤔Before reading on: does increasing contrast always make an image look better? Commit to your answer.

Concept: Learn how to apply and adjust contrast filter in Figma to enhance image details.

In Figma, add an 'Image Filter' effect and select 'Contrast'. Moving the slider right increases contrast, making darks darker and lights lighter. Moving left reduces contrast, making the image look softer. Adjust carefully to avoid losing detail in shadows or highlights.

Result

You can make images more vivid or softer depending on your design needs.

Knowing contrast changes the difference between light and dark helps you emphasize or soften image details effectively.

5

Intermediate

Combining Exposure and Contrast Filters

🤔Before reading on: do you think the order of applying exposure and contrast filters matters? Commit to your answer.

Concept: Learn how exposure and contrast filters work together and how order affects the final image.

Applying exposure first changes overall brightness, then adjusting contrast changes how light and dark areas differ. Reversing the order can produce different results. Experiment in Figma by toggling filter order to see how the image changes.

Result

You can create balanced images by combining filters thoughtfully.

Understanding filter order helps you control image appearance precisely, avoiding unwanted effects.

6

Advanced

Avoiding Common Exposure and Contrast Pitfalls

🤔Before reading on: do you think maxing out exposure or contrast always improves image quality? Commit to your answer.

Concept: Learn the risks of overusing exposure and contrast filters and how to avoid them.

Too much exposure can wash out colors and details; too little makes images too dark. Excessive contrast can cause loss of detail in shadows or highlights, making images harsh. Use subtle adjustments and preview on different screens to ensure good results.

Result

You can maintain image quality while enhancing visibility.

Knowing the limits of filters prevents common mistakes that degrade image clarity and user experience.

7

Expert

Understanding Filter Effects on Color and Perception

🤔Before reading on: do you think exposure and contrast filters affect colors uniformly? Commit to your answer.

Concept: Explore how exposure and contrast filters interact with color channels and human perception.

Exposure increases brightness uniformly but can shift color balance if not managed. Contrast changes relative differences, which can exaggerate or mute colors differently across the image. Human eyes perceive these changes non-linearly, so small filter tweaks can have big visual impact. Advanced designers use this knowledge to create visually balanced images.

Result

You can fine-tune images for both technical accuracy and visual appeal.

Understanding color and perception effects helps create professional-quality visuals that communicate clearly and attractively.

Under the Hood

Exposure filter works by multiplying each pixel's brightness value by a factor, increasing or decreasing overall lightness. Contrast filter adjusts the difference between pixel brightness values by stretching or compressing the range between darkest and lightest pixels. Both filters operate on the image's color channels (red, green, blue) simultaneously, modifying pixel data before rendering.

Why designed this way?

These filters were designed to mimic real-world photographic adjustments, allowing digital images to be corrected or enhanced easily. Multiplying brightness (exposure) is simple and fast to compute, while contrast adjustment through range scaling preserves relative details. Alternatives like complex tone mapping exist but are more computationally expensive and less intuitive for quick design tweaks.

┌───────────────┐
│  Input Image  │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Exposure Filter│
│ (Brightness x)│
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Contrast Filter│
│ (Range adjust) │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Output Image  │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does increasing exposure always make an image clearer? Commit to yes or no.

Common Belief: Increasing exposure always improves image clarity by making it brighter.

Reality: Too much exposure can wash out details and colors, making the image less clear.

Why it matters: Overexposed images lose important information, reducing the effectiveness of visual communication.

Quick: Does higher contrast always make images look better? Commit to yes or no.

Common Belief: Higher contrast always makes images more appealing by making details pop.

Reality: Excessive contrast can cause loss of detail in shadows and highlights, making images harsh and less informative.

Why it matters: Misusing contrast can confuse viewers and hide important data in images.

Quick: Does the order of applying exposure and contrast filters not affect the final image? Commit to yes or no.

Common Belief: The order of exposure and contrast filters does not change the image outcome.

Reality: The order affects how brightness and contrast interact, producing different visual results.

Why it matters: Ignoring filter order can lead to unexpected image appearances, wasting time and causing frustration.

Quick: Do exposure and contrast filters affect all colors equally? Commit to yes or no.

Common Belief: Exposure and contrast filters affect all colors uniformly without changing color balance.

Reality: Filters can shift color balance because they operate on color channels, affecting hues differently.

Why it matters: Not accounting for color shifts can produce images that look unnatural or misleading.

Expert Zone

1

Exposure adjustments can subtly shift color temperature, requiring compensation in professional workflows.

2

Contrast changes can exaggerate noise or artifacts in images, so filtering before applying contrast is sometimes necessary.

3

Human perception of brightness and contrast is non-linear, so numeric filter values do not always match visual impact.

When NOT to use

Avoid using exposure and contrast filters when precise color accuracy is required, such as in medical imaging or brand logos. Instead, use calibrated color correction tools or manual pixel editing.

Production Patterns

Professionals use exposure and contrast filters to prepare images for dashboards, ensuring visuals are clear on different screens and lighting conditions. They combine subtle filter adjustments with color grading and masking to highlight key data points without overwhelming viewers.

Connections

Photography Exposure

Builds-on

Understanding how camera exposure works helps grasp digital exposure filters, as both control image brightness by adjusting light intensity.

Human Visual Perception

Builds-on

Knowing how eyes perceive brightness and contrast explains why small filter changes can have large visual effects, guiding better design choices.

Audio Signal Processing

Analogous pattern

Adjusting exposure and contrast in images is like adjusting volume and equalizer in audio; both shape the signal to highlight important features and improve clarity.

Common Pitfalls

#1 Overexposing images by maxing out exposure filter.

Wrong approach:

Apply exposure filter with slider set to maximum value, making image too bright and washed out.

Correct approach:

Apply exposure filter with moderate slider value, adjusting brightness just enough to improve visibility without losing detail.

Root cause:

Misunderstanding that more brightness always improves image clarity leads to overexposure.

#2 Applying contrast filter too high causing loss of shadow and highlight details.

Wrong approach:

Set contrast filter slider to maximum, creating harsh image with clipped blacks and whites.

Correct approach:

Adjust contrast filter carefully, balancing detail preservation with enhanced difference between light and dark areas.

Root cause:

Believing higher contrast always improves image sharpness causes detail loss.

#3 Ignoring filter order and applying contrast before exposure without testing.

Wrong approach:

Apply contrast filter first, then exposure, without checking visual result, leading to unexpected image appearance.

Correct approach:

Experiment with filter order in Figma, usually applying exposure before contrast for predictable results.

Root cause:

Assuming filter order does not affect outcome leads to inconsistent visuals.

Key Takeaways

Exposure adjusts overall image brightness, making images lighter or darker uniformly.

Contrast changes the difference between light and dark areas, affecting how details stand out.

Applying exposure and contrast filters in the right order and amount is crucial for clear, appealing images.

Overusing these filters can degrade image quality by washing out details or creating harsh visuals.

Understanding how these filters affect color and perception helps create professional and effective visuals.

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