Skill Guide

Prototyping with Figma, ShapesXR, or Bezi for spatial interfaces

The skill of using specialized digital tools (Figma, ShapesXR, Bezi) to create interactive, testable mockups of user interfaces designed for spatial computing environments like AR, VR, and mixed reality.

This skill is critical for de-risking development in the nascent and high-cost spatial computing sector, enabling rapid iteration on 3D interaction models before engineering commitment. It directly impacts product-market fit and R&D efficiency by validating spatial user experiences early.

1 Careers

1 Categories

8.7 Avg Demand

15% Avg AI Risk

How to Learn Prototyping with Figma, ShapesXR, or Bezi for spatial interfaces

Focus on understanding 3D space fundamentals (depth, scale, spatial audio cues), mastering a core 2D-to-3D prototyping tool like Figma with spatial plugins, and learning the basic interaction patterns for spatial UI (gaze, pointer, hand tracking).

Practice translating complex user flows into spatial narratives, prototyping with real-time collaboration in VR using ShapesXR, and integrating motion and transition principles to guide user attention in 3D space. Avoid the common mistake of porting flat 2D UI paradigms directly into spatial environments.

Lead prototyping for cross-platform spatial ecosystems, develop proprietary interaction frameworks for novel hardware, and mentor teams on spatial storytelling and behavioral prototyping using advanced tools like Bezi for logic and state management. Focus on aligning prototypes with technical constraints of target platforms (e.g., Quest, Vision Pro).

Practice Projects

Beginner

Project

Spatial Music Player UI

Scenario

Design and prototype a music player interface that appears floating in a user's living room via AR, allowing them to control playback with gaze and pinch gestures.

How to Execute

1. Use Figma to design the 2D UI components (album art, controls). 2. Use a plugin like 'Spatial' or 'Figma to ShapesXR' to extrude and position these elements in 3D space. 3. In ShapesXR, add interaction hotspots for gaze and create simple click/pinch event triggers. 4. Test the prototype on a mobile AR viewer or VR headset for basic usability.

Intermediate

Project

Collaborative VR Whiteboard

Scenario

Prototype a multi-user virtual whiteboard application where remote team members can draw, place sticky notes, and manipulate 3D models in a shared virtual space.

How to Execute

1. In ShapesXR, block out the virtual room environment and whiteboard canvas. 2. Prototype core interactions: drawing with controller rays, spawning/manipulating 3D sticky notes, and basic object snapping. 3. Use Bezi or ShapesXR's state system to prototype user roles (e.g., who can edit) and save/load different whiteboard states. 4. Conduct a remote user test with two participants to evaluate collaboration flows and spatial awareness.

Advanced

Project

Cross-Reality (XR) Maintenance Manual

Scenario

Architect a prototype for a complex industrial maintenance manual that overlays step-by-step 3D holographic instructions onto a physical machine, with supporting data panels accessible in a companion VR view.

How to Execute

1. Map the physical machine's spatial coordinates and design overlay anchors in a tool like Bezi. 2. Create a stateful prototype where each maintenance step triggers specific holographic highlights, part callouts, and instructional animations. 3. Build a companion VR dashboard in Figma/ShapesXR that shows real-time sensor data, schematics, and video feeds linked to the AR steps. 4. Develop a logic flow in Bezi that synchronizes the AR and VR experiences based on user progress and system alerts, then stress-test the prototype with domain experts for technical accuracy.

Tools & Frameworks

Software & Platforms

Figma (with Spatial Plugins like 'Spatial', 'Reality Composer')ShapesXRBezi

Figma is the standard for initial 2D UI asset creation and layout; its plugins bridge to 3D. ShapesXR is the premier tool for immersive, collaborative VR/AR prototyping directly in a headset. Bezi is a advanced prototyping tool for adding logic, variables, and complex state management to spatial prototypes.

Interaction & Design Frameworks

Gaze-and-Dwell Input ModelSpatial Audio PrototypingWorld-Anchored UI vs. Body-Anchored UI

Apply these frameworks to define core interaction paradigms. Use gaze models for hands-free contexts, spatial audio for non-visual feedback, and define whether UI is anchored to the physical world or follows the user to solve specific spatial design problems.

Interview Questions

Answer Strategy

The candidate should demonstrate a structured workflow: 1) Ideation and low-fidelity blocking in ShapesXR for rapid spatial testing. 2) Creation of polished 2D UI elements and brand assets in Figma. 3) Importing assets into Bezi or ShapesXR to build the interactive tutorial sequence with timed cues, gaze triggers, and spatial audio. 4) A/B testing of tutorial variants. The answer must justify tool choice (e.g., 'ShapesXR for rapid spatial iteration, Bezi for complex trigger logic'). Sample: 'I start with low-fidelity blocking in ShapesXR to nail the spatial pacing and user focus. I create all detailed UI components in Figma for brand consistency. Then I bring them into Bezi to build the interactive sequence, as its logic system is superior for managing tutorial steps, conditional paths, and spatial audio triggers. I then test two variants to see which onboarding flow achieves faster user comprehension.'

Answer Strategy

Tests the candidate's user empathy, spatial UX diagnostics, and iterative problem-solving. The response should identify root causes like poor depth cues, erratic motion, or violating spatial memory, and cite specific fixes. Sample: 'Users reported our inventory menu in VR was hard to navigate. Diagnosis in the prototype revealed two issues: buttons had inconsistent depth relationships, and sub-menus appeared abruptly, breaking spatial continuity. I fixed it by implementing a consistent 'UI follows gaze with a slight delay' model and used a subtle spatial audio 'whoosh' and opacity fade for menu transitions. This provided predictable spatial anchoring and smooth visual cues, resolving the disorientation.'