Effect styles in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a shadow effect style in Figma.

Figma

figma.currentPage.selection[0].effects = [[1]];

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

A{ type: 'DROP_SHADOW', color: { r: 0, g: 0, b: 0, a: 0.25 }, offset: { x: 0, y: 4 }, radius: 10 }

B{ type: 'INNER_SHADOW', color: { r: 1, g: 1, b: 1, a: 0.5 }, offset: { x: 2, y: 2 }, radius: 5 }

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

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

Attempts:

3 left

💡 Hint

Common Mistakes

Using INNER_SHADOW instead of DROP_SHADOW changes the shadow inside the object.

Using blur effects instead of shadow effects.

The DROP_SHADOW effect style is used to add a shadow outside the object. The code sets this effect on the selected object.

2fill in blank

medium

Complete the code to create a blur effect style with radius 10.

Figma

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

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

A'INNER_SHADOW'

B'DROP_SHADOW'

C'LAYER_BLUR'

D'BACKGROUND_BLUR'

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing BACKGROUND_BLUR which blurs the background, not the layer itself.

Using shadow types instead of blur types.

LAYER_BLUR is the effect type used to blur the entire layer with a specified radius.

3fill in blank

hard

Fix the error in the effect style assignment to use the correct property name.

Figma

node.effects = [1];

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

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

B[{ type: 'DROP_SHADOW', radius: 5 }]

C[{ effectType: 'DROP_SHADOW', radius: 5 }]

D[{ type: 'shadow', radius: 5 }]

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning a single object instead of an array.

Using incorrect property names like 'effectType' or 'shadow'.

The effects property expects an array of effect objects with the property 'type'. The correct syntax uses 'type' and an array.

4fill in blank

hard

Fill both blanks to create a semi-transparent inner shadow effect with offset x=3 and y=3.

Figma

const innerShadow = { type: [1], color: { r: 0, g: 0, b: 0, a: [2] }, offset: { x: 3, y: 3 }, radius: 8 };

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

A'INNER_SHADOW'

B0.5

C0.25

D'DROP_SHADOW'

Attempts:

3 left

💡 Hint

Common Mistakes

Using DROP_SHADOW instead of INNER_SHADOW.

Setting alpha too low or too high for semi-transparency.

INNER_SHADOW creates a shadow inside the object. The alpha value 0.5 makes it semi-transparent.

5fill in blank

hard

Fill all three blanks to define a background blur effect with radius 12 and visible property true.

Figma

const bgBlur = { type: [1], radius: [2], visible: [3] };

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

A'BACKGROUND_BLUR'

B10

Ctrue

D12

Attempts:

3 left

💡 Hint

Common Mistakes

Using LAYER_BLUR instead of BACKGROUND_BLUR.

Setting visible to false or missing it.

BACKGROUND_BLUR blurs the area behind the object. Radius 12 sets the blur strength. Visible true makes the effect active.