Figma Support Forum

Add conditions to interactive components

There are a couple of prototyping tools offering conditions in their prototyping process, such as UXPin, Protopie, etc.
This condition feature is just dope. I’m a big Figma fan though lover, so I’d imagine if Figma adds this condition feature, the whole prototyping would just blow. It would be a super feature.

Thank you guys at @Figma

19 Likes

Niko from Figma here.

Thanks a lot for the feedback Navid! Do you have a concrete use case that you could share with us? It’s definitely something we’re thinking about!

Well I believe this condition stuff is necessary for the pages with forms, checkboxes, radio buttons, and input fields. Also it helps to prototype very close to the final product. I am designing a platform where the registration process requires users to fill certain forms and select specific tags ( e.g. please select at least 3 tags) or check several radio buttons in different steps. In such a case, combining the code and design (conditions) would help designers communicate smoothly with test-group users in order to deliver a feeling as close as to the final product.

9 Likes

Thanks this is super helpful and we’ll definitely keep this in mind!

Concrete use case for me @nikolasklein, a form with three fields and a submit button: having a submit button disabled until the three fields have content in them (ie. they’re all at a “filled” state").

15 Likes

UX Pin has had them for a while now and they are a reason to switch to another tool. But good to hear you are thinking about it.
This would honestly “blur” the line between code & design. Having real dynamically reactive UI components. If they are ever to be part of some beta testing I would love to experiment with them.

3 Likes

Is it possible to create a radio style interaction so only a single component can have an “active” state (for example)?

6 Likes

Not at the moment, sorry! In order to make that work, you’d have to wrap all of your radios into another component that controls all the possible states it can be in.

I’m going to merge this with a request for adding conditions to interactive components, as I think that would likely be the most elegant way to solve for your use case, but let me know if that doesn’t seem right to you!

3 Likes

I remember coding a script in flash that had a global variable called something like: WhoIsActiveNow - so when I pressed a new radio button it first asked “WhoIsActiveNow” and then it disabled that, while activating the one interacted with. - its an easy way to code it. hint figma

2 Likes

I want to make more games in Figma. Conditionals would allow me to do that.

2 Likes

Hey!

I’m currently designing a table style list component (SaaS/desktop style) with several sorting and filtering options as well as optional columns etc. I defined an interactive component dropdown menu in our design system for this list.

Does anyone have a cool solution to how (in a prototype) I could match the menu selection to the screen that’s displayed (example: Press: Sort by date shows one list order, Press: Sort by status shows another list order?). This is easy when the menu is not an interactive comp but now with the interactive component, I can’t link the selection to a frame, because I don’t see it.

Thanks in advance for any cool ideas :blush:

This would be really easy to solve by creating an interaction called “On outside click” as we already have on the overlays called “close when clicking outside” but as a checkbox

Came looking for this feature request with the same use case - I want to have action buttons disabled until at least one list/table item is selected (checkbox).

2 Likes

It’s really nice to see that you are thinking about it.

My use cases are as @Navid_Najm said.
Another one is e.g. a prompts in dektop applications. Depending on what users click on the overlay, I’d like to have control over the things happening on the layers/frames below the overlay.
Same goes for dropdowns. My dropdown influences the content of the window below and currently I find it very hard to create a variation for dropdowns (especially if the dropdown is longer than the frame below. I cannot make the frame larger, because later on all the frames needs to be combined into one. So, having “dropdown open” as state is not an option currently. For this reason I create the dropdown as an overlay as well, BUT the issue here is, that I cannot like back to from the dropdown to the created variations. I hope this was not confusing.

What about the error state?

If I try to express like below situation, I can not add two onClick events, so I have to make some wrapper frame or something in Prototype.

Login Button ->onClick -> Error Dialog
                       -> Success Dialog

In this case, the new Starting point also can not handle it. Event dependent from Starting point is a passably good option, maybe?

For Example, in the below case, I can have multiple onClick but dependent on the Starting point.

Success Starting Point ->             -> onClick -> Error Dialog
                          Login Button
Error Starting Point   ->             -> onClick -> Success Dialog

1 Like

For anyone considering this feature:
One of the limitations with interactive components currently is that interactions are always bound to one component or layer.

It would be powerful to be able save an ‘action-set’ of events, in a general way, much like regular styles work in Figma.

One ‘action-set’ could be used by many interactions, and would only have to be edited once to apply changes.

1 Like

exactly, to be able to set number of options user is allowed to select.

1 Like