Effect styles in Figma - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are Effect Styles in Figma?

Effect Styles are reusable sets of visual effects like shadows and blurs that you can apply to multiple objects to keep your design consistent.

beginner

How do Effect Styles help in a design project?

They save time by letting you apply the same effects across many elements and make it easy to update all those effects at once by editing the style.

intermediate

Which types of effects can be saved as Effect Styles in Figma?

You can save shadows (drop shadows, inner shadows) and blurs (background blur, layer blur) as Effect Styles.

intermediate

How do you create a new Effect Style in Figma?

Select an object with the effect applied, go to the Effects section in the right panel, click the four dots icon, then click '+' to create and name a new Effect Style.

intermediate

What happens if you edit an Effect Style after applying it to multiple objects?

All objects using that Effect Style update automatically to reflect the changes, keeping your design consistent without manual edits.

Which of these can be saved as an Effect Style in Figma?

A Font size

B Drop shadow

C Text color

D Stroke width

Effect Styles save visual effects like shadows and blurs, not text or stroke properties.

What is the main benefit of using Effect Styles?

A They help keep effects consistent and easy to update

B They allow you to animate objects

C They change the layout of your design

D They export your design as code

Effect Styles keep your effects consistent and let you update many objects at once.

How do you apply an existing Effect Style to an object?

A You cannot apply Effect Styles after creation

B Drag and drop the style onto the object

C Right-click the object and select 'Apply Style'

D Select the object, then choose the Effect Style from the Effects panel

You select the object and pick the Effect Style from the Effects section in the right panel.

If you edit an Effect Style, what happens to objects using it?

A They keep the old effect

B You must reapply the style manually

C They update automatically with the new effect

D They lose all effects

Editing an Effect Style updates all objects using it automatically.

Which effect is NOT part of Effect Styles in Figma?

A Stroke color

B Background blur

C Inner shadow

D Layer blur

Stroke color is not an effect; Effect Styles only include shadows and blurs.

Explain what Effect Styles are and why they are useful in Figma.

Think about how you keep shadows and blurs the same across many objects.

Describe the steps to create and apply an Effect Style in Figma.

Focus on the Effects panel and the style creation process.

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