Image filters (exposure, contrast) in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the exposure filter value to 0.5 in Figma.

Figma

node.fills = [{ type: 'IMAGE', filters: { exposure: [1] } }];

Drag options to blanks, or click blank then click option'

A-0.5

B1.5

C0.5

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Using values greater than 1 causes overexposure.

Negative values darken the image.

Setting exposure to 0.5 increases brightness moderately.

2fill in blank

medium

Complete the code to increase contrast by 0.3 in Figma image filters.

Figma

node.fills = [{ type: 'IMAGE', filters: { contrast: [1] } }];

Drag options to blanks, or click blank then click option'

A0

B1

C-0.3

D0.3

Attempts:

3 left

💡 Hint

Common Mistakes

Using negative values reduces contrast instead of increasing it.

Contrast value 0.3 increases the difference between light and dark areas.

3fill in blank

hard

Fix the error in the code to correctly apply exposure and contrast filters.

Figma

node.fills = [{ type: 'IMAGE', filters: { exposure: [1], contrast: 0.4 } }];

Drag options to blanks, or click blank then click option'

A0.4

B'0.4'

C1.4

D-0.4

Attempts:

3 left

💡 Hint

Common Mistakes

Using string values causes runtime errors.

Using values outside the valid range.

Filter values must be numbers, not strings. Use 0.4 without quotes.

4fill in blank

hard

Fill both blanks to set exposure to 0.2 and contrast to 0.6 in Figma filters.

Figma

node.fills = [{ type: 'IMAGE', filters: { exposure: [1], contrast: [2] } }];

Drag options to blanks, or click blank then click option'

A0.2

B0.6

C-0.6

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up exposure and contrast values.

Using negative values unintentionally.

Exposure 0.2 slightly brightens, contrast 0.6 increases contrast more strongly.

5fill in blank

hard

Fill all three blanks to set exposure to 0.1, contrast to 0.5, and apply saturation 0.8.

Figma

node.fills = [{ type: 'IMAGE', filters: { exposure: [1], contrast: [2], saturation: [3] } }];

Drag options to blanks, or click blank then click option'

A0.1

B0.5

C0.8

D-0.1

Attempts:

3 left

💡 Hint

Common Mistakes

Using negative values reduces effect or causes errors.

Confusing saturation with contrast.

These values brighten slightly, increase contrast moderately, and boost color saturation.