Archived from the Bravo community forum (2021–2026). Some answers may refer to older versions of Bravo.
I've noticed that in Bravo Vision opacity appearance is different depending on how opacity has been applied.
Here's my Figma setup:
I've included properties panel screenshots to show that:
- the left rectangle has 50% opacity applied on the Layer level
- the right rectangle has 50% opacity applied on the Fill level
Here's how it looks in the Bravo Vision:
It looked to me as if the left rectangle was exactly 50% "more transparent" than the left one so I've applied 50% Layer opacity to the right one as well, to see what will happen.
Here's Bravo Vision screenshot:
So it seems to me that Layer opacity cascade down to the Fill opacity and only then a calculation is being done.
I've made one more test to see if that's true. Here's my Figma setup:
My assumption was that if it's true that Layer opacity cascade down to Fill opacity and then they are multiplied, then both rectangles should look the same since 40% of 40% = 16% (which is the Layer opacity of the right rectangle).
Here's Bravo Vision result:
So yeah - I think there's a bug where Layer opacity is being applied to the Fill and then multiplied by it.
6 replies
Interesting finding have you tried both android and iOS to see if they look the same?
yes, here are the results:
iOS + XD
Android + Figma
Android + XD
That’s amazing I will think of a chart ;-)
It was hard to get a conclusion from xd or android. Do you want to try this: https://www.figma.com/file/lkyACgkFwdGkdcKMR62W1C/Untitled?node-id=1%3A14
So, conclusion for Figma is: always use % on the Fill, it will be exactly like on the computer.
Very nice - this should help visualize the problem. That said, sticking with Fill opacity should be only a temporary solution I think.
What's great about Bravo Studio is that we can use our designs almost as they are - it's just a matter of framing and taging. If we'll need to remember about making our designs "Bravo-compatible", this would complicate things and increase learning curve.
It's getting crazier 🙂
Here's how strokes react to the same settings (I didn't update Figma's Properties panel screenshots to show stroke settings but the approach is the same - Layer opacity on the left and Stroke color opacity on the right)
Figma:
Bravo Vision:
It seems to be the other way round this time 🙂
And from what I can see Dashed strokes are also not supported (but this one is expected since Bravo docs suggest to outline strokes anyway).
Wrote something in this thread and want it removed? Request removal
Ask the community on Discord
This archive is read-only. New questions, office hours and product updates now happen in the Bravo Discord.
Join the Discord