The canvas or frame in Figma
The first step in designing any UI is to set up a canvas or frame that matches the screen or device we are designing for. But what canvas or frame should we use when our “device” is a 360 environment? The quick answer is 1920×1080 or 2304×1296, but these are just references to assist us during the design process. They are not directly related to the device itself. The crucial aspect to consider is how much of this canvas we can utilize to ensure the usability of our UI.
Your frame in Figma
In the realm of 3D, we employ meters or millimeters rather than pixels. However, if you prefer working with pixels, there’s no problem at all. At a distance of 1 meter, 1 pixel is equivalent to 1 millimeter. Thus, you can continue working with pixels as you normally would. We will explore this concept in greater detail in the Distances section.
Your frame in Figma + Angular grid (Key concept!)
To gain a better understanding of the degrees by which we need to move our eyes or neck when looking at different areas, let’s incorporate an angular grid.
Comfort zones
Now, let’s delve into comprehending the number of degrees that prompt discomfort when moving our eyes or neck.
Comfort zone
The comfort zone refers to the region where you can effortlessly gaze without having to turn your neck significantly. Any panel that surpasses this area (30º) will necessitate either curving or tilting towards the user.
Neck comfort limit
This represents the point at which turning the neck becomes uncomfortable. This area lies at the outermost periphery of the user’s vision, with any content beyond this region falling outside the user’s field of view.
💡
I highly recommend utilizing ShapesXR’s space to personally test and experience how comfortable or uncomfortable it is to view different degrees and how your eyes or neck move. This hands-on exploration will provide you with valuable insights and a better understanding of user comfort within a VR environment. ShapesXR. Space link. Space code: 9r d9 d4 w6
UI areas
Sizes done!
By now, you have gained a solid understanding of how spatial UI functions, which Figma frame size to utilize, and when your users may face challenges while scanning your UI. With this knowledge, you can now devise layouts and explore UI component sizes. The Figma file provides some references to assist you in this process.
However, there’s more to consider! What about height? Should you position the center of your UI at the user’s eye level? The quick answer is no; that’s not what you should do. Let’s delve deeper into this concept.
