Linear gradient in Figma - Dashboard Guide

Dashboard Mode - Linear gradient

Dashboard Goal

Show how to use a linear gradient to visually represent sales growth from low to high across regions.

Sample Data

Region	Sales
North	100
South	200
East	300
West	150
Central	250

Dashboard Components

• KPI Card: Total Sales = 100 + 200 + 300 + 150 + 250 = 1000
• Bar Chart: Sales by Region with bars colored using a linear gradient from light blue (lowest sales) to dark blue (highest sales).
• Table: Region and Sales with background color cells using linear gradient shading from light to dark blue based on sales value.

Dashboard Layout

+----------------------+----------------------+
|      KPI Card        |      Bar Chart       |
|    Total Sales: 1000 | Sales by Region      |
+----------------------+----------------------+
|                      Table with sales colored by linear gradient           |
+--------------------------------------------------------------------------+

Interactivity

A filter for Region allows selecting one or more regions. When filtered, the KPI card, bar chart, and table update to show sales only for the selected regions. The linear gradient colors adjust dynamically based on the filtered sales range.

Self Check

If you filter to show only the East and West regions, which components update and how do the colors in the bar chart and table change?

Key Result

Dashboard showing total sales and sales by region with linear gradient coloring to highlight sales growth.