Skip to main content

I have a component that is designed to:



  1. swap between .png icons

  2. change color of .png icons.

    Changing icons is done with instance swap.

    Color change is done with a mask, where the .png icon acts as a mask and the layer that is masked is a shape that defines the color.

    Icon color is changed with no issues, however when icon is swapped the relation between the mask & masked layer is lost.


Things I have tried with no success:



  • defining all icons as a two layer objects (png mask, and color shape): so that instance swap swaps both layers not just a png

  • nesting png in an additional frame: So that in theory swapping happens before mask is applied - my hope here was that frames within frames sorta describe priority like parenthesis do in mathematical equations.


PS: using vector icons instead of png is unfortunately not an option for me.

I solved it by putting the mask (so png icon in this case) and masked shape (that allows me to choose color) in separate frames and applied mask to these frames. That seams to work.


Thank you!


Reply