Background blur in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a background blur effect in Figma.

Figma

const blurEffect = { type: '[1]', radius: 10 };

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

ABACKGROUND_BLUR

BDROP_SHADOW

CLAYER_BLUR

DINNER_SHADOW

Attempts:

3 left

💡 Hint

Common Mistakes

Using LAYER_BLUR instead of BACKGROUND_BLUR.

Confusing shadow effects with blur effects.

In Figma, the background blur effect is specified with the type BACKGROUND_BLUR.

2fill in blank

medium

Complete the code to add the blur effect to a Figma node's effects array.

Figma

node.effects = [[1]];

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

A{ type: 'DROP_SHADOW', radius: 5 }

B{ type: 'INNER_SHADOW', radius: 10 }

C{ type: 'LAYER_BLUR', radius: 20 }

D{ type: 'BACKGROUND_BLUR', radius: 15 }

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong effect type.

Not wrapping the effect object in an array.

To apply a background blur effect with radius 15, use { type: 'BACKGROUND_BLUR', radius: 15 } in the effects array.

3fill in blank

hard

Fix the error in the code to correctly set a background blur effect with radius 8.

Figma

node.effects = [{ type: '[1]', radius: 8 }];

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

ADROP_SHADOW

BBACKGROUND_BLUR

CLAYER_BLUR

DINNER_SHADOW

Attempts:

3 left

💡 Hint

Common Mistakes

Using LAYER_BLUR instead of BACKGROUND_BLUR.

Misspelling the effect type.

The correct effect type for background blur is BACKGROUND_BLUR. Using LAYER_BLUR or shadow types will not produce the desired effect.

4fill in blank

hard

Fill both blanks to create a background blur effect with radius 12 and visible property set to true.

Figma

const effect = { type: [1], radius: [2], visible: true };

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

A'BACKGROUND_BLUR'

B'DROP_SHADOW'

C12

D8

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong effect type string.

Using the wrong radius value.

The effect type must be 'BACKGROUND_BLUR' and the radius is 12 as specified.

5fill in blank

hard

Fill all three blanks to define a background blur effect with radius 20, visible set to false, and blend mode set to 'PASS_THROUGH'.

Figma

const effect = { type: [1], radius: [2], visible: [3], blendMode: 'PASS_THROUGH' };

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

A'BACKGROUND_BLUR'

B20

Cfalse

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect quotes or missing them for strings.

Confusing boolean values with strings.

The effect type is 'BACKGROUND_BLUR', radius is 20, and visible is set to false as required.