February 22, 2024
Experience blog in designing UI with Figma for Unity and Pico Enterprise 4
.png)
I created this blog while working on a project as a XR Product Design for an application made in Unity for Pico 4 Enterprises.
They serves as a personal journal, circling my experiences, discoveries, and the iterative processes that have shaped my approach to VR UI design. While the methods and insights shared here may not conform to conventional best practices, they have proven effective in my projects and continue to evolve as I refine my skills and adapt to new challenges :)
My Steps :
1.Understanding VR Resolution for Design
Many blogs that i read, suggested to design at resolutions like 1920x1080 or 2304x1296, rather than the native per-eye resolution of a VR headset, this approach seems to be a balance of practicality, performance, compatibility, and workflow considerations. It is a strategic approach to optimize the user experience across a range of devices and scenarios, ensuring that content is accessible, performs well, and meets the project's quality standards. In this case, i'm designing for Pico 4 Enterprise so i'll be using their resolution ( which is higher ) to take advatange of the full capabilities they have.
- The resolution per eye 2160x2160 for Pico 4 Enterprise, and we're designing something that will be viewed in both eyes (like a UI element or a 2D overlay), initially i had thought that i might need to double the horizontal resolution for the design frame. However, because of the stereoscopic view in VR, each eye sees a slightly different perspective to create depth, and the images are not simply two identical frames side by side.
- Designing for One Eye: So, actually it's more practical to design for the resolution of one eye 2160x2160 because the VR system will handle the rendering for stereoscopic vision.
- Create a New Frame: In Figma, i set up new frame with the dimensions 2160 x 2160 . This resolution matches the per-eye resolution of the Pico VR headset
2.Preparation for Designing in Figma.
Within frames , create the measurement needed that can help us design with precision . This require 3 things : central attention grid , angular degree measurement , and layout grid.
- Central attention grid : i just start with a small circle exactly in centre of the frame .
- Angular Degree Grid : , while there is no built it support in figma for this , but if we imagine that the frame is a filled with full circle of 360degree . Then this helps to simulate the concept
- Layout grid : as we are making peripheral content, seems like lower counts of column ( in this case i choose 5, but lets see later ) and wider counts of gutter will works better , as this will be our guide for comfortable UI placement for user viewing area
This is also where the Spatial UX Principal comes in , -30 to 30 in user POV is called gaze comfort and -35 to -60 and 35 to 60 degree is called neck comfort zone . Central attention grid have a size consideration of gaze comfort , which means we now can enlarge the circle as big as -30 to 30 degree.
3.Exporting Design for Unity.
I found a lot of great different ways to bring in Figma UI to Unity, starting from Plug-in and or a more manual ways. But the truth is i think it's important to first understand the purpose of the UI in the UX then decide the tools that can help us.
I say this because UI designs from Figma into Unity, have different approach based on the complexity of the UI, the level of interactivity required, and the specific workflows of your team.
Either we decide to exporting components one by one and reassembling them in Unity, versus exporting more complete UI layouts—the approavh would depend on the nature of the UI elements and it needs for the user experience.
Approach :
- Static Elements: For parts of the UI that are static and don't require interaction (e.g., background images, decorative elements), i think we can export these as part of larger, complete layouts.
- Dynamic/Interactive Elements: For interactive elements (e.g., buttons, navigation bars, input fields), export these individually. Because we still need to apply Unity’s interactive components and animations to these elements, ensuring they function correctly within the application.
In this portal, i have 4 layer on top of each other . 3 are static elements and 1 is interactive elements.
- Static Elements :I grouped all the static elements and to take full advantage of the good resolution Pico has , i exported them as one component with 3x.This helps to make sure we have high-quality, crisp visuals across high-density displays and multiple platforms. By starting with a higher resolution, in Unity we can scale down the assets for lower-resolution displays without losing detail.
- Interactive Elements : ,I exported them separately and will arrange them manually in Figma . It is more work indeed but it is more scalable to do it this way, incase we need to change only certain elements
4.Arranging design in Unity
One of the thing that i find very confusing in the beginning is the sizing of Unity in comparison of designing in Figma , but i have to say that combining figma and Bezi in doing the design helps a lot in giving me some idea how things might look like. Another fact is that some people told me that this is developer part, yes that is correct . But in order for me to give a good explanantion of a handover to the developer , i myself need to understand not only the principal but the implemnetation until a certain point so i can explain how i want it to look like in Unity.
- Open Unity :I created assets folder of Figma UI and import the component inside the folder
- Install 2D Packages :Install 2d packahes from Unity Registry ( inside Project Setting ) , this is needed to convert 2D assets into sprite . Sprite allows us to directlt use 2D graphic as drag and drop component to Unity scene , also it allows us to tranform the component to use interactivity needed, like UI Effect, Transisition, and User Inout Handling.
- Convert assets to Sprite :Select all the assets, - Texture Type : Choose 2D + UI - Choose Single Sprite mode and tight mseh type. Then apply.
- Canvas in Figma : In order for Unity to render the 2D in 3D , it needs a canvas .Canvas is a component that acts as a container for UI elements (like text, images, and buttons). It's used to layout and render all the UI elements that are its children. .Add Canvas from Left Panel . Once it appear, changed the Render Mode to World Space ( Canvas to be placed and rendered within the 3D world, as opposed to being overlayed on the screen (Screen Space) or within a camera's viewport (Camera Space) and Reset potion to 0 .
