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.

Practice

1. What does applying Layer Blur in Figma do to a selected layer?

easy

A. It deletes the selected layer permanently.

B. It changes the layer's color to grayscale.

C. It moves the layer to the back of all layers.

D. It softens the entire layer, reducing sharpness.

Solution

1. Step 1: Understand the effect of Layer Blur

   Layer Blur softens the entire selected layer by reducing its sharpness, making it look less clear.

2. Step 2: Compare with other options

   Other options describe different actions like color change, layer order change, or deletion, which are not related to Layer Blur.

3. Final Answer:

   It softens the entire layer, reducing sharpness. -> Option D

4. Quick Check:

   Layer Blur = Softening layer [OK]

Hint: Layer Blur always softens the whole layer, not colors or position [OK]

Common Mistakes:

• Confusing blur with color or layer order changes
• Thinking blur deletes the layer
• Assuming blur affects only part of the layer

2. Which of the following is the correct way to apply a layer blur effect in Figma?

easy

A. Select the layer, go to Effects panel, add Blur, and adjust radius.

B. Right-click the layer and choose 'Delete Blur'.

C. Double-click the layer and type 'blur' in the text box.

D. Drag the layer outside the canvas to blur it.

Solution

1. Step 1: Locate the Effects panel in Figma

   To apply blur, you select the layer, open the Effects panel, add a Blur effect, and then adjust the blur radius.

2. Step 2: Eliminate incorrect options

   Options A, B, and D describe actions that do not apply blur or are invalid in Figma.

3. Final Answer:

   Select the layer, go to Effects panel, add Blur, and adjust radius. -> Option A

4. Quick Check:

   Effects panel + Blur radius = Apply blur [OK]

Hint: Use Effects panel to add and control blur radius [OK]

Common Mistakes:

• Trying to blur by deleting or typing text
• Dragging layers off canvas to blur
• Looking for blur in right-click menu

3. Given a layer with a blur radius set to 10 in Figma, what will happen if you increase the radius to 20?

medium

A. The layer will become sharper and clearer.

B. The layer will become more blurred and less sharp.

C. The layer will change color to a lighter shade.

D. The layer will move behind other layers.

Solution

1. Step 1: Understand the effect of increasing blur radius

   Increasing the blur radius makes the layer more blurred, reducing sharpness further.

2. Step 2: Check other options for correctness

   Options A, B, and C describe effects unrelated to blur radius changes.

3. Final Answer:

   The layer will become more blurred and less sharp. -> Option B

4. Quick Check:

   Higher blur radius = More blur [OK]

Hint: Higher blur radius means stronger blur effect [OK]

Common Mistakes:

• Thinking blur radius sharpens the layer
• Confusing blur with color or layer order changes
• Assuming blur radius has no visible effect

4. You applied a layer blur effect but the layer does not appear blurred. What is the most likely reason?

medium

A. The layer is locked.

B. The layer is hidden behind another layer.

C. The blur radius is set to 0.

D. The layer is a vector shape.

Solution

1. Step 1: Check the blur radius value

   If the blur radius is 0, the blur effect is effectively off, so the layer looks normal.

2. Step 2: Consider other options

   Locking or hiding behind layers does not remove blur effect visibility; vector shapes can be blurred.

3. Final Answer:

   The blur radius is set to 0. -> Option C

4. Quick Check:

   Blur radius 0 means no blur visible [OK]

Hint: Check blur radius is above zero to see blur effect [OK]

Common Mistakes:

• Assuming locked layers can't show blur
• Thinking vector shapes can't be blurred
• Ignoring blur radius value

5. You want to highlight a button on your dashboard by blurring the background layers behind it. How should you apply layer blur in Figma to achieve this effect?

hard

A. Apply layer blur only to the background layers behind the button.

B. Apply layer blur to all layers except the button layer.

C. Apply layer blur directly to the button layer.

D. Apply layer blur to the entire frame containing the button.

Solution

1. Step 1: Identify the goal

   The goal is to highlight the button by making the background less clear, so only background layers should be blurred.

2. Step 2: Choose correct layers to blur

   Applying blur only to background layers behind the button keeps the button sharp and focused.

3. Step 3: Eliminate incorrect options

   Blurring the button or all layers would reduce focus on the button; blurring all layers including button defeats the purpose.

4. Final Answer:

   Apply layer blur only to the background layers behind the button. -> Option A

5. Quick Check:

   Blur background, keep button sharp = Highlight button [OK]

Hint: Blur only background layers to keep button clear and focused [OK]

Common Mistakes:

• Blurring the button itself
• Blurring entire frame including button
• Blurring all layers indiscriminately