Interaction between components

The way OP breaks it down here says it all. Trying to do this right now.

I also love the idea of introducing variables and logic into prototyping which is a different conversation and has its own threads, but would achieve this.

We still need this. It’s something I need on every single prototype I build.

3 Likes

This way of creating cross-interactions would be beneficial indeed. For example, I have an overall popup with multiple states that I would love to be able to control with another external to the overlay component.

My current prototypes are very clunky and span tons of pages. I basically use “On click” and “Navigate to” exclusively to fake reactive updates to the a page.

I’d like to create a basic component prototype without having to jump across dozens of pages to feel how it’s working. Is there no way to make a complex self contained prototype? I’m finding it hard to do without creating a complex variant chain which just seems like a waste of time. Really need something like “if component A is clicked, change to “state=selected” on component B.”

Sorry, I meant “span tons of *frames” I have about 20 frames, each with slight UI changes to mimic the UI updating when a button is clicked, or tab is selected.

Another point I’d like to make while I’m here is that the current prototyping workflow isn’t very fluent when it comes to design and testing. Currently, I have to structure components and variants in a way that isn’t applicable to the structure of the final application and makes iteration very complicated and time consuming.

During my process, I have to make very complicated nested components, so I don’t have to manually update every frame with a change. This requires me to bounce around a ton, instead of working within the context of the design.

I am looking for the same thing mentioned above where interacting with one component changes the variant of that component and also the variant of another component as well.

It’s my first day of using Figma and I have found my way to this thread… Disappointing

1 Like

Still very much needed feature!

1 Like

This is definitely the first thing I think when comparing in my head Figma to Axure. This feature would change a lot in my daily workflow, where I am forced to duplicate screens to be able to simulate this effect. Would :heart: love to have this thing in Figma :pray:

And on that occasion thank you Figma designers and devs for great, amazing, and stunning work!

I got very excited when I saw this thread started way back in March 2021, and very sad when I saw the last ask for this was 9 days ago :frowning:

Not sure if it’s helpful, but I’d certainly like to add my +1 for this functionality.

1 Like

Also adding my +1! I don’t want to have to fake the interaction by making a whole new canvas :face_with_peeking_eye:

It would be very helpful if Figma release such feature :pray:

Agreed. I’m running into the same issue mentioned previously where I need a combobox menu selection to add or remove fields from a form. Being able to change the state of another component would really help simulate more complex interactions like that.

Here I was hoping this type of interaction was possible without making a whole new page. I’m new to Figma, but adding my voice here to say this feature would be a huge time saver.

Voting this feature up as it is a ginormous must-have! Let’s get it in the air ASAP Figma! :nerd_face:

It can be replicated by adding more frames/canvas, but darn… that is such a workaround!

+1 for this, sometimes we need to protype interactions in which multiple parts of the UI have to be coordinated and it doesn’t make sense to have everything as a component variant

2 Likes

This became possible from June 21, 2023. I also answered you here: Change variant of a component from a different component - #2 by tank666.

Please check out the following resources:

The container components is great in some situation, however, when the first component set control a video play, that triggered by a play icon, and the video rectangle also hold a role of these variants. The other component set is the animation of timeline, which process after the play icon is clicked. I have no idea when they are in different components,

Fortunately we have variables now, and the patter I suggested is no longer needed.

That you actually can do right now.
You can create a boolean variable (true/false) and connect that buttons visability to that variable. Then you add a click event to the checkboxes that change the value of that same variable.