Skip to main content

Hey guys,

I don’t use masking too often, but everytime I use, I am baffled about the lousy UX :)) I mean it’s like nobody gave a flying !@#$ about it :))

  1. The mask has to be underneath the masked object. Totally opposite to any form of logic, especially since the mask is alwas smaller than the masked object, so selecting those two has to be done by clicking/dragging over the area to make sure both are selected. That can be a pain in the butt if you have many elements on the frame, and then you have to rely solely on finding the elements in the assets panel. Good lunk with that :))
  2. If you mask an object, you have to probably group it afterwards? Otherwise, if you wanna move it, you’re just moving the masked object behind the mask, while the mask stays in place. Makes perfect sense????!!!!
  3. If you wanna edit the mask you have to find it in the assets panel, no click/hover will help you in that situation.

I can probably come up with more, but overall it’s such a crappy experience, in total opposition with common sense :)

I had this thought in the past, and I also always miss the right placement for masking, usually needs at least 2 tries lol

I imagine that the process of masking elements that diverge because Figma needs to generate a lot of SVG/CSS, and to make the mask work in a web-based/vectorial application like Figma, it might require having this counter-intuitive way of adding the masks -- because the code architecture needs to do so.

Not sure they are related, what happens in the UX doesn’t really have anythjing to do with how the SVG is created. The output can be anything, it doesn’t really matter how it’s created inside figma. I think they simply overlooked this.

Terms & ConditionsCookie settingsAccessibility statement