0
0
Figmabi_tool~8 mins

Multiple fills on one element in Figma - Dashboard Guide

Choose your learning style9 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash
Dashboard Mode - Multiple fills on one element
Dashboard Goal

Show how to use multiple fills on one shape in Figma to create a visually rich KPI card for sales performance.

Sample Data
MonthSalesTarget
January100120
February150130
March200180
April170160
May220200
Dashboard Components
  • KPI Card Shape: Rectangle with multiple fills:
    • Fill 1: Solid color #4CAF50 (green) for base background
    • Fill 2: Linear gradient from transparent to white at bottom for light effect
    • Fill 3: Radial gradient from center with white at 20% opacity for highlight
  • Sales Number Text: Displays total sales for May: 220
  • Target Number Text: Displays target for May: 200
  • Progress Bar: Rectangle fill width proportional to sales/target ratio (220/200 = 110%) clipped at 100%
Dashboard Layout
+-----------------------------+
|          KPI Card            |
|  +-----------------------+  |
|  |  Multiple fills shape |  |
|  |  Sales: 220           |  |
|  |  Target: 200          |  |
|  |  Progress bar         |  |
|  +-----------------------+  |
+-----------------------------+
Interactivity

When you change the month selection, the sales and target numbers update. The progress bar width adjusts to the sales/target ratio for the selected month. The multiple fills on the KPI card shape remain the same to keep consistent style.

Self Check

If you select March, what is the sales number shown? What is the progress bar width percentage?

Answer: Sales number is 200. Target is 180. Progress bar width is 200/180 = 111%, clipped at 100% if implemented.

Key Result
A KPI card in Figma using multiple fills on one shape to show sales vs target with dynamic progress bar.