When importing the svg document at the bottom of the page(taken from <mask> - SVG: Scalable Vector Graphics | MDN), the resulting figma document does not preserve the masked elements.
imported into figma
rendered in webpage
Is there something I can do to get around this? Maybe a different method of importing the masks?
<!-- Everything under a black pixel will be invisible -->
<path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black" />
Still no solution for this? We use a lot of illustrations built in illustrator with transparency masked layers and this is becoming an issue, since all masked layers are unmasked when placed in Figma… pretty uncool, Figma…
This fix illustrator to Figma imports.
The problem here is Figma export engine/coding of SVGs, no matter how good imported SVGs are, once in Figma and exported from it, they break.
Tried to export the same SVGs from sketch of AI, no problem. It’s Figma way of exporting.
It also does the same if we use Zeplin, as we tried that to, once exported to Zeplin if the SVGs are downloaded from there, they’re broken. Same ones exported to Zeplin from sketch are fine.
It’s Figma export. Unfortunately.
The team works at one of the major creative agency and will have to use another tool for our handover to developers, once it comes to these illustrations.
We tried all sort of solutions, also following other threads here with fixes the community suggested; removed strokes, masks, flatten shapes, remove bleeding, making them pixel perfect (all of which water time), with no luck.
Ah, you are talking about export. This thread is about import. Feel free to send a bug report to Figma about export with specific examples and what exactly is broken because from your message I can only see that something is broken but not the slightest idea as to what. Here is the bug report form.