[!WARNING] Experimental Release: This plugin is currently in an experimental phase and is provided "as is" without warranty of any kind. It was originally developed for internal use and may contain issues or limitations. Use it at your own risk. Feedback and contributions are welcome but please keep in mind the experimental nature of this tool.

Overview

FigmaToUnity is a Unity plugin that streamlines the UI development process by enabling the direct import of Figma page documents into Unity. The tool automatically converts Figma document into UI Toolkit assets, allowing for quick and accurate integration of UI interfaces into your Unity games.

Features

| Name | Description | |---------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------| | Figma Import to UXML/USS | The tool imports and parses Figma page documents, transforming them into UXML and USS assets within Unity. | | Element Manipulation | Enables the manipulation of UI elements and the application of custom logic via Unity scripts, providing extensive control over the user interface. | | Sync Changes | Changes made to UI elements in Figma can be readily fetched and updated in Unity, maintaining the integrity of the game's UI. | | Limitations | Refer to the section below. |

Installing

Open Window > Package Manager
Click the + button in the top-left corner
Choose Add package from git URL...
Enter https://github.com/TrackMan/Unity.Package.AsyncAwaitUtil.git
Click the + button in the top-left corner
Click the + button in the top-left corner
Choose Add package from git URL...
Enter https://github.com/TrackMan/Unity.Package.FigmaForUnity.git

Dependencies

To integrate these dependencies, you must either manually include them in your project's manifest file or ensure they are automatically resolved through Unity's Package Manager registry.

Async Await Util 1.0.6

Personal Access Token

To start using Figma Inspector, a Figma Personal Access Token is needed for API calls.

[!WARNING] The token is stored in raw format.

Visit the Figma API Authentication Page.
Click + Get personal access token to generate the token.
Copy the generated token.
Locate the Figma script in Unity's Inspector.
Paste the token into the designated field.

Quick Start

Finish Installing
Open ~Samples folder
Open Test.unity
Go to Figma GameObject
In the Title, enter the title of your Figma document (ie dfeQabSU71CHXVqweameSF) from Figma website (some templates)
Go to Test.cs and edit the UXML attribute to points to your Page/Element path
Configure Personal Access Token in Unity's Inspector
Click Update UI & Images
Save the VisualAssetTree somewhere
Start playmode and enjoy!

Usage

Working with this plugin is done through using Figma component inspector FigmaInspector. In addition, components derived from the Element class should be created and added to the same GameObject hierarchy. These components serve a dual purpose:

During the import phase, they assist in filtering and configuring various aspects of the document, such as frame selection and image handling.
During runtime, they provide the functionality to manipulate UXML and USS data structures.

Figma Inspector

| Property | Description | |------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | Panel Settings | A crucial asset enabling Unity to render UXML-based user interfaces within the Game View. | | Source Asset | The UXML asset responsible for outlining the structural framework of the user interface. | | Sort Order | Specifies the rendering sequence of UXML assets when multiple Panel Settings instances exist within a project. | | Title | Designates the title from the Figma document URL for identification purposes. | | Asset | Represents the UXML asset correlating with the corresponding asset within the UI document script. (Refer to the section above for further details) | | Update Buttons | Facilitates UI updates, offering options to include or exclude the downloading of all associated images. | | De-root and Re-order Hierarchy | Adjusts the organization of all frames based on each element's RootOrder property, optimizing the UI hierarchy. | | Filter by Path | When activated, this feature limits the download to only those UI frames that have associated scripts attached to the prefab, otherwise, all UI elements within the Figma document will be downloaded. | | Additional Fonts Directories | Provides the capability to specify paths to any fonts that are incorporated within the UI, ensuring seamless visual consistency. |

Folders Layout

This is how the final setup should look:

<UI folder>
  ├── UI.uxml
  ├── UI.uss
  ├── CachedAssets_UI.json
  ├── Elements
  │   ├── CustomElement.uxml
  │   └── CustomElement.uss
  ├── Components
  │   ├── Component.uxml  
  │   └── Component.uss  
  ├── Frames
  │   └── Canvas1  
  │       ├── Frame1.uxml  
  │       ├── Frame1.uss
  │       ├── Frame2.uxml  
  │       └── Frame2.uss
  ├── Images
  │   ├── AmazingImage.svg
  │   └── PerfectImage.png
  └── Fonts
      └── Inter-Regular.ttf

Please note that you need to place your custom fonts in a 'Fonts' folder. If you try to import a Figma document that includes a font which does not exist in the 'Fonts' folder, you will see a message in the console indicating which font is missing. You can also add an additional fonts directory using the appropriate property in the Figma object.

Figma class

During the update process the Figma class retrieves data based on the Uxml and Query attributes of the Element scripts. It then utilizes this data while producing UXML asset.

[!WARNING] Element scripts should be attached to the same game object to which the Figma script is also attached.

Element class (OnInitialize, OnRebuild, Custom Elements)

The Uxml and Query attributes define the structure of the Uxml asset and, consequently, the appearance of your UI. The type of the field following the Query attribute defines the UI element itself and, consequently, its behavior (VisualElement, Button, Label, etc.). Field types are written into UXML. Therefore, if you change the field type (for example, from VisualElement to Button), you will need to perform a Figma Update to regenerate the UXML. Each element can override OnInitialize and OnRebuild methods which can be used to do any initial setup operations.

[Uxml("TestPage/TestFrame", UxmlDownloadImages.Everything, UxmlElementTypeIdentification.ByElementType)]
[AddComponentMenu("Figma/Samples/Test")]
public class Test : Element
{
	const int minCircles = 1;
	const int maxCircles = 7;

	#region Fields
	[Query("Header")] Label header;

	[Query("CloneButton", Clicked = nameof(Clone))] Button cloneButton;
	[Query("RemoveButton", Clicked = nameof(Remove))] Button removeButton;
	[Query("CloneContainer", StartRoot = true)] VisualElement cloneContainer;
	[Query("CloneCircle", EndRoot = true)] PerfectCircle cloneCircle;

	[Query("SyncButton", Clicked = nameof(Sync))] Button syncButton;
	[Query("SyncContainer")] VisualElement syncContainer;
	[Query("SyncContainer/SyncCircle")] PerfectCircle syncCircle;

	[Query("FunctionDescription", Hide = true)] Label functionDescription;
	#endregion

	#region Methods
	protected override void OnInitialize() => cloneContainer.style.flexWrap = Wrap.NoWrap;
	protected override void OnRebuild() => header.text = "Welcome to Figma Test Frame!";

	void Clone()
	{
		if (cloneContainer.childCount == maxCircles) return;

		cloneCircle.Clone(cloneContainer);
	}
	void Remove()
	{
		if (cloneContainer.childCount == minCircles) return;

Unity.Package.FigmaToUnity

Install / Use

README