Skip to main content

I am facing issues on Figma. For example, I have a circle with dimensions 400x400 in Figma and when exported in my Mac folder, it shows 401x401px. Which is not compatible with the device interface I’m working on…


Of course, a possible solution could be to scale the original component in Figma to 399x399, but should we cheat like this? Is this sustainable?


Any advice?

Hey @Ahtisham_Rasheed, thank you for reaching out!


Hmm, this could be potentially a bug. I’d like to get some more context here to help troubleshoot, could you invite support-share@figma.com as an editor to your affected file and share its URL so I can take a look? Please note that users with @figma.com emails on your team do not count towards your billing.


Also can you try as a workaround to duplicate your frame and export the copy and see if it’s still adding the extra pixel?


Thanks in advance!


Does your circle maybe contain an element (icon for instance) with subpixels like 300,66 x 300,66px @Ahtisham_Rasheed?


Figma has troubles with that. See numerous threads:




I am getting the same issue - I have also removed all decimals, Arrange > Round to pixel, and also zoomed in to check the location of the pixels. I get a 1px gray line around the right side and bottom every time.


Can you share a link to the file?


I can’t since it is not public atm


But I can say that if you export at 1.5x, it adds a ghost pixel. At 1x and 2x, it does not. I am just noting this here in case others are seeing the same issue. Most likely the system is accounting for and extra pixel because of the .5 increase in size.


I understand the problem.
The reason your exported file has some additional pixels, even with "Clip Content" enabled, could be:

  1. Your frame/object has some unwanted effects applied.
  2. Your frame/object is not aligned to the pixel grid. Try zooming in on the left corner and snapping it to the grid.
  3. Your frame/object does not have rounded dimensions. Even small decimal values can cause rounding issues and add extra pixels.

I hope this helps!
 

 


I noticed that it was caused by the X & Y position of the frame I was trying to export. It needs to be whole numbers, without decimals. That solved it easily for me. 👍


I am facing issues on Figma. For example, I have a circle with dimensions 400x400 in Figma and when exported in my Mac folder, it shows 401x401px. Which is not compatible with the device interface I’m working on…

Of course, a possible solution could be to scale the original component in Figma to 399x399, but before you do that, click here to see if there’s a better approach. Is this sustainable?

Any advice?

The issue happens because Figma sometimes rounds fractional pixels during export, especially if the object’s position or size isn’t aligned to whole pixels. Resizing to 399x399 isn’t ideal or sustainable. Instead, ensure your circle’s dimensions and position are whole numbers, enable “Use precise pixel export” in the export settings, and export at 1x scale. You can also use export slices to guarantee exact pixel dimensions. This approach keeps your assets consistent without manually “cheating” sizes.


I’ve had the same ghost pixel problem while working on UI assets for my Sportzfy TV app . A 400×400 element would sometimes export as 401×401, which messed up the alignment in my app.

What worked for me was:

  • Making sure shapes are snapped to the pixel grid (no decimals in X/Y).

  • Setting strokes to “Inside” instead of “Center.”

  • Exporting at 1x or 2x only (since 1.5x usually adds that extra pixel).

These small tweaks kept my exports clean and consistent across devices. Since my app relies on sharp visuals, even a single pixel makes a big difference.

Hope this helps anyone else running into the same issue!