Skip to main content
Question

Interactive component dropdown


Benoit_Drouillat

I created an interactive dropdown component with different states: default, hover, clicked and disabled.
The “clicked” state displays a list of items that can be clicked to trigger actions (e.g. load a frame or navigate to a page).
When I use the component in my prototype, I customize the labels of the list items by overriding the text.

Capture d’écran 2022-07-26 à 14.54.28

Problem: when I launch the prototype, the texts I defined in the instance do not appear but the default texts of the component.

Did I miss a step?

This topic has been closed for comments

tank666

To preserve overrides, you need to add a hidden list of items to each of the variants.


Benoit_Drouillat

Thanks for your answer!
Here’s what I currently get:

Not sure I get how having a hidden list of items can preserve overrides 😉


tank666
Figma Learn - Help Center

So add a hidden list of items to your variants (Default, Hover and Disabled).


Benoit_Drouillat

It worked perfectly! Thanks for your help 🙏


tank666
  • January 12, 2024

From this screenshot it is impossible to understand the structure of the collapsed variant and also see the full structure of the expanded variant. Could you share a link to the example file?



tank666
  • January 12, 2024

The structure of your variants is different, so overrides are lost. As described in the topic.
different-structure
Copy the “Menu” layer from the expanded variant and paste it into the collapsed variant and hide it.


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