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?

7 replies

tank666
  • 4862 replies
  • July 26, 2022

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
  • 4862 replies
  • July 26, 2022
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
  • 4862 replies
  • 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
  • 4862 replies
  • 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.


Reply


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