Unity Figma Importer
  • Getting Started
    • Figma Design Downloader
    • Figma Design
    • Unity Canvas Setup
  • Layout
    • Horizontal & Vertical Layouts
    • Grid Layout
  • Components
    • Text
    • Image
    • Button
    • Toggle
    • Slider
    • Scroll View
    • Input Field
    • Dropdown
    • Custom Component
  • Limitations
  • Bindings
  • Optimization
Powered by GitBook
On this page
  • Unity Importer Plugin
  • The hierarchy of a Dropdown component
  • Binding Keys

Was this helpful?

  1. Components

Dropdown

PreviousInput FieldNextCustom Component

Last updated 1 year ago

Was this helpful?

In order for a Dropdown from Figma to be imported to Unity automatically, certain rules apply when designing a Dropdown 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.

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

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 must be designed as a toggle, it represents each item in the dropdown list. For more information, please visit Toggle documentation.

Dropdown Scroll View

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

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.

Binding Keys

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

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

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

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.

Toggle
Scroll View
Button
A Dropdown component in Figma
Built in Dropdown component in Unity
Figma Dropdown component hierarchy
Dropdown item toggle, represents each item in a dropdown list
Dropdown Scrollview
Dropdown Button
Template, Caption Text and Item Text fields of a Dropdown
"@Template" for Template
"@ContentItemText" for Item Text
"@CaptionText" for Caption Text
"@ContentItem" for the items in the Dropdown list