Lidia Rodríguez Segovia
Lead XR Designer at NTT DATA
In our ongoing quest to optimize processes and work methods, we’ve come across the asset ‘Figma Converter for Unity,’ a tool available in the Unity store that could assist us in seamlessly implementing 2D designs created by our design team into Unity projects. In light of this, we’ve decided to take a closer look at its utility and evaluate its advantages and drawbacks.
What is the Figma Converter for Unity asset?
We define an asset as any resource that complements the development of a Unity project. Assets can encompass various types, including both 2D or 3D models, SDK templates, or tools to expedite project development.
Specifically, the Figma Converter for Unity asset is a tool that enhances the capabilities of the development platform. It allows us to easily and swiftly import designs created in Figma into the Unity game engine.
To facilitate the download of these assets, Unity provides a store where multiple resources, both free and paid, are available. Figma Converter for Unity falls into the category of paid assets and can be found at this link.
What does using it entail?
In our investigation of this asset, members of both the development and design teams have been involved.
For the design team, the use of this tool doesn’t involve installations or the use of any additional software or tools. However, it’s essential to note that even though we will continue to use the same design tools as before, to streamline the process of importing Figma designs into Unity, we need to follow a specific workflow to ensure a smooth transition. We will break down these changes later, outlining a set of guidelines to follow.
This means that, for the design team, it doesn’t necessarily reduce working time, and depending on how we implement its use, it may even result in an increase of varying degrees (we will address this further). However, for the development team, using this tool does reduce the implementation time of the code significantly, as it enables the direct import of screens designed by the design team, ensuring that the Unity design matches exactly with that of Figma.
To use it, of course, requires the installation of the asset on the development platform and initial configuration.
Design Guidelines:
How to design with Figma Converter for Unity in mind
Next, let’s explore the guidelines to follow when creating designs in Figma to ensure proper import and display in Unity. Failing to adhere to these instructions can result in various issues, such as incorrect visualization, poor import of designs into the development platform, or the absence of states in views, such as different button states.
Guidelines checklist
– Disable ‘clip content’ in frames before importing them into Unity:
– Use ‘-‘ or ‘/’ as separators between the label and the rest of the layer name.
– Layers should be named with tags that allow Unity to identify the scripts.
· ‘img’: For a component intended to become a single image upon import.
· ‘btn’: To add the button script to its GameObject during import.
· ‘cont’: For vector sets forming an image but should be imported separately.
· ‘field’: For text field components with which the user can interact.
· ‘pholder’: For text appearing inside an input field, providing information or hints to the user on how to fill it.
· ‘grid’: To create Grid Layout components that enable precise element placement
– The text written after the tag should not consist solely of special characters.
– Do not apply a background fill to the screen frame. Instead, create a rectangle within the frame and apply color to it.
– The stroke should always be set to ‘interior’ to be visible and to be part of the background
– The background should be the last layer of each frame
– Shadows should be placed inside the ‘shape,’ for example, a rectangle in the case of a button
– Apply constraints to the various elements within the frame
– The variants of a component (e.g., buttons) do not work like in Figma. Instead, you need to build the component so that it includes all the variable layers (different text or backgrounds for different states) within the frame. First, list all the texts, defining them by the state name, and then add the backgrounds (shapes with color fill). For example, the button structure would be as follows:
– Do not use lines; create them as rectangles
– Do not use typography adjustments such as ALL CAPS, lowercase, or title case. Always set it to the default setting ‘As typed’.
– Do not use Figma’s ‘sections’ feature. Place frames and screens directly on the canvas.
– Avoid using multiple font weights within the same text box, as it recognizes only one.
– If multiple elements on the screen are positioned incorrectly in Unity, use frames with autolayout to group them and mark their correct padding.
Taking all these guidelines into consideration, we can envision two working scenarios for the design team.
The first scenario might involve using a Figma file where components are not initially created following best design practices, and designs are directly created in accordance with the guidelines required by this asset. The drawback of this scenario would be that for larger-scale projects, if any modifications occur during development, such as changes in button styles, applying these changes to affected designs would be more time-consuming and complex.
Ultimately, the reason behind this is that using best practices, as done when using a library or well-defined components, allows for unified and instantaneous management of such changes—a practice that would be omitted in this scenario.
The second scenario would involve having two design files. One file linked to the project library, where components, their variants, text styles, and colors are correctly applied to screen designs, ensuring optimal organization and the ability to easily address future changes.
The other file would be shared with the development team, where designs would be worked on using the approach permitted by the asset, applying the previously mentioned guidelines. This file, adapted for Unity export, would need to be treated as a final step once we have the definitive designs validated by the client and are sure they won’t undergo further changes to avoid rework, as it should serve as a deliverable rather than a live workspace.
How to import screens into Unity for the development team?
In order to use the asset from the development side, a development environment setup process needs to be performed.
This setup consists of a series of steps:
– Install the asset in Unity and ensure that the JSON framework is installed (add it if it’s not present)
– In the Tools window at the top, a canvas with the resolution of the panel being imported from Figma will be created.
– On the created canvas, all the parameters that need to be modified will appear.
– You should add the token and the URL of the Figma project.
– In the text configuration, ‘best fit’ should be enabled, and both horizontal and vertical margins should be set to ‘no overflow’.
– You can directly add the fonts used in the design in the text configuration section.
– In additional settings, Json.NET has to be enabled.
Once this configuration is addressed, the import process is quite straightforward.
– By clicking the ‘Download Project’ button, all the elements in Figma will be automatically loaded.
– Once loaded, you can select the specific elements you want to import, and once selected, click the ‘Import Frames’ button to complete the process
Final Conclusion
This asset offers a significant improvement for the development team, as it allows them to quickly and easily access the designs created by the design team without spending much time on programming (except for minor code adjustments). Additionally, we achieve a Unity design that closely aligns with the design proposed in Figma.
However, we should consider whether the time saved for the development team justifies the extra time required by the design team to prepare the designs for use. We should also evaluate in which cases or projects it would be beneficial to use this asset.
Furthermore, we need to assess whether the additional work for the design team outweighs the advantages provided by using this asset. We must delve into the ideal scenario in which design should work to implement it, considering whether it is viable for both large and small developments and whether the tool should be used solely for the development team to make an initial implementation, with any future changes made through pure development. Alternatively, whether each future design change would entail modifications to the deliverable Figma file that development would import in each new design version.
For the creation of this article, the documentation available after downloading the Figma Converter for Unity asset has been used as a basis.
