Designing for VR in Figma

VR apps with intuitive user interfaces — similar to what people use on their wearables, phones, tablets, and computers — are what will make VR accessible to the masses. Novel interactions are fun to come up with, but it increases the user’s learning curve.

Similar to 2D interfaces, VR designers should use size, contrast, and color to denote hierarchy. In VR, size is based on the distance between the user and a piece of content, so it’s essential to understand the scale of content and appropriate viewing distance. For example, knowing how large to design your type is tricky, but fortunately, there are many precedents in the real world. The same considerations made for print design (billboards, posters, books) are helpful when designing content for VR.

Consider how you interact with a touchscreen monitor today. We have all grown to understand several patterns such as swiping, pinching to zoom, and long tapping to bring up more options. These are all considerations that should be made in VR as well. I’m confident that as more designers come into the VR field, there will be more minds to create and vet new UI patterns, helping the industry to move forward.

Field of View

Field of view, or the extent of the observable environment at any given time, is one of the more important aspects of virtual reality. The wider the field of view, the more present the user is likely to feel in the experience. There are two types of FOV that work together to form human vision.

Monocular FOV describes the field of view for one of our eyes. For a healthy eye, the horizontal monocular FOV is between 170°-175° and consists of the angle from the pupil towards the nose, the nasal FOV which is usually 50°-65° and is smaller for people with bigger noses, and the view from our pupil towards the side of our head, the temporal FOV, which is wider, usually 100°-110°.

Setting up your Figma environment

Your work frame

When designing for VR, I use a frame size of 3600x1800 (360 deg) for the designs and then I map out the area of perfect FOV to focus my main design.

Vanishing points

This is simply the point at which receding parallel lines viewed in perspective appear to converge. This concept is useful in designing for VR because it helps you create a perception of depth and distance when creating your environment on your design tool. I have developed a method to create vanishing points in my design by having dividers within a circle separated at an angle of 10–15 degrees. Afterward, I introduced the lines into the frame, and stretch the lines until it sits well within the frame.

Once that is done, a straight line separated at consecutive intervals is then introduced into the frame.

Choose your theme and amp up the background

Once the vanishing point is done, the major workload has been cleared, then it’s down to how you want to be creative with your environment. The majority of the time, I go ahead to use gradients to create effects like sky and land, I also add bubbles, structures, or buildings using shapes, this adds so much detail to the environment and makes it feel more 3D realistic.

Design the UI

At this point, you can begin to add your UI designs based on the goal you have in mind. In designing for VR, contrast is a very important topic and so, keeping colors around texts and backgrounds minimal is usually the best choice. Mostly, backgrounds are usually transparent, a white background best suits a dark environment while for bright environments it’s best to use dark backgrounds for your UI design. Buttons are usually in two forms, primary and secondary buttons, and the colors are kept simple as well.

Layout

Unlike conventional UI design for desktop and mobile phones, in VR or AR, nested navigations are kept within the same environment, while the frames utilize the available vast space within the environment. Change in the environment only occurs when there’s a new play scene to explore. Other times, popups can be also implemented, and the new layer is stacked over the old UI.

Creating curved UI using XR tools

A quick and easy way to prototype 3D, VR, and AR surfaces without ever leaving Figma.

3D UI Generator automatically scales and adjusts any graphic, board, or frame to create a 3D surface + environment. It supports full rotation, skew, scale, zoom, FOV, and curve amount in perspective 3D and isometric views. Click here to install on Figma.

Sound UX

While the sound is often annoying when using the web or mobile apps, it is an integral part of VR development. Consider the phenomenon of synesthesia, where stimulation of one sense leads to the automatic triggering of another sense. For example, you smell something and get the illusion of taste. This also works with sound. Since tactile feedback is still lacking in VR, the sound is a great way to provide feedback when users touch objects.

3D Sound — aka Holophonic sound — is still in its infancy, but will be transformative in how we experience VR. We are all used to stereophonic sound, which provides sound coming from two channels (left/right), but holophonic sound allows us to tell if the sound is coming from above, below, or behind us. Think of when you are outside and hear an airplane. You intuitively look up, right? Having this sound experience in VR is what will make it truly immersive.

In conclusion, this is basically a simple UI prototyping method which you can use to showcase your ideas to developers in your team.