How to change the property of different components in prototyping.?

Heres another example of what I want to do:

So basically should the click on a child elemente change the state of the parent element and vice versa.

Is this possible too?

I’ve only found really laborious hacks to do such things. I really think there should be a feature around this.

One possible way for the Figma team to explore is in the IX menu details for a ‘click’ action, where ‘change state’ is not assumed to be change of the element that is selected for this interaction, but a ‘remote’ element somewhere else on that page. This way a click of one object can be tied to a state change of another object.

This would massively enable new IX patterns without ‘Invision’ style hacks all over my prototype to mock separate screen states that have the differences illustrated. Currently I have use the ‘navigate to’ with a separate screen setup with that desired state. While this workaround hack somewhat works, it means many many copies of screens to manage the various states, and it quickly blows up if you have multiple states to manage in your flows.

It is also tied into a limitation that only 1x of each IX can be used. A ‘click’ should be possible to trigger multiple things, imho.

Agreed. This is a painful limitation.

For all the cool ‘tricks’ that Figma offers, being able to affect the parent state/layer property from a child would truly change the game. It would enable accordion/windowshade components (click on header to hide/show content below).

This is such a huge problem for me right now. I have had to make many many duplicates of pages to show how the dependencies of a button being clicked play out. I also agree with having more than one event being mappable to an action. This would reduce my workload by a solid 40% if I could just set some really basic dependencies.

Following the discussion here, This feature is a must-have.
being able to change 1 component’s properties from a different component is a basic thing, we need to be able to change the global state or something like that to achieve this.

• 1 for this feature. Even now with the new additions from the latest keynote this is still not possible. variables don’t affect component properties.

I hear you, I ran into this issue too, it’s definitely a pain point. The only way to get around this at the moment is to use a global variable.

Any element on the canvas can change the value of a global variable, and this variable in turn can be used to control the state of any other element (no parent-child connection is necessary between the elements). I’m not sure if I can explain it very well, but here’s a good demo from Figma on how you can achieve this: Figma tutorial: Prototype with variables - YouTube .

Consider how the global “hasCart” variable is used in the demo to connect the “Add to cart” and the “Basket” buttons to each other, even though they are completely unrelated components. In the same way, you could set an interaction on your dropdown component (_Struktur-Mehr An…) to set a global variable, and link the value of that variable to the visibility of the variants in your form component (Kundeneingabe-Felder-Layout-Variaten).

Hope this helps you! 🙂

This is 100% possible. As Andreea said above, you can use a boolean global variable to toggle visibility of other elements. BUT you can also use a string global variable to set the component properties of another variable.

In short, use a global variable with a boolean value to manage visibility and use a global variable with a string value to set component properties.

Toggling visibility:

1. Create a new boolean variable named notificationVisible and set it’s default value to false
2. For a button component, create an on-click interaction that sets the notificationVisible variable true.
3. Set the visibility of the notification component to mirror the value of the notificationVisible boolean variable

Using the interaction of one component to set the component properties of another:

1. Create a button to act as our controller.
2. Create a component with 2 variants, in this example the component we want to control is called status and has a property called color and two variants, red and green.
3. Create a global string variable called status and set it to our default component property value (“green”)
4. On button click, set the status variable to a string value of “red”
5. In the instance of the component value where you can select properties to switch to different variants, set that property to be driven be the string value stored in the status variable.

So long as the string stored in the variable is the same name (case sensitive) as a real value from the component property, things will work and you will be able to use the interactions of one component to drive the state of another component.

This was really helpful. Thanks!

Thank you so much! I had actually set something like this up but I was worried I was wasting my time and I could not find any good information on it. This was extremely helpful for me. Thanks again!

Thanks for this. I am working on this at the moment, following your guide but unfortunately it is not working.

Hi, I don’t know if it’s because I have a different version of Figma as you @IanCox but I have created my component with 2 variants (View and Edit), a global variable Status set to View and I have a button with on-click interaction to set the variable Status to Edit. But impossible to set the property in my component to be driven by the string Status. In my component property I can only create Variant, Boolean, Instance swap and Text, and none of them have the option to be driven by another value (variable in this case). Could you tell me if I missed a step. Thanks.

It’s really stupid, the property is declared and you can’t use it, it will be very very very useful, it would reduce a lot of screens,

I am trying to make a tab component, I have created a symbol with all the properties I need, which are the different sections of the tabs content

1 I don’t want to repeat buttons in each tab.
2 I think it would be common sense when touching a button external to the symbol to change the property of the symbol.

The truth is I don’t really understand why it doesn’t work like that, please god of the Figma, I have a delivery on Friday, fix it

I was stumped on how to toggle visibility – setting visibility to mirror the value of the boolean variable 🫵 👍

Thank you Ian. I was able to reproduce your tutorial. Super helpful.

I was curious if this can be extended assuming if buttons will have various states that require click interactions.

We have been struggling greatly to figure out how to change the state of a component if another object in the frame is selected. They are all select/unselect component objects that change state when selected.
In a nutshell, We have a “select all” component that we need to change the state of if one of the other options is unselected. We can change the object being selected, but the “select all” option we are trying to change the state of…well we cannot see anyway to perform that action.
anyone else able to pull this off? We are newish to this product, so we may be missing something, I am just unable to find anything other than lots of requests for this function since 2021.
Thanks.

This is pretty stupid, Figma is a design tool, why make some totally usual / common sense features so complicated to use? I’m not trying to turn into a developer, really. I don’t wanna learn Figma every time they decide a new update is needed, it should be easy and intuitive. Many times it isn’t. Great tool, but with shitty UX sometimes.

Either they’re drinking or I’m drinking, just tried it with a fresh start, and it works. WTF? The buttons are not even variants of the parent component. Why, Figma, WHY?

Ok, I understand the problem. The problem is when the parent component has its own variants. That’s when shit hits the fan. That’s when CHANGE TO of the button doesn’t show the button states, btu the parent component states. Again, WHY, FIGMA, WHY???

Just a recap:

1. I have a parent component, which among other elements, contains an instance of a button, which has two states: normal and hover. If I want the button to CHANGE TO the hover state WHILE HOVERING, everything works.
   UNTIL
2. The parent component has variants of its own. Now, if I want the button to change its state to HOVER, I can’t, beacuse when I apply the WHILE HOVERING interaction and I select CHANGE TO, instead of seeing the button variants (normal and hover), I acrually see the parent component’s variants.

Who in the world though this would make sense?

Yep. I’m very confused why this doesn’t exist… Really want to set property to variable on click