Regarding bugs please reach out to Figma support team via the support request form.
Submitted it. If there is a helpful response I will upload to this thread.
Is there any solution for this? I’ve noticed that this bug occurs only with center stroke if it helps.
Guys, I think I found a work-around that worked for me.
In my case, I wanted to expand the vector boundaries by 1px. What I found is that when I set it to 0.5px (used the “outside” option) the bug didn’t occur. Then I Outlined > flattened and applied the same process to the new vector. It worked again!
The result was that at the end I had a 1px path-expanded vector.
Hope this helps.
Nov 2021 and this still hasn’t been fixed! It’s something I have to deal with on an almost daily basis. Exporting to Sketch or Illustrator is not a real fix! C’mon Figma get your act together.
I have this problem all the time and have to use Illustrator. Is there a fix coming?
hello, what is happening here? I cannot believe this is still not fixed… 😦
I contacted figma support about this, and the operator answered that this is a difficult issue to fix. I guess that the devs must rework the vector network from the scratch.
I to have found a work-around. If this happens, you should export the icon as a svg and re-import is in Figma.
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.
Hey All,
This is a long standing bug that our engineers have been continuously logging and trying to fix. This generally only happens on icons imported from other apps, where the mirroring on the points is reversed or missing.
Right now, the best workaround is to rebuild affected icons from scratch. Please note that redrawing with fewer points can also help.
While we can’t guarantee an ETA on a fix/improvements, please know that our team follows this thread and takes everything you provide into consideration.
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.
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
In Figma, add the live editable stroke you need around your icon.
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.
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.
Open vector PDF in Adobe Illustrator.
Select All, then go to Object > Path > “Outline Stroke” in Adobe Illustrator.
Select All again, go to Pathfinder > Under Shape Modes, Choose “Unite”
Your outlined stroke should now be united as one with your new clean icon, no more separate stroke. (Yeay!)
In Illustrator, save as .SVG to your desktop.
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!
I also just posted a thread with some actions that may help resolve this issue sometimes:
twitter.com
Another year - same bug. Icon added from iconify plugin
My workaround was to export the icon as SVG and use Inkscape app to do the trick.
While Figma failed to convert my github icon, the conversion was pretty straight forward with Inkscape
Countless times Inkscape or GIMP (both open source) saved my skin where Illustrator, Sketch, Photoshop or Figma failed to perform a specific task. Most of the designers tend to ignore or be unaware of these projects so I thought sharing this info might be helpful.
Having said that, while the I understand that there are great technical challenges to solve this bug (after all, I’m a software engineer as well), I find it a bit disrespectful that this issue has been marked as solved, @dvaliao (no offence intended). The UX is clearly awful and suggesting to redo the work manually as the “solution” is not right, especially for paying customers. You said it: “This is a long standing bug”, so if it’s still a bug, it’s clearly not solved so this topic should remain open. But that is only my opinion @dvaliao and I understand that there are other priorities in the backlog and pressure to not keep a 2+ years old bug wide open in the community.
We hear you, @Gledsley_Muller.
My response is only marked as solved so the community can easily find the latest update from the team. Thank you for sharing your workaround!
2023 and still outline stroke doesn’t work. Just posting in the hopes that someone at Figma will pay attention.