ruxailab / figma-vr-unity-converter

Tool that allows to export Figma VR designs into Unity
MIT License
11 stars 4 forks source link

Prototyped for User Interfaces in the Metaverse

![license](https://img.shields.io/github/license/uramakilab/figma-vr-unity-converter) ![Issues](https://img.shields.io/github/issues/uramakilab/figma-vr-unity-converter) ![Stars](https://img.shields.io/github/stars/uramakilab/figma-vr-unity-converter) ![Status](https://img.shields.io/badge/status-Development-orange)

The objective of this project is to facilitate the prototyping of user interfaces for the metaverse, thus facilitating and assisting in the development of software and systems for it.

Summary

Prerequisites

Before you start, you need to have an account on Figma and install Unity (2022.3) on your computer.

Install VR

The following steps have been tested with Meta's VR Quest 2 glasses. If you haven't downloaded the software for your VR, install it so that you can connect your computer to the VR.

After installation, open the Oculus software and go to Settings -> General -> OpenXR runtime.

Then turn on the VR, allow access to the files and activate the VR's "Quest Link" or "Rift" setting.

Now in Uniy Hub, create a new project using the VR option as a template, that way everything will be configured. Now just press play in Unity.

How to Install

1. First open your Unity project, then install it Unity UI-Rounded Corners following the documentation.

2. Then download Plugin.Unity.unitypackage on GitHub.

3. Then import the plugin into Unity:

  • Open Unity.
  • In the top menu, click on Asset -> Import Package -> Custom Package.
  • Select the Plugin.Unity.unitypackage file.
  • When the import window appears, click on import. Import all selected items

4. Now, to use the plugin open figma:

  • Open a project in Figma.
  • Click the Figma icon to open the menu.
  • Go to Plugins, search for plugins, search for Figma To Unity For Virtual Reality (FUVR) then select.

How to Use

To use Figma Convert first draw one or more interfaces (it is important that precision interfaces are components).

Then, to position the components the way you want them to be positioned in Unity:

  • Select the components you want to export.
  • Click the Figma icon to open the menu.
  • Go to plugin and Figma To Unity For Virtual Reality (FUVR).

In the plugin you can position each component in the place you want, just select the component with double click and place it in the position you want.

Now go to Unity click on tools, Figma Convert. With the window of Figma Convert click on Login Browser so that the token can be obtained automatically or enter the token manually. Then copy the url of the Figma Document and finally click on Download Project.

❌ Common Errors

Nesta seção, listaremos alguns dos erros mais comuns que os usuários podem encontrar ao usar este projeto.

1. Dependency error

Erro na Dependência

  • Error: error CS0246: The type or namespace name 'Nobi' could not be found (are you missing a using directive or as assembly reference?)

    • Description: Not having installed the UI Rounded Corners
    • Solutions: Install the UI Rounded Corners

    2. Download url error

Erro na Dependência

  • Error: NullReferenceException: Object referece not set to an instance of an object Core.Start (System.Int32 escala) (at Assets/Figma Convert/Editor//Core.cs:9)

    • Description: No ter colocado a url do Figma Document na ferramenta do Unity
    • Solutions: Go to Figma, enter a document then copy the url of the project.

🛠️ Technologies

The following tools and technologies were used in the construction of the project:

📚 Documents Used

Some of the documentation used in the project:

➕Additional Information

  • Access Postman
  • Tested on Unity 2021 release

📝 Changelog

Detailed changes for each release are documented in the release notes.

💁‍♂️ Contributing

Developers interested in contributing should read the Contribution Guide. We also have a list of issues you might want to check out.

🚧 Project under Development 🚧