Add conditions to interactive components

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.

OK, Let’s say you have 2 components, each with 2 variants as follows

• Component 1, variant A + variant B
• Component 2, variant C + variant D

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:

• when you select something on panel (for example you click row)
• it changes variable of ‘map component’ (for example in draws a line)

(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! 🙂

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.

bump this thread. really a useful feature.

For example, I have several text inputs on the screen, and these inputs have a dynamic state (default / active)
in prototype I need to use “radio button pattern” when only one input can be active.
also I need to create more than one starting prototype point on a screen for using same screens for different flows

Axure has one of the best no code event handling I have used. Its also has variables that can hold state - basically cookies on the page.

I work in Fintech and we constantly have need to prototype user flows that get our users into correct pricing structures or SKUs we offer. We do this through a series of GTKM (Get To Know Me) tiles/radio buttons/checkboxes that users select so we can craft a custom product based on their unique financial situations. The in-house team created an MVP to do this that allows our product designers or product managers to create prototypes that set variables and apply conditional logic to elements on screens that we then take into users testing to gather data and feedback on. However, while our in-house solution works making this available in Figma would greatly improve our work flows.

I agree with you if this feature happen.

Conditionals is specifically why I’ve been using ProtoPie (along with its support for mobile sensors) as opposed to Figma. My use case is ‘gamified’ interactions, e.g. the user drags sorts objects into different locations to advance to the next screen.

Hello, I voted on this too.

I am currently building a prototype containing nested Checkboxes which act as Content Filters. (rather classic stuff)

Part of the UX is that if at least one, but not all Children of a Parent Checkbox is checked, that Parent Checkbox gets an Indeterminate state.

To achieve something demo-able, I’ve have had to create ALL possible scenarios where Child 1 is checked, but not Child 2 and vice versa. (I’ve limited the Component to 2 Children Checkboxes in order to keep my sanity)

If I had been able to tell the Parent Checkbox to look at the State its Children instead, it would have been a breeze.