Hi everyone,
I'm trying to create an interactive dropdown component in Figma that uses variables and conditions to manage its behavior. Here's what I've done:
-
I've built a dropdown component in my design system.
-
All the variants are defined and values are passed through variables.
-
The interactive prototype is built inside the component itself.
-
I published the component and used it in the main project.
I expected that by setting new variable values in the project, the prototype interactions would adapt accordingly. But in practice, it seems the component still follows the original interactions defined in the design system file — and my new values don’t reflect in the interactions.
What I want is a flexible dropdown like the one in the attached image, where I can:
-
Use it anywhere in the project
-
Just change the variables to update the state
-
For example: if more than two items are selected, show the number instead of tags
I think I need to use conditions to handle the logic, but it gets quite complex and hard to manage.
Has anyone built something like this?
Any suggestions, tips, or shared experiences would be a huge help 🙏
👍 A like would really help this get more visibility — and help me (and maybe others) finally crack this dropdown challenge!
Thanks in advance!