Filtering prototype with 2 variables

I’ve created an ‘Events’ landing page prototype that includes two filtering dropdowns:

  • The first enables the user to select ‘Upcoming Event’ or ‘Past Event.’
  • The second enables the user to select only one of 5 different product event types.

Below the two filter dropdowns, the page also contains a selection of (framed) details for each of the upcoming and past events. This includes events to represent all of the 5 different product types.

I’ve created ‘true’ variables for all of the various options from the two dropdowns, and then assigned the appropriate variables to each of the event detail frames.

When viewing the prototype, the dropdowns function properly, however the content below does not automatically filter in accordance with the filter selections. There’s a triggering mechanism that I’ve either omitted, it’s not possible with two filter dropdowns, or due to my having incorrectly applied variables.

I’d greatly appreciate any guidance, as this is something that I’ve been unable to find relevant documentation for.

1 Like

Did you figure this out? I’m also working on an ‘advanced’ view in which you can filter, favorite, and select cards. But I haven’t figured out how to show / hide items based on the filters. It would be nice if the good people at Figma created some more complex examples instead of very basic, show-hide stuff. It all feels a little gimmicky atm. Also when you’ve set up all the variables (and stuff is hidden) it’s also pretty hard to edit / view the design variations.

Unfortunately, no. I’ve had to create the prototype, then when presenting to stakeholders, make the two filter selections and describe to them how my multiple clicks would not be necessary once developed.

I tried doing it with variables, but couldn’t get it to work!

Here’s the page for our Events Portal, along with the two dropdowns to filter the results below.

@Bob_Olson It took a mix of variables and variants, but I built an example News page where one can filter the content using two filters: “Date” and “Topic”.

View the prototype
Get the file

One thing I discovered is I need to keep the dropdowns open when I launch the prototype otherwise the click interactions I set up would get lost — the buttons wouldn’t work. I got around this by starting with a simple start prototype page and then when the “Start Prototype” button is clicked, I set 2 variables to close the filters and then navigate to the main page.

1 Like

@Nate_G this is phenomenal, thanks for the solution!

1 Like