While hovering - Change to

Hi guys,
So I have a component which has a few buttons inside of it. In the prototype, I want one of the buttons to change to HOVER in the prototype, so I’m using the While Hovering action. The problem is that in the Change To section, I can’t actually control that button inside the parent component, but the parent component itself, which makes absolutely no sense.

Is there a way to simply control the button inside the parent component?

Thank you kindly,
Chris

Hey Chris!

You’ve stumbled upon a classic Figma riddle: “How do I tame the elusive button within a parent component?” Fear not, for we shall unravel this mystery together.

The Button Dilemma:

  • You’ve got a parent component—a majestic container housing buttons like a protective dragon guarding its treasure.
  • But wait! You want one of those buttons to transform into a hover state during prototyping.

The Solution Scroll:

  1. Variant Magic: First, ensure your buttons are variants within the parent component. Think of them as siblings, sharing the same lineage. :dna:
  2. Hover Enchantment: Now, select the button you wish to enchant. Head to the Prototype tab (yes, the mystical one on the right sidebar). :magic_wand:
  3. Change To Sorcery: Behold the “Change to” action! Click it and choose the hover variant you desire. It’s like whispering a secret spell. :star2:
  4. Trigger Tune-Up: Adjust the trigger (maybe a gentle mouse hover?) and watch your button metamorphose. :butterfly:

The Result:

  • When you view your prototype, that button will dance between its normal and hover states. It’s like a waltz at the design ball. :tophat:

Remember, Chris, you’re not alone in this quest. Many have tread these pixelated paths before you.

  1. Figma Learn: Design an Interactive Button
  2. Figma Community Forum: How to Change the Property of Different Components in Prototyping?
1 Like

Hey @SandeepReddy
Thank you so much for taking the time to write this amazing story. Very captivating to say the least :slight_smile:
Will give it a try tomorrow and let you know.
Thank you so much again :slight_smile:

hey @SandeepReddy
What do you mean the button should be variants of the parent component? I am using the button component I use everywhere, throughout the app, why would I even consider creating a new button for every other component that uses the same button I’m using everywhere? Sometimes I think the Figma UX design team likes to drink on the job…