Skip to main content
Question

Animation with variants does not work

  • January 2, 2023
  • 3 replies
  • 1585 views

Leo_uxui

Good afternoon.
I have created variants for the information icon. When you click on it, the icon should change to gray. Also when clicking on the icon, the information window should open.
When I click, only the animation with the information window opening works, but the icon itself does not change when I click on the second option. What to do?





Screenshot_65
Screenshot_64

How else can I make it so that when you click on the icon, the info window would open and the color of the icon would change, but when you close the info window, the icon would return to its original appearance?

3 replies

Osama_Turki
  • Active Member
  • 42 replies
  • January 3, 2023

Figma prototype does not support relations in the prototype, by relations I mean logical argument or when interacting with a component to affect another.

Although you might see this done a lot, it’s actually happening due to frames changing and smart animate.

In your case there would be no frame changing so it would impossible to do, but there is way to achieve such effect but comes with a compromise.

You might embed the info popup within the component states one where the popup is open with the gray background of the info icon and one where the popup is hidden without background of the info icon. By doing this you won’t be able to position the popup in relation to main parent frame (a.k.a. the page) and you won’t be able to close the popup when clicking outside, which you seam not using anyway.


Leo_uxui
  • Author
  • 19 replies
  • January 3, 2023

Thank you for your response! Do you happen to have a link to a good tutorial on this topic?


Osama_Turki
  • Active Member
  • 42 replies
  • January 3, 2023

I have not fount a tutorial specifically for the case you want, but I found you this.

It is a more complex use case, but hey, there’s no harm in knowing more than you need.


Reply


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