Why are my images exporting with white sides?
I’m trying to export a bunch of images all the same size 350x400 but some of them are appearing smaller when exported as they have either a line of white on the side or the bottom or both. I’ve checked that they are all the same dimensions and they are so I’m confused.
1 Like
2 Likes
This should be fixed! This is a wrench in the gears for sure! A basic function that shouldn’t be an issue.
1 Like
just don’t use half pixels and keep snap to pixel grid on…
That’s not a solution to the problem which is having something look one way in Figma, and then exporting that and having an unexpected output. If I’m using a tool to create something, I don’t want it to present my work one way while I’m building with it and then when I go to export it it renders differently because of some finicky settings! That’s like using a camera to take pictures and looking in the viewfinder to frame your picture, then clicking the button to take the picture and then the actual picture comes out framed differently.
What’s the point of the viewfinder then at that point??? To get the framing “kind of right”? Like in the ballpark? Then I have to do this extra step of re-cropping all my photos to compensate for the viewfinder and the sensor not being matched up?
I appreciate your input and your solution, but it would save a lot of people a lot of time if the export rendering engine either didn’t do the white edges thing and just rendered things AS THEY LOOK ON THE SCREEN, or not allowing things to be placed or occupy half pixel coordinates. How many people using Figma are going to want to use half pixel values anyway? We’re designing for screens. Snap to pixel should be on by default to avoid this and other issues.
I love Figma. I love how fast it is and how powerful it is. This isn’t a big deal at all. Just a minor annoyance that I think shouldn’t be there. My two cents plus a rant because I’ve gotten my systems optimized to a point where little issues like this have mostly been eliminated from my workflow.
1 Like
this sounds exactly like the same problem when I’m exporting images on Illustrator, as well as the same causes 
i also agree with @mike_kong 's sentiment; as a designer, I expect Figma to output the exact pics exactly as I see it on my browser.
From a dev standpoint, I’m curious as to :
a) why fractional coordinates and dimensions lead to the extra white lines during export?
b) what are the technical challenges with trying to fix this issue?
Dimensions: if you export something like a 10.13 by 15.24 rectangle, raster images can only contain full pixels, so to export everything you see every editor would need to export an 11 by 16 image. Cutting extra pixels might make more sense, but I imagine it might also create edge-cases where that’s undesirable.
Coordinates: I guess that’s just how Figma’s renderer works. Instead of creating a new pixel grid for every export and putting an object at 0,0 on it, Figma probably simply takes something like a crop of the full canvas using the absolute pixel grid (as if you placed a Slice on top). Therefore a 10x10 square placed at 0.5, 0.5 coordinates would take 10.5x10.5 area, which would turn into 11x11 due to what I described above.
I don’t think Figma has any challenges with improving this. The main issue is this thing is not a priority for them. There are literally hundreds of feature requests and ideas they are working on. Improving this behavior won’t make them any money and it doesn’t impact the majority of the community in any significant manner so I don’t think it would be a priority anytime soon.
this makes a lotta sense!
i guess that’s why Illustrator also has that similar export problem; Adobe probably feels that it’s not worth their time to fix that issue as well 
I have 0 non-integer absolute coordinates and have the same issue with export