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

### 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. {% hint style="info" %} The hierarchy of child nodes of a component set's variant must be the same for each and every one of them. {% endhint %}

### 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

{% hint style="info" %} The binding keys must be: "@TextViewport" for Text Viewport, "@Text" for Text Component Optional: "@Placeholder" for Placeholder {% endhint %} {% hint style="info" %} Keep in mind that components & component sets are never imported to Unity, only instances of them are imported. {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://cdmdocs.gitbook.io/unity-figma-importer/components/input-field.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.