Sign in to join this conversation, and others like it, in the communities you care about.
Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!
Figma / Feature Requests
An option to keep strokes in SVG exports would be great, so we can play with thickness or use vector-effect="non-scaling-stroke". I often design icons for web sites or apps, and have to draw/export them in Sketch (the horror). This is basically the only reason I still use Sketch. By the way, Sketch has a nice feature to keep strokes even if their position is "inside" or "outside".
Improved SVG support would be great. I am running into some wonky stuff right now. Like the background of the underlying frame being added to the SVG instead of a transparent background, and also shapes which are strokes being exported as solid fills. Having to do clean up in Illustrator right now :(
Really need better svg exporting.
just adding another avatar to the requests for SVG exporting :) - I've got no details to add beyond what's already been written, but if the engineer who's passionate about the subject needs moral support and users in their corner, here's some of that :)
Hi-hi! How could participate the beta test?
Still super happy with the SVG improvements! Any idea when these improvements will roll out to all users?
Yes, I definitely agree SVG needs to be cleaned up more. When I go into the file, the SVG has too many transforms, groups, etc.
Would love to participate in the beta test here!
Does it clean up transforms in favor of flattened paths?
The new Figma SVG export that Sho recruited some beta testers for is a HUGE improvement over the current SVG export. If you look at the image above that I posted, you can see the difference. Hopefully it makes it way into a future release once their testing concludes. The resulting files are much cleaner (and smaller).
Nice 😀 thanks
Hey guys. Can anyone see my other thread problem here if this is about the messy code export of Figma or is it just about my incompetency on exporting SVGs?
Also any specific date or roadmap when this beta svg export improvements will be shipped?
So I heard that AI and Sketch exports strokes that either outside or inside as expanded appearance on in figma's feature lingo, Outline Stroke. Bc apparently the SVG still doesn't support stroke alignment yet and the OG board members already raised kids and send them to colleges, the new SVG committee can't agree yet on SVG 2.0 update yet to fix these kinds of things
While Figma does not, that's why my export problem is so weird
I suggest to @skuwamoto to make the newer SVG algorithm implementation to just Outline Stroke the strokes with either inside or outside alignment when they are exported. So they're as is
If y'all want an non destructive SVg export that you still can edit, just use middle or center stroke alignment
Yea bc I've heard this is still what SVG 1.1 (which is still what we are right now, there's still no 2.0 to include this feature, it's ridiculous) supports right now. So other design tools either just convert that stroke to middle stroke (for non destructive still editable shapes) or just outline stroke to show as is
Will Figma users be notified of this update when it is ready?
Hmm. My messages are gone here.
How do I get into the beta of this? would be super helpful
svgo implementation would be realy nice
Adding my penny to this thread, I'm currently in the process of migrating our icons sprite workflow from Illustrator + manual export (with assets export) + Git versionning to Figma + Figma platform + CI (à la Github's octicons).
The main and blocking drawback is the format of the exported SVG. You can compare the outputted code here (formatted for readability) https://gist.github.com/Alexfrits/ea1aa3b83676e22863a95da8e1561c0c .
Illustrator outputs a cleaner code, more readable, and easier to optimize through SVGO.
When I work with SVG sprites, I want a code that's easy to manipulate and style with CSS.
+1. Excited for the improved export. I typically export out of Illustrator and do a little hand-tweaking to SVGs, but it would be awesome to keep things in Figma.
Hey! We launched our improved SVG exporter: https://figmareleases.blogspot.com/2018/05/whats-new.html
We're still planning to make a few more tweaks (like disabling
id attributes by default, you can do this manually under the ... button next to the SVG export item). Let us know how it works!