How to create interactive component with instance swap icon?

Hello! I am a new convert from Adobe XD to Figma, and I’ve run into a couple things that I think should be possible but I have not been able to achieve them.

My app will have several little buttons that have the following parts:

  • Background color
  • Icon
  • Text

Upon tapping each button, the following should happen (within the button):

  • Background color changes to OFF state
  • Icon changes to OFF
  • Icon color changes to OFF

My goal is to create a component where the icon can be instance swapped, and that swap is reflected when the component is interacted with.

I’ve created a link here that illustrates my problem:

Thanks for your help!

Create a new instance swap property for the icon in the “State=Off” variant of the “Card / Scene” component. Let’s give it a name, for example, “Icon Hover”. Then select the instance of the “Card” component in the “Example” frame, change the “State” property, swap the icon, and change the state again.

1 Like

Wow, thank you so much! Totally worked :slight_smile: Appreciate the help!