I’m having trouble with SVG exports from Figma. I created a button design with smooth rounded corners that looks perfect inside Figma. When I export it as a PNG file, everything looks great and the rounded borders are smooth. However, when I export the same design as an SVG file, the rounded corners appear jagged and pixelated instead of smooth. This happens even when I zoom in on the SVG file. The corners look like they have been cut or chopped rather than being properly rounded. Has anyone else experienced this issue with Figma SVG exports? Is there a setting I’m missing or a workaround to get smooth rounded borders in SVG format?
weird workaround but try converting your rounded rectangle to outlines first (Object > Flatten Selection). Sometimes figma’s live corner radius gets messy during svg conversion, but flattened paths export cleaner. also check if you’ve got any effects applied - even subtle ones can mess with the export engine.
yeah i noticed that too! export at 2x or even 4x, it helps smoothed things out. but def stay away from drop shadows, they wreck the svg’s quality for sure.
Had this exact issue last month on a client project. Figma’s vector rendering gets wonky during export - here’s what fixed it for me: Use whole numbers for corner radius (4px or 8px, not 4.5px) and make sure your shapes sit on pixel boundaries. Check that your button’s X and Y coordinates don’t have decimals. If they do, nudge it a pixel or two. Still having issues? Try duplicating the button before export - Figma sometimes caches weird rendering problems with specific objects.
This happens because Figma’s SVG export sometimes fakes rounded corners with multiple anchor points instead of proper bezier curves. I’ve had luck switching to Boolean operations - skip the corner radius property and use the pen tool or combine shapes with union operations instead. Also double-check your export settings aren’t accidentally turning on rasterization. Try clearing Figma’s cache and restarting before you export - that fixes weird rendering issues sometimes. If it’s still broken, open the SVG in a text editor and check if the path data uses cubic bezier commands or just linear segments.
Figma can indeed have trouble with exporting SVGs with perfectly rounded corners as it sometimes converts them into straight segments. To counter this, you could try utilizing vector paths directly instead of relying solely on the corner radius option. Reducing the corner radius a bit can also enhance the smoothness upon export. Another useful step is to select ‘Outline Stroke’ prior to exporting the image. If these approaches don’t resolve the issue, it may be necessary to edit the SVG file directly or consider using alternative vector graphic software.