Skip to main content

I have created a badge inside Figma, and it consists of two elements. The background element is positioned at x:0, y:0, and the foreground element is centrally positioned in respect to the foreground element. Both elements are using integer values for positioning.

When I go to the export menu I get the following error messages:

Origin not aligned to pixels.

Origin snapped to (-5, -16).

Dimensions may expand by a pixel.

I get those messages regardless whether I'm exporting as PNG or SVG.

When I export the work as a PNG everything from Figma gets preserved on that PNG image, but the problem starts s when I export the work as an SVG. When I do export it as an SVG file and I open it in Inkscape or I use it as a component on the website, it gets messed up. The gradient from the badge does not get preserved, the edges become rough, and it doesn’t look like an SVG element but rather as a low quality jpeg file.

 

Then I have created a completely new file in Figma and draw a triangle shape inside. Then without changing anything else, I went to the export page and I was seeing the same three error messages as in the previous file.

 

I am using Figma for the first time, and I’ve been looking online for a solution, but I couldn't find anything that would help me.

Does anyone know what is causing those SVG exported files to get corrupted? And what can I do about it?

 

Here’s how it looks inside Figma and also when exported as an PNG

Inside Figma and after exporting as a PNG

 

And this is how it looks when I export it as an SVG

After exporting as SVG

 

I’ve managed to find help with this problem. Here’s an update for anyone else stumbling into the same problem.. My Figma design used angular gradients, which could not be properly exported to the svg file.

Hi Andrija! That's correct, SVG doesn’t support angular gradients. Please see our Export formats and settings guide for more details.
Still, there is a temporary solution that may be helpful, you can rasterize the object before exporting.
To do this in Figma, select the object, then go to the main Figma menu (in the top left) and choose Object > Rasterize selection.
 


I hope this helps!

Terms & ConditionsCookie settingsAccessibility statement