0
0
Figmabi_tool~5 mins

Image filters (exposure, contrast) in Figma - Step-by-Step Guide

Choose your learning style9 modes available
Introduction
Image filters like exposure and contrast help you adjust how bright or sharp an image looks. This makes your visuals clearer and more appealing in reports or dashboards.
When a photo in your report looks too dark and you want to brighten it.
When an image appears washed out and you want to make colors pop.
When you want to highlight details by increasing contrast in a product image.
When you need to match the style of images across your dashboard for consistency.
When you want to reduce glare or overly bright spots in a background image.
Steps
Step 1: Select the image
- Canvas or Layers panel
The image is highlighted and its properties appear in the right sidebar
Step 2: Click the 'Effects' section
- Right sidebar under Design tab
The Effects panel expands showing options like Drop shadow, Layer blur, and Image filters
Step 3: Click the '+' button next to 'Image filters'
- Effects panel in the right sidebar
Image filter controls appear with sliders for Exposure, Contrast, Saturation, and Hue
Step 4: Drag the Exposure slider
- Image filters controls
The image brightness changes in real time on the canvas
💡 Move slowly to avoid overexposing the image
Step 5: Drag the Contrast slider
- Image filters controls
The difference between light and dark areas in the image adjusts immediately
Step 6: Click outside the panel
- Anywhere on the canvas
The filter settings are saved and the Effects panel collapses
Before vs After
Before
Image looks dull and dark with flat colors
After
Image is brighter with clear details and stronger color differences
Settings Reference
Exposure
📍 Right sidebar > Design tab > Effects > Image filters
Adjusts the brightness of the image, making it lighter or darker
Default: 0
Contrast
📍 Right sidebar > Design tab > Effects > Image filters
Changes the difference between light and dark areas to make the image sharper or softer
Default: 0
Common Mistakes
Setting exposure too high
This makes the image too bright and loses details in highlights
Adjust exposure gradually and check the image to keep details visible
Increasing contrast excessively
This causes harsh edges and unnatural colors
Use moderate contrast to enhance details without making the image look fake
Summary
Image filters let you adjust brightness and sharpness to improve visuals.
Exposure controls overall lightness; contrast controls difference between light and dark.
Adjust sliders slowly and check changes live to keep images natural.