Skip to main content
Question

What's the simplest way of creating interactive drop-downs?

Michael_Skattebo

Hello!

I’m looking for suggestions on how to create interactive drop-downs (or collapsable sections with interactive/selectable components) in the simplest way possible. What I would love to avoid doing is creating a different screen for every possible interaction — that would obviously take forever and I’m worried about bogging the prototype down.

Here’s a screen recording of what I’ve tried doing, what the issue is, and an explanation of why it’s so hard to create: https://vid.us/zd7z6i

Thanks for any advice or tips in making this more simple. I feel like there has to be an easier way to accomplish these four states without creating a screen for every possibility.

2 replies

ricardo.maia

Hello,

You can easily create all the interactions except for the “Select all” check box. As far as I know Figma doesn’t allow you to by clicking on a component change the state (or variant) of others.

Check the video I made with a quick example: Interactive components.mov on Vimeo

This could work if you could trigger a “Instance swap” by clicking on layer of that component (the same way you can change a variant). See also: Ability to change boolean properties while hovering [Prototype][Interactive Components]

Michael_Skattebo
1 person likes this
  • Michael_Skattebo
    Michael_Skattebo
Michael_Skattebo

Dude… first of all, thank you so much for taking the time to recreate this and make that video. Super awesome and it means a lot that someone would really take the time to understand the issue, recreate it, and give feedback.

In regards to the solution, that’s kind of as far as I’ve been able to get too. It seems like, as far as prototyping goes, I’ll have to choose between demonstrating the collapsibility or selecting all items — it can’t be both.

Thanks for chiming in! 🤘

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings