Overview

FloatGrids is a UI framework for VR and AR that caters to the needs of both designers and developers and can be utilized on both Figma and Unity platforms.

👋 Hello!

FloatGrids's main goal is to simplify the process of designing and developing XR user interfaces (UI) for virtual or augmented reality applications, while also maintaining consistency, scalability, and visually appealing UI components.

How to use it?

All the font styles, color names, icons, layouts and UI components exists in both Figma and Unity. So you can either make your design in Figma and then look for those components in Unity or do the design directly in Unity.

• FloatGrids uses Text Mesh Pro with a customized Style Sheet. Find it in the Editor folder as FloatGrids Text Style Sheet

• FloatGrids uses a build-in color palette with all the colors defined. Find it in the Editor folder as FloatGrids Color Palette

• For better results use URP and, if possible, set Render Scale to 1.4 and anti Aliasing to 2x

• Go to Scenes and open UI Components scene to have a big picture of all the UI components

• Go to Scenes and open Demo Scene to take a look at all the components being used. (Requires XRI and URP)

• Same nomenclature of all the elements in both Figma and Unity

• Bulk typography changes to all your components

• Bulk corner radius changes to all your components

• Ready-to-use panel layouts.

You can use FloatGrids as it is or you can customize it as you wish. Follow the documentation to learn more about how to get the most out of FloatGrids.

FloatGrids structure

FloatGrids is an atomic design system in every sense, both visually and technically. This means that the entire structure is encapsulated from smaller to larger groups.

UI system structure

• UI Components: All the UI controls. Ex: Text fields, Buttons, Tables, Checkboxes...

• Views: A group of UI components meant to solve a problem, usually liying on a panel. Ex: Gallery, Sidebar, Onboarding...

• Layouts: A particular panel organization that will nest the views. The overall visual structure of your app.

• Themes (Coming soon): A full navegable and styilized layout ready to be filled with content.

Prefabs structure

Most of the UI components have properties. For example, there are 8 different variants of buttons in 3 different sizes; however, all of them share the same core structure. This core structure is defined in what FloatGrids call Primitive Prefabs. This allows you to customize the core size, corners, and shape for all the variants of that Primitive prefab simultaneously.

• Primitive Prefab (Primitive Button Large)

  • Variant 1 (Primary Button)

  • Variant 2 (Secondary Button)

  • Variant 3 (Success button)

  • Variant 4 (Error button)