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.