Effect styles in Figma - Dashboard Guide

Dashboard Mode - Effect styles

Dashboard Goal

Understand how to use effect styles in Figma to enhance BI dashboard visuals for better clarity and focus.

Sample Data

Region	Sales	Profit	Month
North	1000	200	January
South	1500	300	January
East	1200	250	January
West	1300	270	January
North	1100	220	February
South	1600	320	February
East	1250	260	February
West	1350	280	February

Dashboard Components

• KPI Card - Total Sales: Displays sum of Sales (1000+1500+1200+1300+1100+1600+1250+1350 = 10300). Effect style: Drop shadow to highlight card.
• KPI Card - Total Profit: Displays sum of Profit (200+300+250+270+220+320+260+280 = 2100). Effect style: Inner shadow for subtle depth.
• Bar Chart - Sales by Region: Shows total sales per region (North: 2100, South: 3100, East: 2450, West: 2650). Effect style: Blur effect on bars when region is not selected to focus user attention.
• Line Chart - Profit Over Months: Shows profit trend for January and February (January: 1020, February: 1080). Effect style: Glow effect on line to emphasize trend.
• Data Table: Shows detailed sales and profit by region and month. Effect style: No effect for clarity.

Dashboard Layout

+----------------------+----------------------+  
|  KPI: Total Sales    |  KPI: Total Profit   |  
|  (Drop Shadow)       |  (Inner Shadow)      |  
+----------------------+----------------------+  
|                                              |  
|      Bar Chart: Sales by Region               |  
|      (Blur effect on unselected bars)        |  
|                                              |  
+----------------------+----------------------+  
|                                              |  
|      Line Chart: Profit Over Months           |  
|      (Glow effect on line)                    |  
|                                              |  
+----------------------------------------------+  
|                                              |  
|      Data Table: Sales and Profit Details     |  
|      (No effect)                              |  
+----------------------------------------------+  

Interactivity

When a user clicks a region in the Bar Chart, the bars for other regions get a blur effect to reduce focus. The KPI cards update to show sales and profit only for the selected region. The Line Chart updates to show profit trend for the selected region only. The Data Table filters rows to the selected region. Effect styles help guide user attention to the selected data.

Self Check

Add a filter for Region = 'South'. Which components update and how do effect styles change?

• KPI Cards update to show South region totals.
• Bar Chart blurs bars for North, East, West regions.
• Line Chart glows line for South region profit trend only.
• Data Table shows only South region rows.

Key Result

A BI dashboard in Figma demonstrating effect styles like drop shadow, inner shadow, blur, and glow to highlight and focus on sales and profit data by region and month.

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