Skip to main content

I’m trying to create an interactive drop-down which have 4 options. When a user selects one of the drop-down options and clicks a button (continue) it will direct them to that page.


Example:

Choose your department



  • Sales

  • Beauty

  • Pharmacy


User selects Sales from the drop-down.


Click the continue button and it directs them to the sales page. It does the same thing for other drop-down.


However, this doesn’t seem to be possible with Figma. As once you add a interaction for one of the drop-downs when its selected it goes to the page without clicking continue.


I hope this makes sense. If you need further explanation let me know.

Hi Sebbie,


I don’t think this is possible. This requires logic conditions which I believe Figma is sorely lacking. As far as I know, based on my experience, if you still want to keep everything inside Figma without using another prototyping tool, for each department, you will need to make its own set of pages, plus three copies of the continue page. Depending on which department was chosen by the user in choose your department, they go to that department’s specific continue page, then from that continue page they go to the selected department’s page.

Hi Sebbie,


What you want to do is entirely possible. How you want to do it is not a feature in Figma. I’m still new to the Figma community, so I’m sure there’s a better way to share files, but here’s a link to a demo version I created. I tried to do all of the interactions from within the component and opening it as an overlay, but Figma stubbornly refused to reset the drop-down menu state after each selection. So, this is the only way I could reproduce your use case:



You don’t actually need to create the drop-down list as a component, but I find it’s faster and easier to do so. The list option component is also really only necessary if you want to support a hover state, which I liked. And in the end, I chose to mock this up on a mobile device, so there wouldn’t be a hover state anyway. Maybe pretend it’s a focus state? lol


All that said, I highly recommend testing this UI behavior before using it in practice. Users are accustomed to clicking on a drop-down option and having an immediate response. Requiring them to also click a confirmation button is not only adding unnecessary friction, you’re compounding that issue with users who use tab navigation. I always advocate on the side of caution when it comes to deviating from standard practices, especially if you haven’t thought through the accessibility implications. In summary, you can do this thing, but maybe think about whether you should. Maybe research WCAG tab navigation best practices before making a decision?

Hi Ashlillings,


Thanks for the reply.


I got it working with creating component drop-down and then created a single main selector section which connects to three other sections which they connect to the main sections. Very confusing to explain but I got it working at the end. It may no look pretty in the editing mode but when you preview it works fine.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Terms & ConditionsCookie settings