# Getting Started

<div data-full-width="false"><figure><img src="https://1621352894-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbxGkHH9nbw4PqGFuLmzb%2Fuploads%2FPgCmVIyVMu2BnbiJzsMP%2FBanner.png?alt=media&#x26;token=cd875cc8-b5fb-4814-a81a-5a12933f469e" alt=""><figcaption></figcaption></figure></div>

Transforming your [Figma](https://www.figma.com/) designs seamlessly into [Unity](https://unity.com/) UI elements is a breeze with the Unity Figma Importer. This powerful tool not only bridges the gap between design and development but also effortlessly binds codes with the layout files, empowering you to swiftly craft stunning Unity apps with precision and ease.

## Unity Package

This is the base Figma package to be able to download Figma files into the Unity.

#### Installation

* Open Package Manager in Unity
* Press "+" and "Add package from git URL..."
* Enter this repository and version as [`https://github.com/cdmvision/unity-figma-importer.git#1.9.0`](https://github.com/cdmvision/unity-figma-importer.git#1.9.0) (see latest version [here](https://github.com/cdmvision/unity-figma-importer/tags))

## UGUI Support Package

This is the UGUI support package that imports downloaded Figma file as UGUI elements prefab.

#### Installation

* Open Package Manager in Unity
* Press "+" and "Add package from git URL..."
* Enter this repository and version as [`https://github.com/cdmvision/unity-figma-importer.git#1.9.0-ugui`](https://github.com/cdmvision/unity-figma-importer.git#1.9.0-ugui) (see latest version [here](https://github.com/cdmvision/unity-figma-importer/tags))

## Figma Plugin

For enhanced functionality and seamless integration with Unity, it is recommended to use the [Figma plugin](https://www.figma.com/community/plugin/1047282855279327962) with Figma app alongside with the Unity package. This plugin is designed to facilitate the process of saving Unity-specific data directly onto Figma nodes. This data can then be utilized during the import process into Unity, streamlining the workflow between design and development teams. This plugin runs on Figma app.

With the Figma plugin you can:

* Bind your UI elements with the [MonoBehaviour](https://docs.unity3d.com/ScriptReference/MonoBehaviour.html) scripts
* Import components such as [Text](https://docs.unity3d.com/Packages/com.unity.ugui@2.0/manual/script-Text.html), [TextMeshPro](https://docs.unity3d.com/Packages/com.unity.ugui@2.0/api/TMPro.TextMeshPro.html), [Image](https://docs.unity3d.com/Packages/com.unity.ugui@2.0/manual/script-Image.html),  [Button](https://docs.unity3d.com/Packages/com.unity.ugui@2.0/manual/script-Button.html), [Toggle](https://docs.unity3d.com/Packages/com.unity.ugui@2.0/manual/script-Toggle.html), [Slider](https://docs.unity3d.com/Packages/com.unity.ugui@2.0/manual/script-Slider.html), [Scrollbar](https://docs.unity3d.com/Packages/com.unity.ugui@2.0/manual/script-Scrollbar.html), [Dropdown](https://docs.unity3d.com/Packages/com.unity.ugui@2.0/manual/script-Dropdown.html), [ScrollRect](https://docs.unity3d.com/Packages/com.unity.ugui@2.0/manual/script-ScrollRect.html), [InputField](https://docs.unity3d.com/Packages/com.unity.ugui@2.0/manual/script-InputField.html) and much more!
* Bind [LocalizedString](https://docs.unity3d.com/Packages/com.unity.localization@1.5/api/UnityEngine.Localization.LocalizedString.-ctor.html) with [Text](https://docs.unity3d.com/Packages/com.unity.ugui@2.0/manual/script-Text.html) or [TextMeshPro](https://docs.unity3d.com/Packages/com.unity.ugui@2.0/api/TMPro.TextMeshPro.html) component automatically using the [Unity Localization](https://docs.unity3d.com/Packages/com.unity.localization@1.5/manual/index.html) package

#### Installation

* Open Figma app
* Navigate to the `Plugins` menu
* Click on `Manage Plugins`
* Search for [`Unity Figma Importer`](https://www.figma.com/community/plugin/1047282855279327962) in the search bar
* Click on `Run` to add the plugin to your Figma workspace

