> For the complete documentation index, see [llms.txt](https://cdmdocs.gitbook.io/unity-figma-importer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cdmdocs.gitbook.io/unity-figma-importer/components/dropdown.md).

# Dropdown

In order for a Dropdown from Figma to be imported to Unity automatically, certain rules apply when designing a Dropdown in Figma.

<figure><img src="/files/QB8usI131w4a3xZvemJ2" alt="" width="375"><figcaption><p>A Dropdown component in Figma</p></figcaption></figure>

### Unity Importer Plugin

In order for Figma Importer to understand which component it is trying to convert a figma node to a Unity UI element, Component Type from Unity Importer plugin must be selected as desired component type. "Dropdown" component type should be selected when designing a Dropdown.

### The hierarchy of a Dropdown component

In order for importer to convert a Dropdown component from Figma to Unity's built in Dropdown component, a predefined hierarchy should be applied to have expected behavior.

<figure><img src="/files/ukCfjKXH2t4w3qpn4ooP" alt="" width="190"><figcaption><p>Built in Dropdown component in Unity</p></figcaption></figure>

Keeping in mind the built in Dropdown hierarchy, design of a Dropdown component in Figma should look like:&#x20;

<figure><img src="/files/WBGAEjhgzxjLjhV5DxYf" alt="" width="366"><figcaption><p>Figma Dropdown component hierarchy</p></figcaption></figure>

Notice that the child object "Item" of the "Content" component in Unity built in Dropdown is moved to upper level in the hierarchy as "Dropdown Item" in the example design. Dropdown Item will be explained in the next section.

#### Dropdown Item

<figure><img src="/files/q2XViriFbIhZRsknn4xj" alt="" width="375"><figcaption><p>Dropdown item toggle, represents each item in a dropdown list</p></figcaption></figure>

Dropdown item must be designed as a toggle, it represents each item in the dropdown list. For more information, please visit Toggle documentation.&#x20;

{% content-ref url="/pages/rq9RujVB240TIfngGdJF" %}
[Toggle](/unity-figma-importer/components/toggle.md)
{% endcontent-ref %}

#### Dropdown Scroll View

<figure><img src="/files/lG3WOBfoEp5dXrYDEHdw" alt="" width="375"><figcaption><p>Dropdown Scrollview</p></figcaption></figure>

Dropdowns must have Scroll View. For more information, please visit Scroll View documentation.

{% content-ref url="/pages/7oMROYuUvI8PYzKyOax2" %}
[Scroll View](/unity-figma-importer/components/scroll-view.md)
{% endcontent-ref %}

#### Dropdown Button

<figure><img src="/files/c7jbL1bAUWUQYE7lLSnO" alt="" width="375"><figcaption><p>Dropdown Button</p></figcaption></figure>

In order to apply UI transitions to an interaction with a Dropdown (hover, press etc.) Dropdown may have a Selectable type of instance in it. Selectables are designed the same way as Buttons, just select the Component Type in Unity Importer as "Selectable". For more information, please visit Button documentation.

{% content-ref url="/pages/QcDXIDstjkSiduvoGYuU" %}
[Button](/unity-figma-importer/components/button.md)
{% endcontent-ref %}

### Binding Keys

Unity's Dropdown component needs to have "Template", "Caption Text", "Item Text" set to behave as expected.

<figure><img src="/files/uB4mWESuTFssCQHeINaN" alt="" width="375"><figcaption><p>Template, Caption Text and Item Text fields of a Dropdown</p></figcaption></figure>

In order for importer to set these, binding keys should be set using Unity Importer plugin in Figma.

<div><figure><img src="/files/ix5Cge9ERsI1MOLGlPJf" alt="" width="375"><figcaption><p>"@Template" for Template</p></figcaption></figure> <figure><img src="/files/4hSR28CpAKYnOuvqG71W" alt="" width="375"><figcaption><p>"@ContentItemText" for Item Text</p></figcaption></figure> <figure><img src="/files/RZjuFHVIsUYyoUhRrrm2" alt="" width="375"><figcaption><p>"@CaptionText" for Caption Text</p></figcaption></figure></div>

There is an additional must have key binding in order for Unity Figma Importer to behave as expected with Dropdown instances.

<figure><img src="/files/Nr8fQV5xyQOWRhtbzaaV" alt="" width="375"><figcaption><p>"@ContentItem" for the items in the Dropdown list</p></figcaption></figure>

{% hint style="info" %}
The binding keys must be:

"@Template" for Template (Scroll View),

"@Content Item" for Content Item (Toggle)

Optional:

"@ContentItemText" for Item Text

"@CaptionText" for Caption Text
{% endhint %}

{% hint style="info" %}
Keep in mind that components & component sets are never imported to Unity, only instances of them are imported.
{% endhint %}