Skip to main content

I am unable to find a solution to exporting the image so that it appears the same way as it does in Figma. If anyone knows why this is happening and how to solve the problem I would really appreciate the help.


Screenshot:


Exported Image Does Not Appear The Same As In Figma


It may be worth noting…



  • The original image (a png) had a small border around the black center part creating a kind of frame with a color I did not want (it was part of the image).

  • I created a frame named “Crop” and used the “Clip Content” feature to remove it.

  • The frame named “Dollar Sign” provides a different background color (949494) thus creating a kind of border or frame around the black center part that has the color I do want.

  • The Image is nested inside the Crop frame and the Crop frame is nested inside the Dollar Sign frame.

  • There is a property called “luminosity” being applied.

  • Because of its purpose this was never meant to be very involved and the approach taken to achieving the outcome is pretty unimportant - it only matters as much as exporting the image properly matters).

  • While there may well be a much better way to achieve what I’m trying to do I am primarily concerned with a solution to exporting the image so it appears the same as it does in Figma.

Hi @Jake, I won’t speak to your process of clipping and cropping, but I may be able to help regarding your exporting.


I was able to replicate your issue and found that if you only apply luminosity to the frame, it will not export with that layer mode applied.


However, if you apply luminosity to the image layer/element, your exported frame should export that applied layer mode.

@Paul_Soultis


Hey that works! Thanks for showing me that.

Apparently there is another solution to the problem where the original configuration can be kept. The solution described in this response works where a blend mode (luminosity) was applied to the top level frame. I tried it and it works too.

Hi @Jake , that’s great and no problem, glad that solution worked for you and thanks for sharing an alternative solution as well.

I tried and I think there is  anthor method : uncheck ignore overlapping layers😀@Jake

 

Hello,

Not sure if I had the same problem, but I designed some documents that had a background image on the wrapping frame.
When exporting as PDF, the image would disappear most of the time.
I tried a lot of things like clip content, making sure the image was a layer and not just a fill on my frame, etc.

The only fix I found was applying a uniform layer blur effect on my image, setting it to the lowest I could, which is 0.01. 
The blur effect actually doesn’t do anything as the value is extremely low (at least I didn’t notice any change to the image).
After that, all my exports were correctly displaying the image as background.

In case it helps someone out here…

Terms & ConditionsCookie settings