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