Spatial Design System for Figma and Unity (UI)

Cross-platform VR/AR Design System for designers and developers

Context

FloatGrids addresses two critical challenges in the XR (Extended Reality) space. Firstly, it resolves the scarcity of tools for achieving consistency and scalability in XR user interfaces for designers and developers. Secondly, it provides a solution to the absence of comprehensive guidelines for UI designers working on XR applications.

Design solution

I designed and developed the design system in Figma and Unity, making sure the match between them was accurate. Delve into how FloatGrids enhances the UX/UI development process by offering a seamless and user-friendly approach to crafting immersive XR interfaces.

Demo Homepage

Buttons

Text styles

List template

Icons

Cards

Snackbar

Buttons

Card

Checkbox

Dropdown

Keyboard

3-Comumn Layout

List Layout

List Template

Sidebar

Modal

Gallery Template

Onboarding Template

Main Panel Layout

Progress Bar

Radio Button

Slider

Spinner

Text Field

Toggle

Tooltip

Figma and Unity files

FloatGrids was designed with a primary focus on achieving consistency and scalability in XR interfaces. This necessitated precise alignment between Figma and Unity, ensuring shared UI foundations and nomenclature for tokens, UI components, and templates.

Color palette in Figma

Cards and icons in Figma

Comfort zones guidelines in Figma

Comfort UI area in Figma

UI components in Unity

Demo scene in Unity

GitBook documentation

While the setup of FloatGrids is straightforward, it can be intricate for new Unity users. The documentation not only covers the setup but also provides video tutorials for advanced features and examples. Impressively, this documentation is accessed by 120 visitors monthly, showcasing its value and relevance in aiding users.