Creating a Design System for VR Interfaces

Virtual Reality | Prototyping | Design Systems | Unity

TLDR

Virtual reality (VR) training relies on consistent, reusable interface elements to keep learning experiences clear and engaging. At SkillsVR, many VR mechanics were reused across projects, but without a formal system, styles and interactions often drifted.

To address this, I built the company’s first VR design system—defining a brand-aligned visual language, spatial sizing standards, and a shared component library in both Figma and Unity. The result was a scalable process that improved communication between designers and developers, streamlined component management, and accelerated the production of VR learning experiences.

My Role

UX designer responsible for the full design of a visual-scripting tool built on Unity, including 5 custom Unity panels, added functionality to existing Unity panels, and the default workflow.

Team

1 UX designer, 1 product manager, 3 learning designers, 4 3D artists, and 5 unity developers.

Timeline

6 months total (working parallel to other projects).

2 months of research on evolving VR accessibility recommendations.
3 months of style & component iteration with ongoing interface projects.
1 month of documenting & collaborating with developers for process implementation.

Impact

A scalable, cross-functional process.

Initial component library of 67 Unity Prefabs with cross-functional management process defined.
Accessible style and spatial sizing guidelines, with conversion standards of 2D to 3D measurements.
Ownership and buy-in from 3 cross-functional teams.

Solution Highlights

The resulting process was a culmination of many small wins in how to translate traditional 2D interface design practices into VR. Examples being:

A conversion from pixel sizing of Figma and screen resolution of devices to metric sizing in Unity, and to degree units for field-of-view and ergonomic standards.
An atomic design process for managing style elements and live components between Figma and Unity.

Process flowchart for a design system with Unity.

Flowchart of design process detailing support of design system, developer handoff, and learning design requirements.

Foundational style components for Unity design system.

Foundational styles and atom components to start iterative library.

Example Interfaces

Mechanic interfaces build from style guid in action.