Skip to main content
Solved

Nested instances with hover states not working

_

Hi there

Having a problem I can’t solve. Searched online but cant see an answer that helps. I may be lacking basic knowledge…

The problem: a parent component has a hover state. Upon hover, I would like an instance of another component within the parent component to change.
The instance contains text. So when the parent component is in it default state, the instance placed within it says one thing.
Upon hovering on the parent component, the instance within it moves position and its color and text changes.

Everything works as expected except for the text change.

Tried making separate components for the instance (one for the parent default and one for the parent hover) but smart animate doesn’t work then.

Can publish a link if it will help.

Thanks

It won't work

Best answer by tank666

What you want to do can be achieved in several ways:

  1. Use separate components for your badges.
    Insert both badges in each card variant and control the visibility of these badges based on the state of the card.
  2. Use variants of the same component.
    If your badge component has several variants, then you need to add another text layer to each variant and control the visibility of the text layer, depending on the badge variant.
View original
This topic has been closed for comments

4 replies

_
  • _snooz
  • Author
  • 4 replies
  • March 13, 2023

Link to file here: https://www.figma.com/file/sRXr9vNUh5ymgVJmmscRzG/It-won’t-work?node-id=0%3A1&t=3ZjWNzAms8WIYZgq-1

tank666
  • tank666
  • 4863 replies
  • Answer
  • March 13, 2023

What you want to do can be achieved in several ways:

  1. Use separate components for your badges.
    Insert both badges in each card variant and control the visibility of these badges based on the state of the card.
  2. Use variants of the same component.
    If your badge component has several variants, then you need to add another text layer to each variant and control the visibility of the text layer, depending on the badge variant.
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
_
  • _snooz
  • Author
  • 4 replies
  • March 14, 2023

I tried it a different way and it works…
Have all badges as variants in one component only.
In the main component where the badges will be seen. Place variants of the badge in the positions needed.
Smart animate will then change between the variants (upon hover in this case).
The text, color and position of the badges are now animating seamlessly.

A
  • Anonymous
  • 0 replies
  • April 13, 2023

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

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