Drop shadow effect in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a drop shadow effect with default settings.

Figma

layer.effects = [[1]]

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

A{ type: 'DROP_SHADOW', visible: true, color: { r: 0, g: 0, b: 0, a: 0.5 }, offset: { x: 0, y: 4 }, radius: 4 }

B{ type: 'INNER_SHADOW', visible: true, color: { r: 0, g: 0, b: 0, a: 0.5 }, offset: { x: 0, y: 4 }, radius: 4 }

C{ type: 'LAYER_BLUR', visible: true, radius: 4 }

D{ type: 'BACKGROUND_BLUR', visible: true, radius: 4 }

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'INNER_SHADOW' instead of 'DROP_SHADOW'.

Confusing blur effects with shadow effects.

The drop shadow effect in Figma is set using an effect object with type 'DROP_SHADOW'. This includes visibility, color, offset, and blur radius.

2fill in blank

medium

Complete the code to set the drop shadow color to semi-transparent red.

Figma

layer.effects = [{ type: 'DROP_SHADOW', visible: true, color: { r: [1], g: 0, b: 0, a: 0.5 }, offset: { x: 0, y: 4 }, radius: 4 }]

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

A0

B0.25

C0.5

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Setting red channel to 0 or less than 1 causes no red color.

Confusing alpha (a) with red (r) channel.

The red channel value ranges from 0 to 1. To make the shadow red, set r to 1.

3fill in blank

hard

Fix the error in the code to correctly apply a drop shadow with offset x=5 and y=5.

Figma

layer.effects = [{ type: 'DROP_SHADOW', visible: true, color: { r: 0, g: 0, b: 0, a: 0.3 }, offset: { x: [1], y: 5 }, radius: 10 }]

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

A'5'

B-5

C5

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using string '5' instead of number 5 causes errors.

Using negative values when positive offset is needed.

The offset values must be numbers, not strings. Use 5 without quotes for x offset.

4fill in blank

hard

Fill both blanks to create a drop shadow with offset x=3 and y=6.

Figma

layer.effects = [{ type: 'DROP_SHADOW', visible: true, color: { r: 0, g: 0, b: 0, a: 0.4 }, offset: { x: [1], y: [2] }, radius: 8 }]

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

A3

B6

C5

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping x and y values.

Using zero for offset which removes shadow displacement.

The offset x and y values are set to 3 and 6 respectively to position the shadow correctly.

5fill in blank

hard

Fill all three blanks to create a drop shadow with radius 12, offset x=7, and alpha transparency 0.25.

Figma

layer.effects = [{ type: 'DROP_SHADOW', visible: true, color: { r: 0, g: 0, b: 0, a: [1] }, offset: { x: [2], y: 0 }, radius: [3] }]

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

A0.25

B7

C12

D0.5

Attempts:

3 left

💡 Hint

Common Mistakes

Using alpha 0.5 instead of 0.25 for lighter shadow.

Mixing up radius and offset values.

The alpha transparency is 0.25 for subtle shadow, offset x is 7 for horizontal shift, and radius 12 for blur size.