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
Best answer by farhanshakir
Hey
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! 😊
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
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.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.