Input Field

In order for an Input Field from Figma to be imported to Unity automatically, certain rules apply when designing an Input Field in Figma.

An Input Field component set 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. "InputField" component type should be selected when designing an Input Field.

Selection color, caret color and caret width of an Input Field can be selected through the plugin.

"State" variant

Input Fields have 4 states: Default, Hover, Press, Disabled. These states must be designed as variants of an input field component in Figma. The variant name in Figma must be "State" otherwise the importer won't be able to identify it.

"Selected" variant

Input Fields have 2 condition: On (Selected) or Off (Not Selected). Selected variant is used with combination of State variant. So, a variant of an Input Field component set may be: Default, Selected On. The variant name in Figma must be "Selected" otherwise the importer won't be able to identify it.

The hierarchy of child nodes of a component set's variant must be the same for each and every one of them.

State variant of an Input Field

Selected Variant of an Input Field

The hierarchy of an Input Field component variant

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

Unity build in Input Field component hierarchy

Keeping in mind the built in Unity Input Field hierarchy, design of an Input Field variant in Figma should look like:

Figma Input Field component set variant hierarchy

Notice that although new elements are added, "Text" and "Placeholder" are under "Text Area". That is because Unity's built it Input Field component requires those to have that hierarchy in order to behave as expected.

Binding Keys

Unity's Input Field component needs to have "Text Viewport" and "Text Component" set to behave as expected.

Text Viewport and Text Component of an Input Field in Unity

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

"@TextViewport" binding key for Text Viewport

"@Text" binding key for Text Component

The binding keys must be:

"@TextViewport" for Text Viewport,

"@Text" for Text Component

Optional:

"@Placeholder" for Placeholder

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