Exporting Mask Groups in SVGs from Figma

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.

Contact

Call Jon Hicks on +44 (0)7917 391536
Email
Tweet @hicksdesign

Hicks Design
Elmfield House
New Yatt Road
Witney, OX28 1PB
United Kingdom