Is it possible to change a component when a certain condition is fulfilled?

Ask the community
1

As I’m prototyping, I would like to achieve is the following.

If component 1 is in state A and component 2 is in state B, then component 3 automatically changes to state X. And if component 1 is in state B and component 2 is in state A, then component 3 automatically changes to state Y.

Is that possible?

2

No, this isn’t possible, unless you combine all these components into one element and change its state.

3

Thanks @Gleb. But is there a way of changing that component’s state based on certain interactions? The point is to use in prototypes.

4

Yes, exactly, that’s the whole point.

5

So how would I do? How can I make interacting with a nested component change the state of the larger component it’s a part of?

6

The same way you would change the state of any other regular element: using overlays or the new interactive components beta if you have access to it already.

7

What happens with certain animations that can’t be used overlays, cause I’m using an overlay. For example, I have a dropdown that shows certain tags. I click the open button as an overlay and I swap that overlay to deselect some elements from the list, but I’m still seeing those tags in the dropdown list header. I can’t use an overlay for that. Am I?

1 Like
8

is this possible with the current Figma Config updates > variables ?

1 Like
9

I’m interested by this too, as @Vipin3 asked, is it possible now with the last Figma config update ? I tried with variable but don’t achieve what I wanted.
Basically, I have a side menu and I would like it to open when I click on a button which is not in the component of the side menu.

10
1 Like
11

Hi, I have a list component where per item is a component with 2 states (Selected, Unselected).
Current: When i select the item in the list, the state is correct but when I select the rest of the items, all item state become selected.

Ideal: When i select another item on the list, the previous selected item change state from “Selected” to "Unselected.

how can I create the interaction where if 1 item is selected, the rest of the list change to unselected?

1 Like
12

This is exactly what im trying to do. Did you find a solution?

13

Hey @Jose_Diaz, thank you for reaching out! Could you confirm if you want to create radio buttons to select one single choice?

If this is your request I’ve found the following YouTube tutorial which is explaining how to create these step by step:

If not please give me further information on what you’re trying to achieve. I am happy to help out further!

Thanks,

Gayani