Opacity control in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the opacity of a layer to 50%.

Figma

layer.opacity = [1]

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

A50

B0.5

C1

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 50 instead of 0.5 for opacity value

Using 1 which means fully opaque

Using 0 which means fully transparent

Opacity in Figma is set as a decimal between 0 and 1, where 0.5 means 50% opacity.

2fill in blank

medium

Complete the code to reduce the opacity of a selected object by 20%.

Figma

selected.opacity = selected.opacity - [1]

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

A2

B20

C0.2

D0.02

Attempts:

3 left

💡 Hint

Common Mistakes

Subtracting 20 instead of 0.2

Using 2 which is out of opacity range

Using 0.02 which is only 2%

To reduce opacity by 20%, subtract 0.2 from the current opacity value.

3fill in blank

hard

Fix the error in the code to set opacity to 75%.

Figma

frame.opacity = [1]

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

A7.5

B75

C75%

D0.75

Attempts:

3 left

💡 Hint

Common Mistakes

Using 75 or 75% which are invalid

Using 7.5 which is out of range

Opacity must be a decimal between 0 and 1, so 75% is 0.75.

4fill in blank

hard

Fill both blanks to set the opacity of a rectangle to 30% and then increase it by 10%.

Figma

rectangle.opacity = [1]
rectangle.opacity = rectangle.opacity + [2]

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

A0.3

B0.1

C0.2

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0.2 instead of 0.1 for increase

Using 1 which would set opacity to fully opaque

30% opacity is 0.3. Increasing by 10% means adding 0.1.

5fill in blank

hard

Fill all three blanks to create a function that sets opacity to a given percent, ensuring the value stays between 0 and 1.

Figma

function setOpacity(obj, percent) {
  let value = percent / [1];
  obj.opacity = Math.min(Math.max(value, [2]), [3]);
}

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

A100

B0

C1

D255

Attempts:

3 left

💡 Hint

Common Mistakes

Using 255 instead of 100 for percent conversion

Not clamping opacity between 0 and 1

Divide percent by 100 to get decimal. Clamp between 0 and 1 using Math.min and Math.max.