Design Process and Tools
SAP Fiori for visionOS / Foundation / Design Process and Tools
Designing a UI for XR applications varies depending on the type of application.
2D Spatial Applications
The design process for 2D spatial applications is similar to traditional 2D applications on platforms like iPadOS and macOS.
Design Scope
Start with validated requirement definitions and an information architecture to outline the application's UX architecture, regardless of the platform. This sets the stage for identifying possible adjustments for the visionOS platform. While achieving feature parity on visionOS is the goal, there are areas where user experience can be enhanced for 2D spatial applications:
- Infinite Canvas: Users expect to be able to resize the application window in their space. An adaptive design is essential to offer an enjoyable user experience that maximizes the window's surface area. For more details, refer to chapter “3.1 Adaptive Design”.
- System Multi-Window: Users can open multiple applications simultaneously and arrange them within their space, even overlapping them in the x, y, and z axes. This can complicate window management as there are currently no system-wide window management features (similar to macOS's Mission Control or iPadOS's Stage Manager). It’s advisable to clearly label your application window (e.g., using titles in the navigation bar) and maintain safe areas at the window's edges for easy grabbing interactions without interfering with tab/scroll zones.
- Application Multi-Window: Applications can spawn multiple windows to support advanced use cases requiring persistent tool panes or auxiliary information panels. Considering the window management challenges mentioned above, it is recommended to limit the usage of multiple windows by connecting them to each other (setting fixed spatial relationships and distances), using additional windows mainly for persistent views (like toolbars or complementary visualizations), and making it clear how users can open and close these windows. Another important factor is cross-platform design: since only macOS supports multiple windows, additional considerations for mapping the information architecture to other platforms (including development and testing efforts) might be necessary. For more information on this topic, see “Application Window Management”.
Design Resources
To design UIs for visionOS, it's best to begin with Apple's visionOS design kit and use tools like Figma or Sketch. You can find the design template files at the following links:
- Download the visionOS design kit: Apple Design Resources
- Sketch: Add to Sketch Library
- Figma: Open in Figma
Immersive Applications
Designing immersive applications with 3D content involves a different set of steps, tools, and assets. This guide provides initial recommendations on tooling.
Tools
For designing 3D assets and applications, Apple offers:
- Reality Composer Pro (included with Xcode)
- Reality Composer for iOS and iPadOS
Additionally, some third-party tools currently being evaluated include:
- ShapesXR (particularly useful for creating VR prototypes with Meta Quest)
- Twinmotion
- Unity