I’m trying to create a component with a selected state like so:
The problem is when the selected item is in the middle, one of the neighboring items will cover the border:
I could change the border from outside to inside, but then there’s a gap between the items and the border. Is there a way to achieve the effect I want in Figma?
Huh, this is interesting. I would imagine implementing some sort of “stack order” – a parallel to z-index in CSS would be possible.
Facing same issue
Anyone has any workarounds to this? I am having the same issue
There is indeed a workaround but it will only work if you are not changing the fill color during interactions.
Check this: How can I do a shadow effects while hovering on consecutive buttons - #2 by Raphael_M
If you have other questions, let me know.
Thanks.
Not really, I need to have auto layout activated. If I bring the layer to the top it will move left/right but I need it to be at the center.
It works, thanks! Just that my design system is using drop shadow with transparency for the typing state, so I can still see the grey border of the next input field.
I’ll need to consider if I should amend the fill color of all the text fields in my variants to standardize it in the design system and do an edge case on the drop shadow in this use case by removing transparency and use solid color instead.
