Multiple fills on one element in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working on a sales dashboard for your company's BI tool.

📋 Request: Your manager wants a visually appealing KPI card that uses multiple fills on one element to highlight sales performance with layered colors and gradients.

📊 Data: You have a KPI card element representing monthly sales. You want to apply multiple fills to the card's background to create a layered color effect.

🎯 Deliverable: Create a KPI card in Figma with one rectangle element that has at least two fills: a solid color and a gradient overlay.

Sample Data

Element	Fill Type	Color/Gradient
KPI Card Background	Fill 1	Solid Color: #1E90FF (Dodger Blue)
KPI Card Background	Fill 2	Linear Gradient: from transparent white to white at 50% opacity

1

Step 1: Create a rectangle element sized 300x150 pixels to serve as the KPI card background.

Use the Rectangle tool in Figma and set width=300px, height=150px.

Expected Result

A blank rectangle of size 300x150 pixels appears on the canvas.

2

Step 2: Apply the first fill: a solid color fill with hex code #1E90FF (Dodger Blue).

Select the rectangle, go to the Fill section, click the color box, and enter #1E90FF.

Expected Result

The rectangle background changes to a solid Dodger Blue color.

3

Step 3: Add a second fill to the same rectangle: a linear gradient from transparent white to white at 50% opacity.

In the Fill section, click the '+' icon to add a new fill. Change fill type to Linear Gradient. Set gradient stops: start color rgba(255,255,255,0), end color rgba(255,255,255,0.5). Adjust angle to 90 degrees (top to bottom).

Expected Result

The rectangle now shows a layered effect with the blue base and a white gradient overlay fading from transparent to semi-transparent white.

4

Step 4: Reorder the fills if needed to ensure the gradient overlay is on top of the solid color fill.

In the Fill list, drag the gradient fill above the solid color fill.

Expected Result

The gradient overlay visually appears on top of the solid blue background.

5

Step 5: Add text elements on top of the rectangle to show sales KPI (e.g., 'Monthly Sales: $120K').

Use the Text tool, type the KPI text, set font size to 24px, color white (#FFFFFF), and center it inside the rectangle.

Expected Result

The KPI text is clearly visible on top of the layered background.

Final Result

┌───────────────────────────────┐
│                               │
│   Monthly Sales: $120K         │
│                               │
│  [Blue background with white  │
│   gradient overlay on top]     │
└───────────────────────────────┘

✓Multiple fills on one element allow layering of colors and gradients.

✓The gradient overlay adds depth and visual interest to the KPI card background.

✓Proper fill order controls which fill appears on top.

Bonus Challenge

Create a third fill on the same rectangle using a radial gradient to simulate a light spot effect on the KPI card.

Show Hint

Add a new fill, set fill type to Radial Gradient, use white color with low opacity in the center and transparent at edges, position the gradient center near the top-left corner.