Update April 2023: Figma now supports vector masks!
I recently solved an issue I'd been having with how Figma exports SVG artwork. I use a lot of mask groups, but viewing the exported SVG file in anything other than a browser often shows the group as transparent rather than opaque.
The key thing is: Figma doesn't use <clipPath>
to mask objects, it uses <mask>
. Both are legitimate ways of masking in SVG files, but work slightly differently. With clipPath
, an object is either masked or it's not (in or out), whereas mask
allows for partial transparency based on colour. For example, a gradient can be used to mask with a 'fade'. A black mask means the artwork is completely hidden, white is visible and any colour inbetween is treated as a greyscale/opacity. You can read more in depth on the difference in the post on CSS Tricks.
So to fix the problem, just make sure your masking path is set to 100% white and you'll be fine!
In the simple example above there are two circles, one orange, one blue. In the centre, the orange circle has been duplicated to quickly make a mask group for the blue circle. The orange is treated as an opacity mask, so the blue circle has transparency and becomes green. On the right, the mask circle has a 100% white fill, so is properly masked.
In a similar vein, Rogie is developing a plugin to solve the 'other direction'. It allows for importing Ai and PDF into Figma and converts clipPath
into masks.