Image filters (exposure, contrast) in Figma - Dashboard Guide

Dashboard Mode - Image filters (exposure, contrast)

Dashboard Goal

See how changing exposure and contrast affects an image's look to pick the best style for marketing.

Sample Data

Image ID	Base Exposure	Base Contrast	Exposure Adjustment	Contrast Adjustment
Img001	0	0	+0.2	+0.3
Img002	0	0	-0.1	+0.5
Img003	0	0	+0.5	-0.2
Img004	0	0	0	0
Img005	0	0	-0.3	-0.4

Dashboard Components

• KPI Card: Average Exposure Adjustment
  Formula: Average of Exposure Adjustment column = (0.2 - 0.1 + 0.5 + 0 - 0.3) / 5 = 0.06
• KPI Card: Average Contrast Adjustment
  Formula: Average of Contrast Adjustment column = (0.3 + 0.5 - 0.2 + 0 - 0.4) / 5 = 0.04
• Image Preview Panel: Shows the selected image with applied exposure and contrast filters using the adjustments from the table.
  Formula: CSS filter style = 'brightness(calc(1 + Exposure Adjustment)) contrast(calc(1 + Contrast Adjustment))'
• Bar Chart: Exposure Adjustment per Image
  X-axis: Image ID
  Y-axis: Exposure Adjustment values
• Bar Chart: Contrast Adjustment per Image
  X-axis: Image ID
  Y-axis: Contrast Adjustment values

Dashboard Layout

+----------------------+----------------------+
|  KPI: Avg Exposure   |  KPI: Avg Contrast    |
|      Adjustment      |      Adjustment      |
+----------------------+----------------------+
|          Image Preview Panel             |
|                                          |
+------------------------------------------+
| Exposure Adjustment Bar Chart | Contrast Adjustment Bar Chart |
+------------------------------+------------------------------+

Interactivity

Select an image from the Image Preview Panel dropdown. When you pick an image, the preview updates with that image's exposure and contrast filters applied. The bar charts highlight the selected image's adjustments. The KPI cards update to show averages based on any filter applied (e.g., if you filter images by adjustment ranges).

Self Check

If you add a filter to show only images with Exposure Adjustment greater than 0, which components update?

• KPI Cards update to show averages only for filtered images.
• Bar charts update to show only filtered images.
• Image Preview Panel updates to allow selection only from filtered images.

Key Result

Dashboard showing how exposure and contrast filters change images with average adjustments and visual previews.