Skip to main content
Question

Interactive component dropdown

  • July 26, 2022
  • 7 replies
  • 1163 views

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 replies.

7 replies

tank666
  • 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
  • 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
  • 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.