Interaction between components

This should be possible with interactive components (currently in beta) https://help.figma.com/hc/en-us/articles/360061175334-Create-interactive-components-with-variants

Note: The Change to action can only be used on variants in a component set. It’s not possible to use this action between two separate components or top-level frames.

It would be possible if both components were part of one variant this is not the case.

I want to be able to change state of the stream when i click on the mic toggle button

So to clarify, you want basically what interactive components allow, but with regular components instead of variants, right?

I would like that to be able to change variant state from another component.
If i click on a button i can switch another component variant from A to B.

Not sure if I am clear

That would be really useful. The ideal would be to simply allow interactions between pages, independent of it being a component or not. The only difference is that components propagate their interactions to their instances.

Allowing to change the state of another component, which is essential, would not be enough, the components would need to be implemented in the same file and in the same page, which defeats the purpose of pages in the first place. It is sad that every neat feature Figma has for organize and keep your design system neat is lost when prototyping.

The workaround I am using to simulate non-local interactions, is to implement container components, that combine the change of state in multiple child components. It has some drawbacks that are not obvious at first, but may be enough for what you are trying to achieve right now.

Agreed this would be really useful!

I really need this right now

A perfect example of why this is crucial.

1. I have a modal as an overlay - I use it on dozens of pages.
2. It has a drop down box in a form which opens another overlay (the options of the combobox.)
3. Depending on what they click on, I want to add a bunch of secondary fields.

Currently, there is no way to do this without eliminating the drop down overlay which would ruin the form experience.
Example:

The experience should be on this control:

Change to shouldn’t assume “THIS” component. There should be one extra field which asks “which component”. Specifically, it is going to be the component that opened up the menu. The modal.

I run into this problem 4 times a week.

This would enable much more dynamic prototypes to be built quicker. I struggle with this constantly, especially in building navigation. I have a nav that expands/collapses and since each frame of a prototype is effectively it’s own state of the application, I have to create 2x the number of screens to account for if the user has the nav element expanded or collapsed.

Instead, I want to build a navigation “controller” and a page “viewer” that are separate where the nav can control the view and they have independent states/behaviors.

Agreed, Big need for this feature. Less non local simulations (time and screens consuming), more dynamic prototyping. <3

I am also dealing with this limitation. I thought Figma offered this possibility because it’s…basic for prototyping and time-saving.
I may be wrong but I’m creating a page with a component that has 4 variants, each one is composed of 4 tabs (each one with 3 states) and the 4 correspondent contents. I thought I could control the main component state by assigning a specific action to each tab button… but no, I really have to repeat the same whole page 4 times to simulate this simple interaction.
Control components using other components is crucial, nested or not, on the same page or not.

We need this feature ASAP. Here is another scenario:

I have this form which is asking the user to choose from the checkbox options. Before anything is selected, the “Continue” button is in an inactive state.

I want to turn the state of this button into active when at least one value is selected from the checkboxes.

It is not possible to achieve this with the current limitation we have in Figma. It would be a really helpful feature to have.

Agree, very useful and can help with building powerful design systems. But my idea is to create somekind of global variables table for the design file and allow component variants & properties depend on this variables and to change them. This will also require “combo” interaction when you press the button, then have a delay and then show true/false validation in input and a snackbar appears in the bottom of the screen i.e.

This feature would be great, I imagine it’s pretty difficult to implement - but I believe that with this you can prototype anything you can imagine. Certainly so if there was some register/state store which components can write to and read from for the purpose of rendering/transitions.

In Sketch, you could build a plugin which does this because there are plugins there which run in real time. In Figma, we can’t even build a plugin to do this because Figma plugins don’t run in real time.

Might be a huge feature depending on how Figma works in the backend.

What you guys need is… Axure!

LOL
What about ADOBE XD ?

XD is even worst… it really sucks on prototyping and linking between components!!

This will be a game-changing feature to Figma … something that can instantly bump its already skyrocketing popularity. Prototyping complex interaction would be a breeze with this functionality @Figma_Support please please add it to your list 🙏🏽

This!
What about a sub-component that could influence the parent parameters?

I have an example. I have the choice of using a sub component called bgd-inverter when showed it does a negative of the background of the (parent) component.

Great visually, super great component-wise since I could handle Dark Mode versions with a sub-component switch instead of having Variants… BUT, No way to interact with other components (i.e. switching a logo variant in another component on the page to Dark Mode or Changing the Parent Layer from light to Dark).

That would be amazing! 😍

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.

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.