Input Field
Last updated
Was this helpful?
Last updated
Was this helpful?
In order for an Input Field from Figma to be imported to Unity automatically, certain rules apply when designing an Input Field in Figma.
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.
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.
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.
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.
Keeping in mind the built in Unity Input Field hierarchy, design of an Input Field variant in Figma should look like:
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.
Unity's Input Field component needs to have "Text Viewport" and "Text Component" set to behave as expected.
In order for importer to set these, binding keys should be set using Unity Importer plugin in Figma.
