0
0
Figmabi_tool~8 mins

Radial gradient in Figma - Dashboard Guide

Choose your learning style9 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash
Dashboard Mode - Radial gradient
Business Question

How can we use radial gradients in Figma to create visually appealing dashboard backgrounds that highlight key metrics?

Sample Data
Region Sales Q1 Sales Q2 Sales Q3 Sales Q4
North 100 150 130 170
South 90 120 110 140
East 80 100 90 110
West 70 95 85 105
Central 60 85 75 95
Dashboard Components
  • KPI Card: Total Annual Sales = Sum of all sales across regions and quarters.
    Formula: Total Sales = 100+150+130+170 + 90+120+110+140 + 80+100+90+110 + 70+95+85+105 + 60+85+75+95 = 2060
  • Background: Radial gradient in Figma with center color #4A90E2 (blue) fading to #FFFFFF (white) at edges.
    Settings: Center at 50% x, 50% y; radius 150px.
  • Bar Chart: Sales by Region (sum of all quarters per region).
    Values: North=550, South=460, East=380, West=355, Central=315.
  • Pie Chart: Percentage contribution of each region to total sales.
    North=26.7%, South=22.3%, East=18.4%, West=17.2%, Central=15.3%.
Dashboard Layout
+--------------------------------------------------+
|                    Radial Gradient Background    |
| +----------------+  +--------------------------+ |
| |   KPI Card     |  |      Bar Chart            | |
| | Total Sales:   |  |  Sales by Region          | |
| | 2060           |  |                          | |
| +----------------+  +--------------------------+ |
|                                                  |
|                  +--------------------------+    |
|                  |      Pie Chart            |    |
|                  |  Sales % by Region        |    |
|                  +--------------------------+    |
+--------------------------------------------------+
Interactivity

Adding a region filter updates the Bar Chart, Pie Chart, and KPI Card to show data only for the selected region. The radial gradient background remains static to keep focus on the data.

Self Check

If you add a filter to show only the 'North' region, which components update?

  • KPI Card updates to show Total Sales for North: 550.
  • Bar Chart updates to show only North's sales.
  • Pie Chart updates to show 100% for North.
  • Background radial gradient stays the same.
Key Result
Dashboard showing total sales and sales distribution by region with radial gradient background in Figma.