Mask layers and groups

Group the marketing hero image into a masked composition so the tablet screenshot sits only inside the hand illustration. Apply the mask to the group named Hero-Screenshot, preserve the internal layout so the image can be swapped in production, and confirm the mask clips cleanly at 2x export for the PNG set.

Before I share the hero with the product marketer, prepare the masked frame so they can swap art without breaking layout: expose the screenshot layer at the top of the group, name it Screenshot-Replace, lock the mask path and annotate any scaling constraints. Highlight areas where the mask leaks at small widths and suggest an alternate crop for mobile.

I applied the hand illustration as a mask for the tablet screenshot and on the mobile frame the masked image shows white gaps at the edge. The stakeholders are Emma in marketing and Raj the frontend lead. I’m unsure if the problem is the mask path not scaling, an image alignment issue, or a retina export mismatch. What’s the most likely diagnosis and the single next action to fix it across breakpoints?

We repeatedly hand over masked hero art that breaks when marketing swaps JPEGs — masks shift, exposures crop wrong, and engineers rebuild the masks. I am the product designer and it costs us time and trust. What one change in how we structure masked groups and what export check would prevent this pattern going forward?