Inner shadow effect in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an inner shadow effect in Figma.

Figma

frame.effects = [{ type: '[1]', color: { r: 0, g: 0, b: 0, a: 0.5 }, offset: { x: 0, y: 2 }, radius: 4, spread: 0 }]

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 DROP_SHADOW instead of INNER_SHADOW

Confusing blur effects with shadow effects

The correct effect type for an inner shadow in Figma is INNER_SHADOW.

2fill in blank

medium

Complete the code to set the shadow offset to 5 pixels right and 3 pixels down.

Figma

frame.effects = [{ type: 'INNER_SHADOW', offset: { x: [1], y: [2] }, color: { r: 0, g: 0, b: 0, a: 0.3 }, radius: 6 }]

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

A3

B5

C-5

D-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using negative values which move shadow left or up

Swapping x and y values

The offset x should be 5 (right) and y should be 3 (down) to position the inner shadow correctly.

3fill in blank

hard

Fix the error in the code to correctly apply an inner shadow with 10 radius.

Figma

frame.effects = [{ type: 'INNER_SHADOW', radius: [1], color: { r: 0, g: 0, b: 0, a: 0.4 }, offset: { x: 0, y: 0 } }]

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

A'10px'

B10

C0.1

D'ten'

Attempts:

3 left

💡 Hint

Common Mistakes

Using string values like '10px' or 'ten' instead of number 10

Using decimal values that are too small

The radius value must be a number without quotes. Using 10 sets the shadow blur radius correctly.

4fill in blank

hard

Fill both blanks to create an inner shadow with 50% opacity and a spread of 2.

Figma

frame.effects = [{ type: 'INNER_SHADOW', color: { r: 0, g: 0, b: 0, a: [1] }, spread: [2], offset: { x: 1, y: 1 }, radius: 5 }]

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

A0.5

B1

C2

D0.2

Attempts:

3 left

💡 Hint

Common Mistakes

Using 1 for opacity which is fully opaque

Confusing spread with radius

Opacity is 0.5 for 50%, and spread is set to 2 for the shadow spread.

5fill in blank

hard

Fill all three blanks to define an inner shadow with red color, 0.3 opacity, and offset 4 pixels left and 2 pixels up.

Figma

frame.effects = [{ type: 'INNER_SHADOW', color: { r: [1], g: [2], b: [3], a: 0.3 }, offset: { x: -4, y: -2 }, radius: 7 }]

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

A1

B0

C0.5

D255

Attempts:

3 left

💡 Hint

Common Mistakes

Using 255 instead of normalized 1 for color values

Mixing up RGB channels

Red color is full red (1), no green (0), no blue (0) in normalized RGB values.