I have a side panel with buttons, and when clicking on one of the categories, the main screen slides to the correct categories. This works great.
The buttons are in variant components with three states (default, hover, and selected).
When I click on the button, I have two interactions set up in the prototype:
‘scroll to’ (to scroll to the section)
‘change to’ : state = selected
My issue is that I want the button to go back to the default state when I click on another one. Is there a way to do that? (for now, they all become selected when I click one after the other).
Thanks for reaching out. Based on what I gather, you may need to use different frames to achieve your desired outcome. I’ve been experimenting further with this playground to see what’s possible: https://www.figma.com/community/file/1033456279024883078
Could you share your file link? I’d like to have a closer look to better understand your needs.
I might have overlooked something, so it would also be interesting to see the community’s feedback.
Thank you for getting back to me.
Here is the figma file
If you look at the modal in preview mode, when you click on the categories on the side, you scroll to the appropriate section, but when you click on another one, the previous one is still in the ‘selected’ mode. So if I click on all the menus, they are all selected, while I would like to have only one selected at a time.
Let me know if there is a setting I haven’t set up correctly or if you have any advice.
Hi, I am in the same situation. I need to create two interactions on the click trigger. One should change the status to active and “scroll to” content. At the same time, only one clicked option must be shown as active.
Hi, I am facing a similar issue. I have created a button component Default and Pressed state. I put this button on page 1 and 2 of my prototype. On page 1, I press on this button and the button change from default to pressed state. On page 2, I want the same button to be in default state, but it is still in pressed state.
Can you share a video or example. I understand the basics about variables. Use them for color and spacing, but not states and prototypes yet. This is what I’ve been searching for.
Echoing this. I really need an example of how to use variables to turn states on and off in variants. Specifically, I am creating a prototype where I have a nav bar with nav items that have a static, hover, and pressed state. When someone navigates away from the section, I want the pressed state to turn off, but I can’t figure out how to do this.
