# Slider In order for a Slider from Figma to be imported to Unity automatically, certain rules apply when designing a slider 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. "Slider" component type should be selected when designing a slider. Direction of a slider 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 Sliders have 4 states: Default, Hover, Press, Disabled. These states must be designed as variants of a slider component set in Figma. The variant name in Figma must be "State" 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 Slider component variant In order for importer to convert a slider component from Figma to Unity's built in Slider component, a predefined hiearchy should be applied to have expected behavior.

Unity built in Slider component hierarchy

Keeping in mind the built in Unity slider hierarchy, design of a slider variant in Figma should look like:

Figma slider component set variant's hierarchy

### Binding keys of "Fill Rect" and "Handle Rect" Unity's slider component needs to have "Fill Rect" and "Handle Rect" set to behave as expected.

Fill Rect and Handle Rect of a Slider component in Unity

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

The binding keys for Handle Rect and Fill Rect must be "@Handle" and "@Fill" respectively. {% hint style="info" %} Keep in mind that components & component sets are never imported to Unity, only instances of them are imported. {% endhint %}