# Overview

<figure><img src="https://2267467073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJTYM2H0ve8KmqJHIoHBt%2Fuploads%2FBaJuPT2a4al75hC4sRpp%2FMain%20View%20-%20Layout%208.png?alt=media&#x26;token=09331eb1-7875-4872-aa91-61cff1c892a2" alt=""><figcaption></figcaption></figure>

## 👋 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*](https://docs.floatgrids.com/features/typography)&#x20;
* FloatGrids uses a build-in color palette with all the colors defined. Find it in the Editor folder as   [*FloatGrids Color Palette*](https://docs.floatgrids.com/features/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 ](https://docs.floatgrids.com/features/typography)changes to all your components
* Bulk corner radius changes to all your components
* Ready-to-use panel [layouts](https://docs.floatgrids.com/layouts/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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.floatgrids.com/getting-started/overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.