Skip to main content
Question

Is it possible to change a component state after clicking on another component?


Anais_Moisy

Hi,

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).

Thank you in advance,
Anaïs

20 replies

y_toku
Figmate
  • Community Support
  • 2397 replies
  • January 26, 2024

Hi there,

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.

Thanks,
Toku


Anais_Moisy

Hi y_toku

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.

Many thanks,
Anaïs


y_toku
Figmate
  • Community Support
  • 2397 replies
  • January 30, 2024

Hey @Anais_Moisy thanks for sharing! Could we get a view access for the file please?


Anais_Moisy

Sorry @y_toku . I just did. You should have access now.


Viktors
  • 8 replies
  • March 10, 2024

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.


Shaul_Vainblat

You can use variables to achieve a component state change, it’s great for use cases when the click changes a different component state.

Create variables for all your states and one variable to apply the states, this variable will be applied on instance component state dropdown.


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.

What can I do please?


y_toku
Figmate
  • Community Support
  • 2397 replies
  • July 9, 2024

Have you tried resetting the component state? You can find more information here:

Figma Learn - Help Center

If that doesn’t work, could you provide a bit more detail on what you’re trying to achieve?

Thanks,
Toku


Lamb_Robert_Westlake

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.


Tamara_Did_Design

I made a quick prototype here. I tried to explain my thinking process the best I could. Let me know if you have any questions!
CleanShot 2024-08-21 at 16.22.45


Thank you so much! This is so helpful!


dima16
  • 2 replies
  • December 2, 2024

This is great! I reproduced this pattern in my sidebar navigation and after selecting one item it deselects other items (desired behavior), however it also changes the selected item’s label text to its default (undesired behavior).

How did you achieve the behavior when you select “Button 2” it stays “Button 2” and doesn’t change to “Hover”?


Tamara_Did_Design

Hi @dima16,

It looks like I added text property to my buttons and stored labels for my buttons in those properties.



Claudio_Rotunno

Ok, this is a huge pain in the ass. Lets be honest: a “on click” “show / hide” interaction (just like UX Pin have) would solve this really quick and easy, however, Figma doesn’t seem to care about this request from the community. Thank you so much!


dima16
  • 2 replies
  • December 3, 2024

Yeah I stored the labels in the text property as well but it still returned to the default. Perhaps I did something wrong at another level since I’m using this principle on a rather complex sidebar component or maybe it’s just a bug that doesn’t seem to resolve.

In any case, the workaround I used is I created variants for each of the list items in the sidebar with their own hover and selected states.


Tamara_Did_Design

Yeah, those overrides can be quite pesky to work with… it’s hard to diagnose without seeing exactly what’s going on in your specific component. Would you be able to share it, perhaps? Maybe in a DM?

You may want to try and clear and recreate overrides…especially if you are working with a complex nested component. Sometimes tracing it back helps to find where the culprit is


Mr. Smith
  • New Member
  • 1 reply
  • March 6, 2025

Hi ​@Tamara_Did_Design 

Thanks a lot for sharing the knowledge. Love it.

I have a question. When I make the three buttons in to one component and play the frame they are in, it works just fine. But …. if I duplicate the frame the buttons changes to ‘Default’ when I click them.

It seems like the Original Component works as intended where ever it is placed, but an instance of the components kind of ‘resets’ when clicked.

Have you got an idea what could be causing this? A created a file trying to show what I mean.

LINK TO MY TEST FILE

Thanks in advance :-)

 

 


Tamara_Did_Design

@Mr. Smith , 

I can’t see your setup in viewer/dev mode. I requested access (the email will look similar to my user name here)… but I was actually able to recreate in my own file. 

It looks like the culprit is that you’ve created a component wrapped around the original components. I suspect that it’s a bug where Figma doesn’t retain the Text override for nested components. Overrides are very tricky and finicky in my experience. I haven’t been able to crack it and understand fully how they work 😅 

Maybe it’s worth submitting a bug report? 

One workaround that seems to be working is assigning Text variable to labels on the original component level and creating different modes for different labels… but that seems clunky. I’ll send you a link in a DM.

I’ll keep thinking about it. 


Sinzandie
  • New Member
  • 1 reply
  • April 29, 2025
Tamara_Did_Design wrote:

Hi @dima16,

It looks like I added text property to my buttons and stored labels for my buttons in those properties.

 

 

 

I am trying to achieve this as well but for some reason i don’t see the text property in my instance??


 

Does anyone know how i get to see the text property?


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