Layer blur in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a layer blur effect with a radius of 10.

Figma

layer.effects = [{ type: 'LAYER_BLUR', radius: [1] }]

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

A5

B10

C15

D20

Attempts:

3 left

💡 Hint

Common Mistakes

Using a radius value that is too low or too high for the desired blur effect.

Forgetting to set the effect type to 'LAYER_BLUR'.

The radius value controls the strength of the blur. A radius of 10 applies a moderate blur effect.

2fill in blank

medium

Complete the code to add a layer blur effect to the selected node.

Figma

const node = figma.currentPage.selection[0];
node.effects = [{ type: [1], radius: 8 }];

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

A'LAYER_BLUR'

B'DROP_SHADOW'

C'INNER_SHADOW'

D'BACKGROUND_BLUR'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'DROP_SHADOW' or other effect types instead of 'LAYER_BLUR'.

Not wrapping the effect type in quotes.

The effect type must be 'LAYER_BLUR' to apply a blur effect to the layer itself.

3fill in blank

hard

Fix the error in the code to correctly apply a layer blur effect with radius 12.

Figma

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

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

A12

B'radius'

Cradius

D'12'

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around the radius number.

Using the word 'radius' instead of a number.

The radius must be a number, not a string, so use 12 without quotes.

4fill in blank

hard

Fill both blanks to create a layer blur effect with radius 15 and add it to the node's effects array.

Figma

node.effects = [[1]];
node.effects[0].radius = [2];

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

A{ type: 'LAYER_BLUR', radius: 0 }

B{ type: 'DROP_SHADOW', radius: 15 }

C15

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong effect type.

Setting radius directly in the array without an object.

First, create a layer blur effect with radius 0, then update the radius to 15.

5fill in blank

hard

Fill all three blanks to apply a layer blur effect with radius 20, then log the radius value.

Figma

node.effects = [{ type: [1], radius: [2] }];
console.log(node.effects[0].[3]);

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

A'LAYER_BLUR'

B20

Cradius

D'radius'

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around the radius number.

Using quotes when accessing the property in console.log.

Use 'LAYER_BLUR' as the effect type, 20 as the radius number, and access the radius property without quotes.