Skip to main content

Hello Everyone,

i’m a beginner Figma user and want to design a banner for a home page. My issue is the following: rectangle and text created and then autolayout for the whole group but when i want to set the opacity of the rectangle (50%) the text color is also become lighter. See the pictures attached. Does anyone have a solution for me?Thank you in advance

 

Hi.

There is no rectangle on your second screenshot — only the frame and the text within it. You adjusted the opacity of the frame, which is why the text inside became transparent as well. The solution is to change opacity of the Fill, but not the Appearance. But to do this you need to detach the color variable.

 


Hey ​@EvaRita ! 👋

 

This happens because when you added Auto Layout to both the rectangle and the text, Figma automatically applied the rectangle’s fill to the entire Auto Layout frame. So when you reduce the opacity to 50%, it affects everything inside — including the text — making it look faded too.

 

Here are two ways to fix it:

1. Adjust Fill Opacity Only:
If you just want to fade the background, go into the "Fill" section of the frame, and adjust the opacity of the fill color itself, not the whole layer. That way, the text won’t be affected.

2. Use a Background Rectangle Separately:

  • Add a new rectangle inside the Auto Layout frame

  • Select it and click “Ignore Auto Layout” from the “Position” section

  • Set the constraints to left to right and top to bottom

  • Match its size to your content box manually

  • Now apply 50% opacity to this rectangle

 

This method keeps your text sharp while giving you a faded background look. Hope that helps! 😊


Oh it was so simple and i was searching for the answer for days… 

Thank you very much, guys for your comments, I could solve the issue in Figma.


Reply