Designing VR/AR UI in Figma and testing it with no code (Updated)
UI has been in constant evolution since 1973 when Xerox Palo Alto Research Center created the first UI as we know it nowadays. Read more about the evolution of UI in this article “UI Evolution: From Computers To Virtual Reality Headsets”.
Now, we are facing the next step on UI evolution, we’re jumping from flat screens to 3D spaces, whether into real world with AR or into virtual worlds with VR, UI will bring to these spaces some features from the flat screen world, and of course, new ways of interaction will born to take advantage of the new 3D medium.
To whom, what and why is this article
The goal of this article is very simple. Show UI designers who are curious about the XR industry, how to design a UI for XR using one of their day-to-day tools (Figma) and bring this UI to an actual XR space. If you’re one of them, this exercise will allow you to understand which font and button sizes to use and understand the distances between your UI and your user.
To complete this exercise you’ll need:
- Figma and the FloatGrids Figma file
- Shapes XR.
- Meta Quest 2 headset
Let’s go!
UI components in VR
In 3D you won’t work in pixels, instead you’ll do it in meters, centimeters or millimeters. But there is a way you can still think in pixels as you always do, and it is very important you get this concept right, dmm (distance independent millimeters) were created by Google to measure sizes in XR. It establishes that every pixel is one millimeter at one meter of distance. That means you’ll design as if your design was always at a 1m distance, so, in your design, a 800x800 pixels card, will be an 800x800 millimeters card at 1 meter. If your design is intended to be at 4m, just multiply 800x4. But from design perspective, you don’t have to worry about that, just design at 1:1. We’ll see this in more detail when exporting the assets, but basically you scale the UI by the distance you intend the UI to be seen.
To start with a ready-to-use set of VR components go to the Figma Community and download FloatGrids VR Design System file. Check the page “How to design for VR” to get more guidelines. You can request the FloatGrids Unity package here as well.
Customising foundations in Figma with FloatGrids
Play with the foundations as you always do in your design systems, change colors and add your own styles so that you get your own design ready.
A quick look at FloatGrids components
Setting up colors
Setting up typography
Final set up
The foundations already look more like Disney Plus, let’s design something!
Design
Use one of the examples in the “Examples/Viewports” page as a layout. After that, you already know how to design in Figma ;)
Take a quick look at the design process
Considerations
Use a 32px margin or something close to it, 16px or 24px for margins feel too tight. I’m using the 8px system just because I’m familiar with it, there is no technical reason to do so.
UI in VR floats. You don’t want to place the center of the design just at the center of users’ eyes, that’s not comfortable for them, instead place the center of your design a little bit lower, 260mm according to Google. Once we get to Shapes XR you’ll have the chance to test this and see how uncomfortable is having the center of the design just in front of your eyes, we tend to look a bit lower unconsciously. That’s something you cannot do in Figma obviously, it will be done in Unity or Unreal, but is very important to consider when it come to do the handoff forthe developers.
Testing your UI in XR with Shapes XR
Bringing your UI from Figma to ShapesXR
- Firstly, you’ll need a ShapesXR account, get one here.
- In ShapesXR, in the web, go to Imported in the main menu. Click on “Import from Figma”
- The first time you’ll need to sync Figma with ShapesXR. Go to your Figma Settings and create a Personal Access Token.
- Paste the Personal Access Token in the modal in ShapesXR. Now all your imports will update in ShapesXR when you make changes in Figma
- Go to Figma, select the group or frame you want to see in XR. Right click, “Copy/Paste as” and click “Copy link”
- Go back to ShapesXR and paste the link in the modal
- Pro tip: Or paste it directly in the assets view
- Done! Your UI is ready to use in the ShapesXR VR app.
Using the assets in an XR space
Once in Shapes, select a Sample from the Lobby or create an empty space. Once in it, use the controller to go to your files, search the one you imported from Figma and activate “UI element” toggle.
This opens a drop down called “Pixel density”. This feature allows you to scale your UI based on the intended distance. You’ve exported at 1:1, 1px is 1mm at 1 meter distance. Now, select the distance you’d like the UI to be seen from the user and experiment with the feeling of depth.
In the next image, you can see how the panel was 240 pixels width on Figma and by importing it at 1 m it is 24cm in Shapes XR. To make it easier, I set the distance to 1m for my design.
Once you have the asset in your hands, use the snap feature to better align the assets between them, play around with it to get used to the way it works. It’s awesome how precise you can be using this capability.
Finally set your point view at the distance you intended the design to be seen and test how your UI will look once developed.
Final thoughts
That’s how you can bring your UI into XR environments in barely 10 minutes. But this is just to bring a 2D UI into a 3D environment, which is a good starting point.
Now, think about the possibilities that this opens, the space, how could your UI interact with it, could it change depending on which page the user is at? And the distances, is there any way to make them help in the experience? Or the layouts, could we use any space out of the layout so it is not that flat? How much content can or should I put in one single panel? As you see, a lot of new challenges and problems show up in this new environment. How exciting it is to start playing with these new challenges and come up with new solutions, isn’t it?
I hope you enjoyed this little step by step and it inspired you to create something new and amazing!
Thank you for reading 💜
