Flattening Stroked Icons

I’m sure this has been asked before, and probably doesn’t just exist as an issue with the Figma editor.

I have an icon that contains all 2px center-stroked paths, including several small dots. All looks well as a group, but once the group is flattened, the dots become basically hollow circle in appearance, but remain small dots in the vector. Pardon my ignorance, but what is causing this?


2 Likes

I had exactly the same issue!

Do you use Flatten or Outline Stroke?

It seems both can result in unwanted shapes, depending on the vector complexity. I’ve encountered most of the problems when strokes are applied to open Paths.
Only way to fix that was to edit the vectors in another tool like Adobe Illustrator…
Of course Figma should be able to convert such simple paths to shapes, so it is probably a bug.

Do you use Flatten or Outline Stroke?

I actually used Flatten. The primary reason is I want to continue using it throughout the Figma file with the ability to control the stroke still in tact. Flatten does this successfully for most of the icons I am using, but any icons that use small dots to get the effect, like the one you see above, create this same issue. :weary:

Has anyone found a solution for this? Is there a way to preserve strokes but avoid the ‘hollow circle’ effect?

Hey, thanks for flagging it!
This looks odd, I can’t reproduce on my end. Would you mind sharing a quick video recording when you intend to flatten (please include the layer panel) and a copy of the file? If you prefer not to share publicly, please reach out directly to the support team here: https://help.figma.com/hc/en-us/requests/new They can try to replicate and have a deeper look at it. Thank you!