Effect styles in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working with the marketing team

📋 Request: Your manager wants a consistent visual style for all buttons and cards in the marketing dashboard using effect styles in Figma

📊 Data: You have a Figma file with multiple buttons and cards that currently have different shadow and blur effects applied manually

🎯 Deliverable: Create reusable effect styles for shadows and blurs, apply them consistently to all buttons and cards, and prepare a style guide page showing these effect styles

Sample Data

Component	Current Effect	Color	Blur	Offset X	Offset Y	Spread
Button Primary	Drop Shadow	rgba(0,0,0,0.25)	4	0	2	0
Button Secondary	Drop Shadow	rgba(0,0,0,0.15)	2	0	1	0
Card Main	Drop Shadow	rgba(0,0,0,0.1)	8	0	4	0
Card Highlight	Inner Shadow	rgba(255,255,255,0.5)	6	0	-2	0

1

Step 1: Open the Figma file and select the Button Primary component

Inspect the current drop shadow effect: Color rgba(0,0,0,0.25), Blur 4, Offset X 0, Offset Y 2, Spread 0

Expected Result

You understand the exact shadow settings used for Button Primary

2

Step 2: Create a new effect style named 'Shadow Primary' with the inspected settings

Effect: Drop Shadow, Color rgba(0,0,0,0.25), Blur 4, Offset X 0, Offset Y 2, Spread 0

Expected Result

Effect style 'Shadow Primary' is saved and available in the styles panel

3

Step 3: Repeat steps 1 and 2 for Button Secondary, creating 'Shadow Secondary' effect style

Effect: Drop Shadow, Color rgba(0,0,0,0.15), Blur 2, Offset X 0, Offset Y 1, Spread 0

Expected Result

Effect style 'Shadow Secondary' is saved

4

Step 4: Repeat for Card Main, creating 'Shadow Card' effect style

Effect: Drop Shadow, Color rgba(0,0,0,0.1), Blur 8, Offset X 0, Offset Y 4, Spread 0

Expected Result

Effect style 'Shadow Card' is saved

5

Step 5: Create an effect style for Card Highlight named 'Inner Glow Highlight' with inner shadow settings

Effect: Inner Shadow, Color rgba(255,255,255,0.5), Blur 6, Offset X 0, Offset Y -2, Spread 0

Expected Result

Effect style 'Inner Glow Highlight' is saved

6

Step 6: Apply the new effect styles to all corresponding components by selecting each and replacing manual effects with the saved styles

Select Button Primary and apply 'Shadow Primary'; Button Secondary with 'Shadow Secondary'; Card Main with 'Shadow Card'; Card Highlight with 'Inner Glow Highlight'

Expected Result

All components use consistent effect styles from the styles panel

7

Step 7: Create a new page named 'Style Guide' in the Figma file

Add text labels and sample rectangles showing each effect style applied

Expected Result

A clear style guide page showing 'Shadow Primary', 'Shadow Secondary', 'Shadow Card', and 'Inner Glow Highlight' effect styles

Final Result

Button Primary

↓

Card Main

↓

Card Highlight

✓Using effect styles ensures consistent shadows and glows across all components

✓Applying effect styles makes future updates easier by changing the style once

✓The style guide page helps the team understand and reuse the visual effects

Bonus Challenge

Create a variant of the 'Shadow Primary' effect style with a color tint matching the brand's primary color and apply it to a new button variant

Show Hint

Duplicate the 'Shadow Primary' effect style, change the shadow color to a semi-transparent brand color, and apply it to the new button

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