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
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.
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").
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.
Is it possible to create a radio style interaction so only a single component can have an “active” state (for example)?
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!
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
I want to make more games in Figma. Conditionals would allow me to do that.
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 
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).
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
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.
exactly, to be able to set number of options user is allowed to select.
OK, Let’s say you have 2 components, each with 2 variants as follows
is it possible to create prototype interactions between the components so that clicking component 1A navigates to 2C, opens 2C as a dialog, etc?
This seems to work with standard components but not variant based ones… I can’t get Figma to let me “Drop” the interaction node endpoint anywhere inside a variant container
Was hoping to be able to use this technique to combine between component interactions and between variant interactions (interactive components) to create some more advanced prototypes.
yeeees, I agree
it would be nice to have interactions on variable components which could influence other variable components.
My example to give more context to this issue:
if you have panel + map it would be nice if:
(I know that you can make all actions in one big component or frame by frame to make quick workaround… but… if you will have 2 separate controls of this map (e.g. second panel) the number of cases you need to map is horrendous… and I have intuition making some possibilities within variants could help)
@Kamila_Owsianka @Spencer_James This is covered in this thread, Add conditions to interactive components, go vote! 