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

12 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.

6 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").

8 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

1 Like

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

2 Likes