Opacity control in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Opacity Values

In Figma, opacity controls how transparent an object is. What opacity value makes an object fully visible?

A 100%

B 50%

C 0%

D 150%

💡 Hint

Think about the scale where 0% is invisible and 100% is fully visible.

Opacity at 100% means the object is fully visible with no transparency.

❓ visualization

intermediate

Effect of Opacity on Layer Visibility

You have a red rectangle with 40% opacity over a blue background. What color will you see where they overlap?

A A mix of red and blue with red partially transparent

B Solid blue

C White

D Solid red

💡 Hint

Opacity blends the top color with the background color.

At 40% opacity, the red rectangle is partially transparent, so the blue background shows through, creating a blended color.

❓ data_modeling

advanced

Opacity and Layer Stacking Order

In Figma, you have three overlapping layers: Layer A (opacity 100%), Layer B (opacity 50%), and Layer C (opacity 75%). Which layer's opacity affects the final color the most?

A Layer C because it has the highest opacity after Layer A

B Layer B because it is in the middle

C All layers affect equally regardless of opacity

D Layer A because it is fully opaque

💡 Hint

Consider how opacity and stacking order combine to affect visibility.

The topmost fully opaque layer (Layer A) blocks layers below it, so its opacity affects the final color the most.

🔧 Formula Fix

advanced

Troubleshooting Opacity Not Applying

You set a shape's opacity to 30% in Figma, but it still looks fully opaque. What is the most likely cause?

A Opacity only works on text layers, not shapes

B You need to restart Figma for opacity changes to apply

C The shape is inside a group with 100% opacity overriding it

D The opacity value must be set in the color picker, not the opacity slider

💡 Hint

Think about how group opacity affects child elements.

If a group has 100% opacity, it can override or mask opacity changes on individual shapes inside it.

🎯 Scenario

expert

Designing a Dashboard with Opacity for Clarity

You are designing a BI dashboard in Figma with multiple overlapping charts. To keep the dashboard clear, you want to use opacity effectively. Which approach best improves clarity?

A Set all charts to 50% opacity so they blend evenly

B Use 100% opacity for main charts and lower opacity for background elements

C Use random opacity values for variety

D Set all charts to 100% opacity and add blur effects

💡 Hint

Think about visual hierarchy and focus in design.

Using full opacity for main charts and lower opacity for background elements helps users focus on important data while keeping context visible.