Skip to main content
Solved

How to create interactive component with instance swap icon?

  • September 22, 2022
  • 2 replies
  • 932 views
Adrian22

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!

Best answer by tank666

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.

View original
This topic has been closed for comments

2 replies

tank666
  • tank666
  • 4863 replies
  • Answer
  • September 22, 2022

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.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Adrian22
1 person likes this
  • Adrian22
    Adrian22
Adrian22
  • Adrian22
  • Author
  • 4 replies
  • September 22, 2022

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

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings