Scroll View

In order for a Scroll View from Figma to be imported to Unity automatically, certain rules apply when designing a Scroll View.

A Scroll View component 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. "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.

The hierarchy of Scroll View component

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.

Unity built in Scroll View Hierarchy

Keeping in mind the built in Unity Scroll View hierarchy, design of a Scroll View component in Figma should look like:

Figma Scroll View component hierarchy

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.

You may have noticed that an instance of a Scrollbar (which will be introduced in this page later on) component is used with Scroll View component. As you can see, components may have instances of other components.

Binding Keys of Content and Scrollbars

Unity's Scroll View component needs to have "Viewport", "Content" and either "Horizontal Scrollbar" or "Vertical Scrollbar" (or both) set to behave as expected.

Viewport, Content and Scrollbars of a Scroll Rect (Scroll View) in Unity

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

"@Viewport" binding key is set for Viewport

"@Content" is set for Content

"@ScrollbarVertical" is set for Vertical Scrollbar

The binding keys must be:

"@Viewport" for Viewport,

"@Content" for Content,

"@ScrollbarVertical" for Vertical Scrollbar,

"@ScrollbarHorizontal" for Horizontal Scrollbar

Scrollbars

In order for a Scrollbar from Figma to be imported to Unity automatically, certain rules apply when designing a Scrollbar.

A Scrollbar 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. "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.

"State" variant

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.

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

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