Variables for "if than then this"

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:

• Figma File
• Functional Prototype

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.