SlideShare une entreprise Scribd logo
1  sur  13
Télécharger pour lire hors ligne
Pixeldarts General Presentation
How to start designing for
Apple Vision Pro
Pixeldarts General Presentation
Documentation
and Setup
Access official documentation first:
https://developer.apple.com/visionos/learn
https://developer.apple.com/videos/play/
wwdc2023/10260/
Pixeldarts General Presentation
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.
Pixeldarts General Presentation
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. 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.
Pixeldarts General Presentation
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. 


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.
Pixeldarts General Presentation
Add some objects, apply textures and add light. You can also animate almost everything here.
Pixeldarts General Presentation
If you want to work with animations, open the State Machine, create
events on the object to configuring its properties.
Pixeldarts General Presentation
Additionally, you can configure an environment by using some pre-existing samples in a library.
Pixeldarts General Presentation
Prototypes created in Bezi work flawlessly on desktop computers, mobile AR and
VR headsets, providing a universal user experience across multiple platforms.
Pixeldarts General Presentation
How to see
interfaces from
Bezi on Vision Pro
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.
Pixeldarts General Presentation
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.

Pixeldarts General Presentation
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.
for reading
Thank you
AlexKukharenko
Designteamasaserviceforfastmovingstartups
alex@pixeldarts.com
Pixeldarts GeneralPresentation

Contenu connexe

Similaire à How to start designing for Apple Vision Pro

Getting started with Verold and Three.js
Getting started with Verold and Three.jsGetting started with Verold and Three.js
Getting started with Verold and Three.js
Verold
 
iPhone/iPad Development with Titanium
iPhone/iPad Development with TitaniumiPhone/iPad Development with Titanium
iPhone/iPad Development with Titanium
Axway Appcelerator
 
iOS-iPhone documentation
iOS-iPhone documentationiOS-iPhone documentation
iOS-iPhone documentation
Raj Dubey
 
iPhone application development training day 1
iPhone application development training day 1iPhone application development training day 1
iPhone application development training day 1
Shyamala Prayaga
 

Similaire à How to start designing for Apple Vision Pro (20)

Getting started with android studio
Getting started with android studioGetting started with android studio
Getting started with android studio
 
Visual Studio for Mac (AltConf 2017)
Visual Studio for Mac (AltConf 2017)Visual Studio for Mac (AltConf 2017)
Visual Studio for Mac (AltConf 2017)
 
Final NEWS.pdf
Final NEWS.pdfFinal NEWS.pdf
Final NEWS.pdf
 
Final NewsApp.pdf
Final NewsApp.pdfFinal NewsApp.pdf
Final NewsApp.pdf
 
Flash Builder and Flex Future - Multiscreen Development
Flash Builder and Flex Future - Multiscreen DevelopmentFlash Builder and Flex Future - Multiscreen Development
Flash Builder and Flex Future - Multiscreen Development
 
Android Web app
Android Web app Android Web app
Android Web app
 
A brief look at visionOS - How to develop app on Apple's Vision Pro
A brief look at visionOS - How to develop app on Apple's Vision ProA brief look at visionOS - How to develop app on Apple's Vision Pro
A brief look at visionOS - How to develop app on Apple's Vision Pro
 
Iphone development
Iphone developmentIphone development
Iphone development
 
Devcon
DevconDevcon
Devcon
 
Hello world ios v1
Hello world ios v1Hello world ios v1
Hello world ios v1
 
Getting started with Verold and Three.js
Getting started with Verold and Three.jsGetting started with Verold and Three.js
Getting started with Verold and Three.js
 
Loopback: An Easy and Robust Mobile Backend - Michael Hantler & Aviv Callande...
Loopback: An Easy and Robust Mobile Backend - Michael Hantler & Aviv Callande...Loopback: An Easy and Robust Mobile Backend - Michael Hantler & Aviv Callande...
Loopback: An Easy and Robust Mobile Backend - Michael Hantler & Aviv Callande...
 
Mobile Learning Development Tools
Mobile Learning Development ToolsMobile Learning Development Tools
Mobile Learning Development Tools
 
Beginning Real World iOS App Development
Beginning Real World iOS App DevelopmentBeginning Real World iOS App Development
Beginning Real World iOS App Development
 
Extending your apps to wearables - DroidCon Paris 2014
Extending your apps to wearables -  DroidCon Paris 2014Extending your apps to wearables -  DroidCon Paris 2014
Extending your apps to wearables - DroidCon Paris 2014
 
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CA
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CAAppcelerator iPhone/iPad Dev Con 2010 San Diego, CA
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CA
 
iPhone/iPad Development with Titanium
iPhone/iPad Development with TitaniumiPhone/iPad Development with Titanium
iPhone/iPad Development with Titanium
 
iOS-iPhone documentation
iOS-iPhone documentationiOS-iPhone documentation
iOS-iPhone documentation
 
