Just ran into this issue, even with straight-up circles.

Ah, okay, for what it’s worth: in Advanced Stroke, changing the Join from “Miter” to “Round” on mine ended up being a workaround. The resulting outline was still broken, but it was broken within itself in such a way as I was able to do what I needed to.

Hey update from the future. Its still not working 😦

It may not be necessary to use “outline stroke”. Have you tried to resize the vector image by pressing k in Figma? Worked with me 😃

Did the trick for me

Worked for me too, thanks Miquel!

I just tried but my vector was already using a round join, and it still does not work for acute angles, just break the outline and create inner straight lines instead.

The round join workaround works fine with circles though!

Seems this is the way (I just had to go from 72 width to 500 though)

Thanks a lot, works for me as well! Btw, I think this issue is not necessarily related to the bug about broken export output, that many people mention in this thread

it’s a nice trick if you make a closed design in Figma and export it as is, but it’s not a real solution. if we need to make an icon to work in a web environment that would scale proportionally, this trick won’t work. some of us prepare the SVG in Figma (instead of opening illustrator) and we want our icon/logo sizes would be “baked” in, there is a reason outline stroke exist…

It’s been over 3 years and yet it’s still the same bug… 😕

I solved the issue!

Description: We use streamline Illustrations and had the same issue. Outline stroke created some really weird results. Therefore I went down the rabbit hole and found a script that is called oslllo-svg-fixer. My approach works for Macs.

Solution: I exported all SVGs that only had strokes from Figma to a folder on my desktop. Let’s call it “SVGSTOFIX”. I then used co-pilot to write a script in python that takes all my SVGs from SVGSTOFIX, replaced all blanks with underlines in the filename and then uses “oslllo-svg-fixer” to create SVGs that have no strokes anymore but fills.

Preparation: Make sure that your SVGs contain only one stroke. You do that, by selecting an SVG, remove all groups inside the SVG, select all strokes inside the SVG and then hit Option+E to simplify the stroke.

Then:

1. Create a folder on your desktop, named SVGSTOFIX


2. Create a folder on your desktop, named FIXED


3. Install homebrew by opening Terminal and type: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"


4. Install python using the following terminal command: brew install python


5. Install TQDM using the command: pip3 install tqdm


6. Install Node using terminal: brew install node


7. Install oslllo-svg-fixer: npm install -g oslllo-svg-fixer


8. Download the python script attached Python Script to convert SVGs from stroke to fill. and save it to your desktop


9. Open the file and edit the source and destination folder, so your folders will be found. If you’re not sure how to find the path to your folder, simply drag your folder into the terminal and it will show you the exact paths to use. The part to edit looks like this: source_folder = '/Path/to/Desktop/SVGTOFIX' destination_folder = '/Path/to/Desktop/FIXED/'


10. make sure, that everyone has read and write rights on the folders. To do so, right click on the the folder and edit access rights. Everyone: read and write.


11. Final step: in terminal write python3 and then drag the fixIcons.py file into your terminal. It should look like this: python3 /Users/xy/Desktop/python.py


12. Hit enter and watch the magic work.


13. When it’s done, drag the created SVGs from the folder “FIXED” into Figma. Adjust the fill of the SVGs to your preferred color and from there you do whatever you want. Create components or simliar.

I know this seems rather complicated. Therefore I’m thinking about providing this as an online solution. Leave a comment if you want me to do so.

Hi guys, I just discovered a way to fix this issue. I’ve found that every point without a handle or missing a part of a handle will trigger the bug. You just need to hold Ctrl and create the handle for it, then you’re good to go.

That would be a lot of handle creation with our Illustration set of 5000 Illustrations 😉

Hello, this bug still exists

Honesty. Just when you think you’ve cracked this, Figma does this to basic vector shapes.

I’ve spent quite a while figuring out Figma auto-layout, variables, and components to help me get up to speed on what ‘everyone else uses’ for building design systems.

And I’ve got to say I’m disappointed.

It is way faster to mock up visuals in Illustrator and go straight to Webflow. And you get a website at the end of it.

If this tool produced usable production code, then that would be great.

Otherwise, it feels like yet another time-sink for designers to maintain.

Don’t get me wrong; it’s ideal for designing larger systems with dev teams. And prototyping products collaboratively with clients.

But if you have to switch to other apps to export graphics, this needs to be fixed.

It’s a closed vector path with six points in it. What are you supposed to do?

I’m using streamline icons and this is still relevant to fix. I’m going to use Illustrator to outline and then export my SVGs back into Figma… I’ve always been skeptical on how Figma handles vector paths in general all these years.

How has it been over 3 years and this has no fix? This only started happening recently, and I don’t know why. No, I’m not copying, or transferring vectors from platform to platform. I can create a THREE-point vector and pull the middle handle, and it’ll break. All within Figma, no extra plugins/modifications.

still broken. Figma is this just unfixable? how can it be buried that deep in their backlog to be kicking around 3 years later?

Outline stroke is inconsistent. Sometimes relatively simple paths, especially boolean paths, cause ‘webbing’ to form across various points created by the outliner. Other times, no visible geometry is returned at all. It’s also possible to have any one of these results in the editor but a different one as output from SVG export.

Example file with an invisible, malformed path:

I’ll try to add more examples to this file.

Please fix this! I understand that y’all have to prioritize what you work on, but fixing major issues for basic functions BEFORE pushing out new features might be something to consider, especially when the community is yelling at you about it…

if I am not mistaken it is fixed

Thank you! Works perfect! 💖

you’re a life-saver! thank you!

I’ll be happy if I see this issue gets fixed before I complete my lifetime 😦

Can’t post, but, just use ionicons plugin and add a border to question mark icon