Skip to main content

Hello!


I have a problem (maybe a silly problem ;-)) regarding a variant of a component. The situation is as follows: I want to open an overlay with a press on a button. The Button is a component with three variants “Default”, “Hover” and OnClick. This variants represents the states of the button. I have designed the interaction in the way that while hovering on variant “Default” the component should change to variant “Hover” and while pressing the variant “Hover” it should change to “OnClick”.


image


In most scenarios this works (e.g. navigating to another frame). But when I want to open an overlay, after opening the overlay the component does not change back to “Default” and remains in the state “OnClick”.


What have I overseen? Is there an issue in the component / a missing interaction?


Here is the Figma-File: https://www.figma.com/file/iUECcs8UZimjSHcai7Jbsv/ModalOpenendByButton?type=design&node-id=0%3A1&mode=design&t=rIuvgGfvECTI0ipb-1


Sorry if there is already a similar topic I have overseen.


Thanks and best regards

Hey there, sorry to hear this is happening. We’re having some difficulty trying to imitate and solve the behavior here.


At first glance, it seems that with the overlay open, the button recognizes that it’s still being “pressed” which is why the OnClick button variant remains. But when the overlay is closed, there’s no variant interaction to instruct the button to return to its default state:

Figma Learn - Help Center

Thanks for answering. Is there a better way to design the component (with a hover and onclick effect)?


As a workaround I tried to double the pages. The second page is a copy of the first page. But when pressing the button, I first navigate to second page and then open the overlay in the second frame. And when pressing the button in the second frame, I first navigate to the first frame and than open the overlay. I have tested it, it works quite well (see Figma link above). But with additional work in designing and maybe less performant. Maybe there is a better way?

Hi guys


I have a solution for my problem:




  1. Assigning a text variable to the “State”-Property of the button instance. After this the current value of the property is saved in this variable.




  2. Adding “set variable” with value “Default” (this is the default state/variant of the button) to the OnClick-action of the button.




Now, after clicking on the button, the state of the button changes back and the overlay opens as wished. 🙂


Please see my attached Figma-Link above.

Reply


Terms & ConditionsCookie settings