Blog
/
Designing for Apple Vision Pro: 
A Quick Guide

Designing for Apple Vision Pro: 
A Quick Guide

In this article, we'll explore the necessary tools and programs that will help you create unique and visually exciting interfaces for Apple Vision Pro. Let's look at the key software solutions you need to successfully turn your ideas into reality.

Documentation and Setup

Starting out with Apple Vision Pro and VisionOS can feel overwhelming at first, but don't worry! Let's pause for a moment to get to know the tools and tech that will be our trusty sidekicks as we venture into creating apps and games for this exciting platform.

Access official documentation first:

developer.apple.com/visionos

developer.apple.com/videos

Developer tools

First of all, you need Mac and  Xcode. Xcode offers an extensive suite of software development tools, including project management support, code editors, visual interfaces for your user experience, etc.

Then you need SwiftUI. SwiftUI, combined with RealityKit, provides built-in support for visionOS. Here you can read an overview. Discover visionOS.

MaterialX is an open standard supported by leading movie industry, VFX, entertainment, and gaming companies.  You can read more about it here.

Design tools

Last but not least, designers can make the most of the Bezi spatial design platform, which draws inspiration from familiar 2D design tools like Figma and Spline. With Bezi, you can dive into creating quickly, even if you're new to 3D design. Start building your prototype on your desktop, check it out on your mobile, and then fully experience it in an interactive prototype with a VR headset or mobile AR device.

When you're delving into the worlds of virtual reality (VR) and augmented reality (AR), having the right tools is key, and choosing the best headset for testing is crucial. Here's a range of headsets tailored to different requirements: Oculus, Apple Vision Pro, Microsoft HoloLens, HTC Vive, PlayStation VR, Samsung Odyssey, Xiaomi Mi VR Standalone, and more.

How to start

Start with watching the tutorial on integrating Figma with Bezi or follow our process.

Don't skip tool onboarding, it will ease a kick off.

Get started with Bezi and create an account. The tool is working in a browser, just like Figma.

Create a new file. Add some objects. Importantly, Bezi support import of 3D objects, so go explore https://sketchfab.com and bring them to your Bezi-file.

Add some objects, apply textures and add light.  You can also animate almost everything here.

If you want to work with animations, open the State Machine, create events on the object to configuring its properties.

Additionally, you can configure an environment by using some  pre-existing samples in a library.

Prototypes created in Bezi work flawlessly on desktop computers, mobile AR and VR headsets, providing a universal user experience across multiple platforms.

How to see interfaces from Bezi on Vision Pro

Here is a quick guide created by Bezi.

https://hq.bezi.com/hq/apple-vision-pro-guide

Download the latest version of Xcode from here by clicking "Download SDK". Open a new project for a visionOS application in Xcode and start simulator.

In the simulator, open the "Settings" app, then in the "Apps" tab, select "Safari". Scroll down to the bottom, and you'll see the "Advanced" item.

On the "Advanced" page, scroll down once more to reach the bottom where you'll find the "Feature Flags" section. Toggle on all the WebXR feature flags.

Restart a simulator and go to Bezi (bezi.com) in Safari to access your created design files.

Check if "AR Mode" is enabled for your Bezi file in Bezi Settings.

Now you should be able to run Bezi files like this. Of course, you can also run your file not only in a simulator but also on a connected Vision Pro device.

In conclusion

It's fantastic to see new tools emerging in such a complex industry. I hope that in 2024, we'll continue to see more tools like Bezi that make learning and taking initial steps into designing for AR/VR much easier.