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" />
Best answer by Gleb
This is a known limitation. Use this plugin: https://figma.fun/W17tMs
Figma
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…
HI there Figma! Any updates on this? Building a library of broken illustrations atm… 😦
Any updates? Supporting all SVGs from Illustrator is fundamentally important to us.
Still no fix? Please give a workaround.
Hi, Figma! any updates ?
I soooo need a workaround for this it’s screwing up my workflow
hey there… you have no plan to solve this?
Figma, seriously. A vector based software that won’t export vectors properly.Please solve it ASAP. We spent day trying to find a work around.
Hi, Gleb
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.
This didnt fix it for me 😕
and im importing from AI to Figma
It still didn’t fixed second the plugin above is no more supported.
I have facing the problem of exporting my svg that has mask on it. When i import it in rive it brokes:
Curious, is this a Rive or a Figma issue? Can you send over the file and/or SVG?
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
