Figmabi_tool

Multiple fills on one element in Figma - Cell-by-Cell Formula Trace

Choose your learning style9 modes available

Learn Why Deep Sheet Try Challenge Scenario Recall Dash

Concept Flow

Element with multiple fills:
+---------------------+
| Base Fill: #FF0000   |
| Overlay Fill: #0000FF|
| Overlay Opacity: 50% |
+---------------------+

This shows an element in Figma with two fills: a solid red base fill and a blue overlay fill with 50% opacity layered on top.

Formula

Final Color = Base Color * (1 - Opacity) + (Overlay Color * Opacity)

Where:
Base Color = #FF0000 (red)
Overlay Color = #0000FF (blue)
Opacity = 50% (0.5)

The formula calculates the final visible color by blending the overlay color at 50% opacity over the base color.

Step-by-Step Trace

Step	Expression	Evaluates To	Explanation
1	Base Color = #FF0000	#FF0000	Base fill color is solid red.
2	Overlay Color = #0000FF	#0000FF	Overlay fill color is solid blue.
3	Opacity = 50%	0.5	Overlay fill opacity is 50%, meaning semi-transparent.
4	Overlay Color * Opacity = #0000FF * 0.5	R:0, G:0, B:128	Multiply each RGB channel of blue by 0.5 for semi-transparent overlay.
5	Final Color = Base Color * (1 - Opacity) + Overlay Color * Opacity = #FF0000 * 0.5 + R:0,G:0,B:128	R:128, G:0, B:128	Blend by multiplying base channels by (1-0.5) and adding the semi-transparent overlay channels.
6	Final Color in Hex = #800080	#800080	Convert final RGB values back to hex format.

The final color #800080 is the visible result of layering the fills.

Variable Tracker

Variable	Value
Base Color	#FF0000
Overlay Color	#0000FF
Opacity	0.5
Overlay Color * Opacity	R:0, G:0, B:128
Final Color	R:128, G:0, B:128
Final Color Hex	#800080

Key Moments

What is the base fill color?

How is the overlay color adjusted before combining?

What is the final color after layering the fills?

Sheet Trace Quiz - 3 Questions

Test your understanding

What happens to the overlay color before it is added to the base color?

AIt is multiplied by the opacity

BIt is ignored

CIt is converted to grayscale

DIt is darkened by 50%

Key Result

Multiple fills on one element combine colors by layering the overlay fill with its opacity over the base fill, resulting in a blended final color.

Transcript

We start with a base fill color of solid red (#FF0000). Then we add an overlay fill color of solid blue (#0000FF) with 50% opacity. To find the final color, we multiply the base color's RGB values by (1 - 0.5) and the overlay color's RGB values by 0.5 to account for opacity, then add these values channel-wise. The final RGB values are R:128, G:0, B:128, which convert back to the hex code #800080, which is the visible color on the element after layering the fills.