> 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/input-field.md).

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

<figure><img src="https://1621352894-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbxGkHH9nbw4PqGFuLmzb%2Fuploads%2FNRLL3W4odSVfbwKhrHc0%2FEkran%20Resmi%202024-05-24%2008.55.42.png?alt=media&amp;token=8b18d261-27f4-45cf-98d7-e0d951cdf37f" alt="" width="375"><figcaption><p>An Input Field component set 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. "InputField" component type should be selected when designing an Input Field.&#x20;

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.&#x20;

### "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.&#x20;
{% endhint %}

<div><figure><img src="https://1621352894-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbxGkHH9nbw4PqGFuLmzb%2Fuploads%2F19mvBD3wMXilA5ZuiKof%2FEkran%20Resmi%202024-05-24%2008.56.04.png?alt=media&amp;token=dcc13de1-162b-48b2-ab33-00345d8ee14b" alt="" width="375"><figcaption><p>State variant of an Input Field</p></figcaption></figure> <figure><img src="https://1621352894-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbxGkHH9nbw4PqGFuLmzb%2Fuploads%2F1HYidZoq3eqSKG2Pw0bg%2FEkran%20Resmi%202024-05-24%2008.56.16.png?alt=media&amp;token=7fad4540-c49e-498e-bc45-60a7cfb8aef4" alt="" width="375"><figcaption><p>Selected Variant of an Input Field</p></figcaption></figure></div>

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

<figure><img src="https://1621352894-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbxGkHH9nbw4PqGFuLmzb%2Fuploads%2FhBkC4aaCLhte0mkolnpv%2FEkran%20Resmi%202024-05-24%2009.07.53.png?alt=media&amp;token=7d749a48-cc03-4272-8845-dea00b44375e" alt="" width="251"><figcaption><p>Unity build in Input Field component hierarchy</p></figcaption></figure>

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

<figure><img src="https://1621352894-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbxGkHH9nbw4PqGFuLmzb%2Fuploads%2F2rSRBTSI7XaWYupFG0o9%2FEkran%20Resmi%202024-05-24%2009.08.32.png?alt=media&amp;token=2d86a6d9-0df8-4e17-b4b6-d3378ad9c6b5" alt="" width="287"><figcaption><p>Figma Input Field component set variant hierarchy</p></figcaption></figure>

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.

<figure><img src="https://1621352894-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbxGkHH9nbw4PqGFuLmzb%2Fuploads%2FAqDG0aY0xCV5Xy2Y0cU9%2FEkran%20Resmi%202024-05-24%2008.58.22.png?alt=media&amp;token=dc9fec4d-a698-4147-8843-6ecb8267a44c" alt="" width="375"><figcaption><p>Text Viewport and Text Component of an Input Field in Unity</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="https://1621352894-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbxGkHH9nbw4PqGFuLmzb%2Fuploads%2F4MehFnqEcLom5edqL5FD%2FEkran%20Resmi%202024-05-24%2008.59.09.png?alt=media&amp;token=9c135271-e7d9-4dfa-9b13-00215d23b189" alt="" width="375"><figcaption><p>"@TextViewport" binding key for Text Viewport</p></figcaption></figure> <figure><img src="https://1621352894-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbxGkHH9nbw4PqGFuLmzb%2Fuploads%2Ftd4mR8btY6U6EHvc4K0O%2FEkran%20Resmi%202024-05-24%2008.59.21.png?alt=media&amp;token=c855efcc-e8a3-4a8d-8337-bc2dbdbd7d41" alt="" width="375"><figcaption><p>"@Text" binding key for Text Component</p></figcaption></figure></div>

{% 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 %}