Dropdown

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

A Dropdown component in Figma

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.

Built in Dropdown component in Unity

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

Figma Dropdown component hierarchy

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

Dropdown item toggle, represents each item in a dropdown list

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

Toggle

Dropdown Scroll View

Dropdown Scrollview

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

Scroll View

Dropdown Button

Dropdown Button

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.

Button

Binding Keys

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

Template, Caption Text and Item Text fields of a Dropdown

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

"@Template" for Template

"@ContentItemText" for Item Text

"@CaptionText" for Caption Text

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

"@ContentItem" for the items in the Dropdown list

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

Keep in mind that components & component sets are never imported to Unity, only instances of them are imported.