Background blur in Figma - Dashboard Guide

Dashboard Mode - Background blur

Dashboard Goal

Understand how to use background blur effects in Figma to improve dashboard readability and focus on key data points.

Sample Data

Region	Sales	Profit	Month
North	100	30	January
South	200	50	January
East	150	40	January
West	120	35	January
North	130	45	February
South	210	55	February
East	160	42	February
West	140	38	February

Dashboard Components

• KPI Card: Total Sales
  Shows the sum of all sales values.
  Formula: SUM(Sales) = 1210
• KPI Card: Total Profit
  Shows the sum of all profit values.
  Formula: SUM(Profit) = 335
• Bar Chart: Sales by Region
  Displays sales totals for each region.
  Data:
  North: 230, South: 410, East: 310, West: 260
• Background Blur Layer: A semi-transparent overlay with background blur applied behind KPI cards to improve focus and readability.
• Table: Detailed Sales Data
  Shows all rows from sample data for reference.

Dashboard Layout

+--------------------------------------------------+
|                    Background Blur                |
|  +------------+  +------------+                   |
|  | Total      |  | Total      |                   |
|  | Sales      |  | Profit     |                   |
|  |  1210      |  |  335       |                   |
|  +------------+  +------------+                   |
|                                                  |
|  +--------------------------------------------+  |
|  | Bar Chart: Sales by Region                  |  |
|  |                                            |  |
|  +--------------------------------------------+  |
|                                                  |
|  +--------------------------------------------+  |
|  | Table: Detailed Sales Data                   |  |
|  |                                            |  |
|  +--------------------------------------------+  |
+--------------------------------------------------+

Interactivity

Adding a region filter updates the Bar Chart and the Table to show only data for the selected region. The background blur remains static behind the KPI cards to keep focus on key metrics.

Self Check

If you add a filter for Region = "South", which components update?

• The Bar Chart updates to show sales only for South (total 410).
• The Table updates to show only rows where Region is South.
• The KPI Cards remain showing totals for all regions (no change).
• The Background Blur layer remains unchanged.

Key Result

Dashboard showing sales and profit KPIs with background blur effect behind KPI cards, plus sales by region bar chart and detailed data table.