I’m setting up product posts for a client in Figma. I have png files exported from photoshop, and imported them in Figma. I want to add a shadow, but it creates a strange white pixelated edge around the png. I have tried to contract te selection in photoshop to make sure there is no white space or what so ever, but it doesn’t help. When i add the shadow in photoshop I don’t have the problem, but I want to add them in Figma so I have more freedom later on in the project. See images below (dark blue bg = photoshop, light blue bg = Figma)
Is this a bug or has anyone an idea what is going on?
I would appreciate it, too, if someone could answer this question.
It only happens on lighter backgrounds. When the background turns dark, the issue usually disappears.
The drop shadow effect panel has an optional checkbox that says “Show behind transparent areas”. Select this, and that white halo around your PNG will go away.
Why it happens:
When you mask something in photoshop, your selection is going to feather a bit. Figma will pull the frames background color up behind any pixels that contain data - In other words, if a pixel has an alpha between 255 & 0, its going to render that pixel as a solid unless you check preserve the transparency.
Alternatives:
Going to Object, and flattening images also appears to help a bit.
