3 Practical Tips for Basic Virtual Reality Prototyping in Figma
Lately, I’ve been especially interested in Extended Reality (XR). Supposedly we are months away from launching Apple’s XR headset, which is exciting, as it is not the first time that Apple has revolutionized an industry by launching a product (I’m talking to you, iPhone).
In 2020 the Meta Quest 2 began massifying the VR industry. It is not a specialized space reserved for high-end gaming and NASA, and applications for Virtual Reality are ever more prevalent, both in entertainment and professional contexts.
That got me thinking
How can UX Designers adopt practices in their design processes that support this novel medium?
The number of projects coming up in Extended Reality will likely increase in the next few years, so I compiled some of the basics that UX Designers should probably know to get into the VR space.
There is so much more to be said about designing for immersive environments… this article is just a starting guide with a few tips to be aware of before getting started.
1. Mind Human Ergonomics
When designing for a 360º environment, it is vital to remember that not all designed elements will be observed simultaneously. To deal with this issue, it is essential to consider the human eye's limitations and “how much we can see” in all directions.
In terms of horizontal orientation, humans can technically see even more than 180º! There is a catch, though… Out of the total visible area, only 120º is considered usable in a conscient perceptual setting. Even more, only the center 60º are considered central vision, where humans can detect symbols and detail. Finally, only the center 10º of our vision is helpful for reading and deep focus.
Our vertical capabilities are not so symmetrical. Although we can only see about 50º upwards, humans get an additional 20º of sight while looking down. Out of the total 120º of vertical field of vision, the main 55º (25º up plus 30º down) are central vision, and its physiological composition makes them great at distinguishing color.
These constraints can and should inform design decisions regarding, for example, size and disposition. Much like in traditional user interfaces, the “story” being told is highly influenced by how elements are shown.
2. Logics of a VR Scene
Another important part of composing a VR scene is the relative order of objects, i.e., the hierarchy, in terms of depth. Once again, the goal would be to emphasize the interactable elements while integrating background objects and the environment in a way that contributes to the suspension of disbelief.
3. How to draw a VR Grid in Figma
This question is what triggered me to write this article. There are a few tutorials and even articles on how to build these VR grids. However, none of them seemed sufficiently explicit to achieve a good result, in my opinion, so here is how I would go about drawing an “empty” 3D environment to express ideas in Figma.
I must emphasize that this grid aims at expressing an idea that will probably need to be refined. The purpose here is to find a way to express immersive UIs quickly and efficiently.
Step 1. Create a frame with 1920x1080px (I filled it with dark grey)
Step 2. Add a horizon line (horizontal white line) and create subsequent duplicates while adding 5º to the rotation
Step 3. Increase the size of the “grid” until it fills the frame (my advice is to pull it above the middle of the frame height);
Step 3.1. Also, change the stroke of the various lines to a linear gradient — the goal is to be darker in the center and lighter in the frame's limits.
Step 4. Create a rectangle that covers the upper part of the grid
Step 4.1. You will want the rectangle to cover a little more than just the horizon line. Think that the vanishing point will be what the user will look at when looking straight forward (and follow your instincts);
Step 4.2. (Optional) Change the stroke option from solid to dashed;
Step 4.3. (Optional) Add a few horizontal lines as orientation points;
There you go!!
Example
Having this grid, you must populate it with environmental elements, objects, and UI. Here is a quick example that I designed for this article.
Example Part 1. Added a curvature to the horizon line and sky background, designed a UI, and added a shadow to the ground to create depth
Example Part 2. Added background elements (trees and mountains), added 3d objects and lighting, and used the plugin “3D for XR“ to make the UI curve
Bonus Tip — Use the Plugin “DraftXR” to preview your scene in WebVR (browser on headset)
References
Designing for VR in Figma — Ozenua Oluwatobi John (Inspiration for the grid method)
Quick VR Prototypes — Mozilla Mixed Reality Blog (Information about Field of View)
Rapid VR prototyping without coding in 2019 — yang leo (Information about VR layering)
