Hey! 👋 I have a path that looks like this in Figma:
But when I export it, I’m given this instead:
Is there any way to export the actual path, instead of a new flattened shape?
Thanks in advanced!!
Solved
How to export SVG Path?
Best answer by tank666
Hi @Fractal_HQ! I did some tinkering and found that if the arrowhead is hand drawn (drawn with a pen), the contour (outline) will be displayed in the SVG path editor.
If an arrowhead is added via Advanced stroke in Figma, then in the above editor it will be a stroke.
If you remove the arrowhead from the Advanced stroke and draw it with a pen, it will still be a stroke in the editor. And if you remove the stroke and add it again, it will be a contour.
Therefore, in order for your path to be a contour, you don’t need to use Advanced stroke on any of the steps.
Let me know if you don’t understand.
For reference- this is the same path exported from Penpot
It seems like the software you are using to open it does this. I just tried exporting a similar path and it exports correctly as stroke, not the outline.
Hey @Gleb! I actually just copied the path from the d="..." field in the .svg file exported by Figma and pasted it into the path field in svg-path-editor. So it was definitely the same path that Figma gave me.
Strange 🤔
Hi @Fractal_HQ! I did some tinkering and found that if the arrowhead is hand drawn (drawn with a pen), the contour (outline) will be displayed in the SVG path editor.
If an arrowhead is added via Advanced stroke in Figma, then in the above editor it will be a stroke.
If you remove the arrowhead from the Advanced stroke and draw it with a pen, it will still be a stroke in the editor. And if you remove the stroke and add it again, it will be a contour.
Therefore, in order for your path to be a contour, you don’t need to use Advanced stroke on any of the steps.
Let me know if you don’t understand.
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
1 person likes this
Ahhh! Great detective work! I must have done the second method. Method 3 is an interesting hack. I’ll probably try to stick to the Pen tool in the future. Thanks for the great breakdown!
I wonder if this is an intended feature, or if it warrants a bug report.
Either way, this is insightful, and the remove stroke - add fill - remove fill - add stroke hack will probably come in handy at some point.
Thank you!!
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.