Skip to main content

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_63


Screenshot_62


Screenshot_61


Screenshot_60


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?

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.


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

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




Interactive Dropdown - Figma



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

Reply


Terms & ConditionsCookie settings