Top 10 Flutter App Tools To Know About In 2022.pptx
Top 10 Flutter App Tools To Know About In 2022.pptxTop 10 Flutter App Tools To Know About In 2022.pptx
Top 10 Flutter App Tools To Know About In 2022.pptx
 
iPhone application development training day 1
iPhone application development training day 1iPhone application development training day 1
iPhone application development training day 1
 

Plus de Pixeldarts

Plus de Pixeldarts (9)

10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
The Consequences of Neglecting Cookie Consent Dialogs
The Consequences of Neglecting Cookie Consent DialogsThe Consequences of Neglecting Cookie Consent Dialogs
The Consequences of Neglecting Cookie Consent Dialogs
 
A Simple Guide to Achieving Your Goals in 2024: Learning from Personal Success
A Simple Guide to Achieving Your Goals in 2024: Learning from Personal SuccessA Simple Guide to Achieving Your Goals in 2024: Learning from Personal Success
A Simple Guide to Achieving Your Goals in 2024: Learning from Personal Success
 
2024 design trends i am sick of | Anti-trends
2024 design trends i am sick of | Anti-trends2024 design trends i am sick of | Anti-trends
2024 design trends i am sick of | Anti-trends
 
Colors of the Web: 5 Trending Hues for 2024 Interfaces
Colors of the Web: 5 Trending Hues for 2024 InterfacesColors of the Web: 5 Trending Hues for 2024 Interfaces
Colors of the Web: 5 Trending Hues for 2024 Interfaces
 
3 Dark Design Templates
3 Dark Design Templates3 Dark Design Templates
3 Dark Design Templates
 
3 Easy alternatives to Blender 3D Software for designers
3 Easy alternatives to Blender 3D Software for designers3 Easy alternatives to Blender 3D Software for designers
3 Easy alternatives to Blender 3D Software for designers
 
Top 6 Trends you should be paying attention to in 2024.pdf
Top 6 Trends you should be paying attention to in 2024.pdfTop 6 Trends you should be paying attention to in 2024.pdf
Top 6 Trends you should be paying attention to in 2024.pdf
 

Dernier

如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
Famous and Important UIUX Laws for your next Digital product
Famous and Important UIUX Laws for your next Digital productFamous and Important UIUX Laws for your next Digital product
Famous and Important UIUX Laws for your next Digital product
Think 360 Studio
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
JIT KUMAR GUPTA
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
yzeoq
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
Amil baba
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
Amil baba
 

Dernier (20)

Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD Portfolio
 
Naer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing ProjectNaer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing Project
 
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
 
Mark Zuckerberg Carthago Delenda Est Shirt
Mark Zuckerberg Carthago Delenda Est ShirtMark Zuckerberg Carthago Delenda Est Shirt
Mark Zuckerberg Carthago Delenda Est Shirt
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
Cascading Style Sheet(CSS) PDF Notes by Apna College
Cascading Style Sheet(CSS) PDF Notes by Apna CollegeCascading Style Sheet(CSS) PDF Notes by Apna College
Cascading Style Sheet(CSS) PDF Notes by Apna College
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic design
 
Famous and Important UIUX Laws for your next Digital product
Famous and Important UIUX Laws for your next Digital productFamous and Important UIUX Laws for your next Digital product
Famous and Important UIUX Laws for your next Digital product
 
CADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdfCADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdf
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
 
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
 
Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678
 
Onyx Tiles Where Elegance Meets Durability
Onyx Tiles Where Elegance Meets DurabilityOnyx Tiles Where Elegance Meets Durability
Onyx Tiles Where Elegance Meets Durability
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-IN
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
 

How to start designing for Apple Vision Pro

  • 1. Pixeldarts General Presentation How to start designing for Apple Vision Pro
  • 2. Pixeldarts General Presentation Documentation and Setup Access official documentation first: https://developer.apple.com/visionos/learn https://developer.apple.com/videos/play/ wwdc2023/10260/
  • 3. Pixeldarts General Presentation 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.
  • 4. Pixeldarts General Presentation 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. 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.
  • 5. Pixeldarts General Presentation 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. 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.
  • 6. Pixeldarts General Presentation Add some objects, apply textures and add light. You can also animate almost everything here.
  • 7. Pixeldarts General Presentation If you want to work with animations, open the State Machine, create events on the object to configuring its properties.
  • 8. Pixeldarts General Presentation Additionally, you can configure an environment by using some pre-existing samples in a library.
  • 9. Pixeldarts General Presentation Prototypes created in Bezi work flawlessly on desktop computers, mobile AR and VR headsets, providing a universal user experience across multiple platforms.
  • 10. Pixeldarts General Presentation How to see interfaces from Bezi on Vision Pro 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.
  • 11. Pixeldarts General Presentation 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.

  • 12. Pixeldarts General Presentation 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.