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

1. Open Window > Package Manager
2. Click the + button in the top-left corner
3. Choose Add package from git URL...
4. Enter https://github.com/TrackMan/Unity.Package.AsyncAwaitUtil.git
5. Click the + button in the top-left corner
6. Choose Add package from git URL...
7. Enter https://github.com/TrackMan/Unity.Package.CommonUtils.git
8. Click the + button in the top-left corner
9. Choose Add package from git URL...
10. Enter https://github.com/TrackMan/Unity.Package.FigmaForUnity.git

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
• Common Utils 3.8.0

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

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

• 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!

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:

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

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.

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;

		cloneContainer.Remove(cloneContainer.Children().First());
	}
	void Sync()
	{
		void RandomColor(int index) => syncContainer.Children().ElementAt(index).style.backgroundColor = Random.ColorHSV();

		syncCircle.Sync(syncContainer, RandomColor, Enumerable.Range(0, Random.Range(1, maxCircles + 1)));
		syncCircle.Hide();

		functionDescription.Show();
	}
	#endregion
}

public class PerfectCircle : SyncButtonSimple<int>
{
	public new class UxmlFactory : UxmlFactory<PerfectCircle> { }

	#region Methods
	public override bool IsVisible(int index, int data) => true;
	#endregion
}

This attribute specifies the Element (a frame, and it's children) that we want to import from Figma document.

This attribute specifies the sub element (inside of the Element) parameters (like path to element, or what should happen when you click button).

This interface serves as an identifier, signifying that within the IRootElement hierarchy, an element exists which can function as a component based on the VisualElement class.

This interface acts as a marker, indicating that an element within the IRootElement hierarchy is capable of functioning as a component derived from the VisualElement class.

The imported USS file contains all the classes used by Visual Elements. USS is inspired by CSS and has a similar syntax. To manipulate properties in your code, you should use the techniques described below.

To change the appearance of a VisualElement, you should manipulate its style properties. For example, to set the top margin of an element to 3:

element.style.marginTop = 3;

If you need to read style data from a VisualElement, you should use its resolved style properties. For example, to retrieve the value of the top margin:

float margin = element.resolvedStyle.marginTop;

You can find the list of all supported properties in the official Unity documentation.

When working with VisualElements, there are various visual element extensions that allow you to find/clone/replace/etc elements:

VisualElement rectangle = element.Find<VisualElement>("Rectangle");

VisualElement elementClone = options.Clone();

element.Replace(newElement);

• Documentation (work in progress)
• Flex-gap (Unity not supported)
• Blur (Unity not supported)
• Letter spacing (Unity not supported)
• Line height (Unity not supported)
• IndividualStrokeWeights (Unity not supported)
• ComponentPropertyDefinitions
• Various CodeGenerators
• Search by name/class/path
• Dragging items for scroll-view
• Generation of the various states of Elements with states