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.

Practice

1. What is the main purpose of Effect styles in Figma?

easy

A. To add shadows, blurs, and other visual effects to design elements

B. To change the color palette of your design

C. To organize layers in your project

D. To create interactive prototypes

Solution

1. Step 1: Understand what effect styles do

   Effect styles are used to add visual effects like shadows and blurs to design elements.

2. Step 2: Compare with other options

   Changing colors, organizing layers, or prototyping are different features in Figma, not effect styles.

3. Final Answer:

   To add shadows, blurs, and other visual effects to design elements -> Option A

4. Quick Check:

   Effect styles = Visual effects [OK]

Hint: Effect styles = shadows and blurs, not colors or layers [OK]

Common Mistakes:

• Confusing effect styles with color styles
• Thinking effect styles organize layers
• Mixing effect styles with prototyping features

2. Which of the following is the correct way to apply an existing effect style to a shape in Figma?

easy

A. Drag and drop the effect style onto the shape from the Layers panel

B. Right-click the shape and select 'Add Color Style'

C. Double-click the shape and type the effect style name

D. Select the shape, go to the Effects panel, and choose the saved effect style

Solution

1. Step 1: Recall how to apply effect styles

   Effect styles are applied by selecting the shape and choosing the style from the Effects panel.

2. Step 2: Eliminate incorrect options

   Adding color styles, dragging from Layers, or typing names directly are not correct methods.

3. Final Answer:

   Select the shape, go to the Effects panel, and choose the saved effect style -> Option D

4. Quick Check:

   Apply effect style via Effects panel [OK]

Hint: Use Effects panel to apply saved effect styles [OK]

Common Mistakes:

• Trying to add effect styles via color style options
• Dragging styles from Layers panel (not possible)
• Typing style names instead of selecting

3. Given a rectangle with a shadow effect style applied, what happens if you update the shadow's blur radius in the effect style?

medium

A. All objects using that effect style update automatically with the new blur radius

B. Only the selected rectangle updates with the new blur radius

C. The blur radius cannot be changed once applied

D. The effect style is duplicated and applied to the rectangle

Solution

1. Step 1: Understand effect style behavior

   Effect styles are linked, so changing the style updates all objects using it.

2. Step 2: Analyze options

   Only updating one object or duplicating the style is incorrect; blur radius can be changed.

3. Final Answer:

   All objects using that effect style update automatically with the new blur radius -> Option A

4. Quick Check:

   Effect style update = global change [OK]

Hint: Updating effect style changes all linked objects [OK]

Common Mistakes:

• Thinking only one object updates
• Believing effect styles are fixed and unchangeable
• Confusing duplication with update

4. You tried to apply an effect style to a text layer, but the effect does not appear. What is the most likely reason?

medium

A. Effect styles cannot be applied to text layers

B. The effect style is set to 'Inner Shadow' which is not visible on text

C. The effect style is disabled in the Effects panel

D. The text layer has no fill color, so effects are invisible

Solution

1. Step 1: Check effect style applicability

   Effect styles can be applied to text layers, so Effect styles cannot be applied to text layers is incorrect.

2. Step 2: Consider effect visibility and settings

   If the effect style is disabled in the Effects panel, it won't show on any layer.

3. Final Answer:

   The effect style is disabled in the Effects panel -> Option C

4. Quick Check:

   Disabled effect style = no visible effect [OK]

Hint: Check if effect style is enabled in Effects panel [OK]

Common Mistakes:

• Assuming effect styles don't work on text
• Ignoring effect style enable/disable toggle
• Confusing fill color with effect visibility

5. You want to create a consistent drop shadow effect across multiple components in your BI dashboard design. What is the best approach using effect styles?

hard

A. Manually add the same shadow settings to each component separately

B. Create a shared effect style for the drop shadow and apply it to all components

C. Use different effect styles for each component to customize shadows individually

D. Apply a blur effect instead of a shadow for consistency

Solution

1. Step 1: Understand the goal of consistency

   Consistency means using the same effect style across components to keep uniformity.

2. Step 2: Evaluate options for best practice

   Creating a shared effect style allows easy updates and consistent appearance.

3. Final Answer:

   Create a shared effect style for the drop shadow and apply it to all components -> Option B

4. Quick Check:

   Shared effect style = consistent design [OK]

Hint: Use shared effect style for uniform shadows [OK]

Common Mistakes:

• Manually setting shadows causing inconsistency
• Using different styles defeats consistency
• Confusing blur with shadow effect