Skip to main content
Remi_Fayolle
March 8, 2021

Interaction between components

  • March 8, 2021
  • 46 replies
  • 16688 views

Hello

I would love that one component interaction can impact another component

Example : i’m working for a video communication tool. I would like that when i mute microphone, it changes variant of the stream to indicate that microphone is muted

I have two components : Stream and ToggleMicrophone. If i have microphone in state muted i would like that stream has muted indicator state

46 replies

Gualter_Amaro
June 27, 2022

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.

Michael_M_Alene
July 14, 2022

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.

Screenshot 2022-07-14 at 22.32.21

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.

Pavel_Martynov
August 1, 2022

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.

Ishmael_Jilani
September 17, 2022

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.

October 17, 2022

What you guys need is… Axure!

Dzen_Technology
November 7, 2022

LOL
What about ADOBE XD ?

November 7, 2022

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

Ranjithkumar
November 14, 2022

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 🙏🏽

David_VIARD
New Member
November 17, 2022

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! 😍

IraX
Power Member
November 27, 2022

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.