How to create interactive component with instance swap icon?

Ask the community
1

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: https://www.figma.com/file/ZuT92N4vVhZeYcYZUpes0g/Instance-Swap-Prototype-Example?node-id=0%3A1

Thanks for your help!

2

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
3

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