Scroll View
Last updated
Was this helpful?
Last updated
Was this helpful?
In order for a Scroll View from Figma to be imported to Unity automatically, certain rules apply when designing a Scroll View.
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. "ScrollView" component type should be selected when designing a Scroll View.
Visibility of each scrollbar (horizontal, vertical) can be set using the plugin, there are 3 visibility options: AutoHideAndExpandViewport, AutoHide, Permanent.
In order for importer to convert a Scroll View component from Figma to Unity's built in Scroll View component, a predefined hiearchy should be applied to have expected behavior.
Keeping in mind the built in Unity Scroll View hierarchy, design of a Scroll View component in Figma should look like:
Each of the scrollbars are not necessary to design. You may leave one or design both of them, it doesn't bother Unity Figma Importer.
Unity's Scroll View component needs to have "Viewport", "Content" and either "Horizontal Scrollbar" or "Vertical Scrollbar" (or both) set to behave as expected.
In order for importer to set these, binding keys should be set using Unity Importer plugin in Figma.
In order for a Scrollbar from Figma to be imported to Unity automatically, certain rules apply when designing a Scrollbar.
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. "Scrollbar" component type should be selected when designing a Scrollbar.
Direction of a Scrollbar can be selected through the plugin, there are 4 direction options: Left to right, right to left, top to bottom, bottom to top.
Scrollbars have 4 states: Default, Hover, Press, Disabled. These states must be designed as variants of a scrollbar component set in Figma. The variant name in Figma must be "State" otherwise the importer won't be able to identify it.
