Fix Outline Stroke

I have the same issue for a while now, over a year I’d say. Sometimes cleaning up some paths helps but nothing really obvious. I tried reducing it from 3px to 1px line and it worked but when I added a stroke to that 1px and tried to expand the lines, same thing happened. No choice but to tediously export as SVG, bring into the all-mighty Illustrator to expand the path, merge and copy and past back into Figma.

Outline stroke > Make sure two new shapes are selected and different colors (see below) > Subtract Selection > Flatten

Make sure stroke is white, and other shape is black.

Here to say this is still happening for me — very annoying

Occurs with Outside for me

I have the same issue. Especially annoying if you have to convert line icons. @Figma a fix would very be much appreciated.

Sorry, but this happens with icons created in Figma and coming from Figma plugins as well. It’s great to know the team is working on it, I hope they’ll find a way soon because it’s very problematic.

Most other vector apps don’t have such issue, someone proposed a (maybe incorrect) explanation here.

I’m glad that you know about this issue and you’re working on it. However, it’s been there for many years now and it’s sad that it’s still unresolved. I’m wondering why other vector apps don’t suffer from the same issue…

I’m working with some icons now and it happens to literally half of them. Very annoying because I have to use a different software, because Figma would be otherwise perfectly capable of handling these simple edits.

It’s not working me 😦

Hi P. Tham,

Just deleted my old post, it wasn’t working in all scenarios.

Found another better method that did work for me, try this instead:

WORKAROUND

1. In Figma, add the live editable stroke you need around your icon.

2. Use the SCALE TOOL to enlarge your stroked icon – really, really large on your monitor. (I scaled my 18px icon anywhere from 5-10 inches on screen before exporting. If 5" doesn’t work, go back and try it again at 10" or however large you need until it works.) You must use the scale tool when enlarging…to ensure the stroke stays proportional to your originally chosen/needed stroke weight.

3. Export that large-scaled stroked icon to vector PDF. (For some reason, PDF seems to stabilize the vector points better than when exported from Figma as SVG.) Download the PDF to your desktop.

4. Open vector PDF in Adobe Illustrator.

5. Select All, then go to Object > Path > “Outline Stroke” in Adobe Illustrator.

6. Select All again, go to Pathfinder > Under Shape Modes, Choose “Unite”

7. Your outlined stroke should now be united as one with your new clean icon, no more separate stroke. (Yeay!)

8. In Illustrator, save as .SVG to your desktop.

9. Drag that new (still enlarged) SVG back into Figma. Then Scale Tool it back down to the size you needed it. (In my case, back down to 18px.)

Voila – It should behave now in Figma: The united icon scales down + exports cleanly for your developers.

Few Comments / Observations:

Not sure why this is happening, but it seems to especially happen frequently when using strokes smaller than 1 pt., such as .15 or .25 fine stroke lines. Maybe this is why Scaling (again, using the Scale Tool, not merely manually enlarging) helps – because at the larger size, the stroke is enlarged as well – which seems to help it convert to outlines properly.

But definitely export from Figma as vector PDF, then import the PDF into AI. Exporting the scaled large SVG from Figma didn’t seem to do the trick – the points still went wonky upon import into AI. Something about export to PDF seems to retain point integrity upon import to AI.

I spoke to a head of product at Figma about this, they are definitely looking into it. (Appreciate you Team Figma!!) I personally had this happen to me using freshly downloaded .SVG Google Material icons. Which is a very clean, popular library of quality icons – so this odd fragmented “Shattered Glass” or “Warped Points” issue upon outlining strokes should not be happening.

It takes a few steps, but it’s better than having to manually re-draw your icon, because no one has time for that on a deadline. Plus once the “shattered points” occur, it seems there is no way to even manually fix them, you have to start over from scratch.

Thanks and until Figma fixes this bug, hope this workaround can help!