# Installation

There are 3 basics steps you need to follow to install FloatGrids in Unity. As for Figma, nothing to install, just get the file!

## 1. Download FloatGrids

Download the Unity package to start implementing FloatGrids. Download the Figma file to start designing your app. Remember, all the font styles, color names, icons, layouts and UI components exists in both Figma and Unity under the same nomenclature.

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Download the Unity Package</td><td><a href="/files/h2RkIaqV5ulUfCWEHxxL">/files/h2RkIaqV5ulUfCWEHxxL</a></td><td><a href="https://floatgrids.com/products/floatgrids-unity-package">https://floatgrids.com/products/floatgrids-unity-package</a></td></tr><tr><td>Download the Figma file</td><td><a href="/files/PNZQu9hJzNEFycOYf6Km">/files/PNZQu9hJzNEFycOYf6Km</a></td><td><a href="https://www.figma.com/community/file/1087168911388362853">https://www.figma.com/community/file/1087168911388362853</a></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

Or get the Figma file directly from the Figma Community [here](https://www.figma.com/community/file/1087168911388362853)

## 2. Import FloatGrids in Unity

Drag and drop the FloatGirds package into your project.&#x20;

FloatGrids is device agnostic so it works with any system compatible with Unity UI.&#x20;

## 3. Make sure that XRI and URP are installed to use the interactable demo and to clean the console errors.

FloatGrids includes both XRI and URP, however, sometimes some resources might be missing. If you get the console errors, just go to Window/Package Manager and look for XR Interaction Toolkit and Universal Render Pipeline in Unity Registry, then install them both for the errors to disappear.

The interactable demo will be ready for you to try out! Find it in Scene/FloatGrids Demo

{% hint style="info" %}
If the errors persist, go to Widow/Package Manager and reinstall them
{% endhint %}


# 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.

<figure><img src="/files/RN6olSbFYdUJMHfOBsa3" 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*](/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*](/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 ](/features/typography)changes to all your components
* Bulk corner radius changes to all your components
* Ready-to-use panel [layouts](/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)


# Figma file

FloatGrids Figma file is a component based file. It uses variants and Interactive components, all the interactions between components are already done.

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Download FloatGrids Figma file</td><td><a href="/files/PNZQu9hJzNEFycOYf6Km">/files/PNZQu9hJzNEFycOYf6Km</a></td><td><a href="https://www.figma.com/community/file/1087168911388362853">https://www.figma.com/community/file/1087168911388362853</a></td></tr></tbody></table>

## Learn how to design for XR using the Figma file

In the FloatGrids Figma file you'll find recommendations, examples and best practices about how to design UI for XR apps. You'll learn concepts such as distances, focus area, text sizes or components sizes.

<figure><img src="/files/ZjWp9ia2XJwcnfW7EmiI" alt=""><figcaption><p>7 ready-to-use layouts</p></figcaption></figure>

<figure><img src="/files/Luzxr17GqBI5nFrkrsG4" alt=""><figcaption><p>FloatGrids foundations</p></figcaption></figure>

<figure><img src="/files/vCnvTv4XmMIvgUcotDX8" alt=""><figcaption><p>10 different button styles </p></figcaption></figure>

<figure><img src="/files/oCn44vb3a9vaM3nj971c" alt=""><figcaption><p>Attention areas guidelines</p></figcaption></figure>


# Demo

We've developed a demo in both Figma and Unity so that you can check how FloatGrids performs with its own UI or with your own.

{% embed url="<https://youtu.be/CUZpp4jdtPU>" %}

{% hint style="info" %}
**Download the Meta Quest app** \
Try the demo directly in VR \
\
[Download app](https://www.oculus.com/experiences/quest/6598652286811536/)
{% endhint %}

## Unity Demo

Within the folder Design System you'll find a scene called Demo.&#x20;

<figure><img src="/files/PYwacfUHhdTjMKAAlMaK" alt=""><figcaption><p>Demo in Unity</p></figcaption></figure>

## Figma Demo prototype

In the Figma file, go to the page called Demo, hit play!

<figure><img src="/files/pUAPPZmi9F1oTij6nJ5l" alt=""><figcaption><p>Demo in Figma</p></figcaption></figure>

{% hint style="info" %}
**Download the Meta Quest app** \
Try the demo directly in VR \
\
[Download app](https://www.oculus.com/experiences/quest/6598652286811536/)
{% endhint %}


# XR UI design guidelines

Let's get the basics to start designing stunning UI for XR apps by reading the following articles wrote by Albert Mauri, FloatGrids' creator and designer.

{% embed url="<https://medium.com/user-experience-design-1/3-key-concepts-for-vr-apps-bdd3ddc9e6aa>" %}

{% embed url="<https://medium.com/user-experience-design-1/lets-design-xr-ui-in-figma-and-bring-it-to-xr-with-no-code-a123b9b647ab>" %}

{% embed url="<https://medium.com/user-experience-design-1/ux-navigation-patterns-in-vr-jumping-between-scenes-3a1fd8df0151>" %}

{% embed url="<https://medium.com/design-bootcamp/ux-ui-layout-patterns-in-vr-c40d327c05e3>" %}

{% hint style="info" %}
You also can find best practices explained directly in the [Figma file](https://www.figma.com/community/file/1087168911388362853)
{% endhint %}


# Tutorials

### Changing corner radius to all buttons at once

{% embed url="<https://youtu.be/C7BKAVRWULo>" %}

### Using your own tipography across all UI components at once

{% embed url="<https://youtu.be/aou16MuTWts>" %}

### Customizing Sidebar menu

{% embed url="<https://youtu.be/sgkm7hi2HXk>" %}

### Using icons in buttons

{% embed url="<https://youtu.be/zvC9SW5glcg>" %}


# Customization Overview

Customize Color, font styles, typographies and corners to all the UI components at once.

{% embed url="<https://www.youtube.com/playlist?list=PLwFBArvJ7tmLkW4Ff84XVr1nXwiioYWjY>" %}

## UI components scene

Use the UI Components scene to get a big picture of all the components so that you can see your changes altogether.

Find the UI Components scene in FloatGrids/Design System/Scenes/UI Components

<figure><img src="/files/MGxGPbl4qictDY17IkXP" alt=""><figcaption><p>UI Components scene</p></figcaption></figure>


# Color Palette

Token based color palette in both Figma and Unity.

FloatGrids uses a token-based color palette so every token has a base color as a parent. You can find this color palette under the same nomenclature in both Figma and Unity.

## FloatGrids color palette

### Tokens

<figure><img src="/files/Rcpd9oAYfCzSCaSGkl6d" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/tjgzficnlhvlZGMlJVlv" alt=""><figcaption></figcaption></figure>

### Tokens in Figma and Unity

| Color palette in Unity           | Color palette in Figma           |
| -------------------------------- | -------------------------------- |
| ![](/files/GLXWNpOCJ5hqSWkZcX3M) | ![](/files/SlSYLzJMh82WWKPNqYcD) |

### Base colors

<figure><img src="/files/6Ujir0IdoqC3nsfS36zd" alt=""><figcaption></figcaption></figure>

## How to create your own base colors

1. Get a 10 color range color palette [here](https://uicolors.app/create).&#x20;

{% hint style="info" %}
**Reduce saturation for good contrast**

Colors tend to be brigther in VR than they are in desktop or mobile devices. If your Primary color (500) looks too bright in Unity, in the link provided above, go to Edit/Saturation/All Shades and reduce the saturation. Make some tests in Unity to see the actual result
{% endhint %}

<figure><img src="/files/ksOkliFDz04O03H8PYsK" alt=""><figcaption><p>Generated color palette</p></figcaption></figure>

<figure><img src="/files/QsX0sXKN8IuKrX8XpjJ8" alt=""><figcaption><p>In the Edit page, reduce the saturation if the Primary was too shine</p></figcaption></figure>


# Typography

FloatGrids include in the Unity package 9 different fonts for you to choose. However you can use your own, whatever you do, you can apply it to all the UI components with a couple of clicks.

{% hint style="info" %}
FloatGrids uses Text Mesh Pro to manage font styles. Be sure to have[ Text Mesh pro installed](broken://pages/yoNhZbJd8J8ZSAPjPuQX#2-set-up-text-mesh-pro) before you continue.
{% endhint %}

## Font Styles

FloatGrids uses Inter as a default font. Besides, you can find another 8 fonts ready-to-use in the Unity package or use your own.

<figure><img src="/files/vIfe3xC7OOWxPkyggj5Z" alt=""><figcaption></figcaption></figure>

### Unity Style Sheet

All the FloatGrids text styles are defined in the customized Text Mesh Style Sheet so that you can use them in Unity directly from the Inspector. Check [Installation ](https://docs.floatgrids.com/features/pages/yoNhZbJd8J8ZSAPjPuQX#time-to-tell-unity-which-font-we-want-to-use.)so you are sure you are using the FloatGrids Style Sheet.

<figure><img src="/files/WS3o9nVCxX2OX6C5WEFu" alt=""><figcaption></figcaption></figure>

## Using one of the ready-to-use FloatGrids fonts

Let's see how you can start using any of the FloatGrids fonts in all your UI components in a couple of clicks.

{% embed url="<https://youtu.be/jHAYgN3_o38>" %}

* Delete the current font used by Text Mesh Pro
* Go to Edit/Project Settings/Text Mesh Pro/Settings and in Default Font Asset section select the Regular version of the font you want to use
* Click Play and then Play again to stop the reproduction
* All set!

## Using your own font

{% embed url="<https://youtu.be/aou16MuTWts>" %}

In order to use your own font, you need to convert it to text Mesh Pro, and then apply it to Edit/Project Settings/Text Mesh pro/Settings/Default Font Asset.

* Convert your font into Text Mesh Pro. Window/Text Mesh Pro/Font Asset Creator
* Assign font assets to variants. Select your Regular font and assign your TMP assets to the Semi-bold (600) and Bold (700) variants

<figure><img src="/files/ssJA2oor8OSlJFL25aux" alt=""><figcaption></figcaption></figure>

* Go to Edit/Project Settings/Text Mesh pro/Settings/Default Font Asset and set your Regular font asset.

<figure><img src="/files/4xU8mm2LNDMOEfyAuCOe" alt=""><figcaption></figcaption></figure>

* Remove the current font and all its assets from the project. Unity will replace them with your new font assets.
* Click Play to apply the changes in the Editor.

<figure><img src="/files/2ncaHUIFyugKQrpGVxL9" alt=""><figcaption></figcaption></figure>


# Corners

Apply corners to the primitive prefabs to get them applied to all your components.

## Changing corners

{% embed url="<https://youtu.be/C7BKAVRWULo>" %}

## Corners Structure

* Radius: From 4px to 22px
* Rounded: Sprites adapted to FloatGrid button sizes
* Masks: Sprites used for cases when not all the corners are equal

Find them in FloatGrids/Design System/Sprites/Corners

### Corner Radius

<figure><img src="/files/u46ZRpk6VLByKWgAm5O3" alt=""><figcaption></figcaption></figure>

### Variable

<figure><img src="/files/M9lcJ6ds3ggvCr8X4f6Y" alt=""><figcaption></figcaption></figure>


# UI Components

FloatGrids has, so far, 32 UI components, all of them are interactive in the Fima file and ready-to-use in Unity.

## Customize FloatGrids UI Components

* FloatGrids uses Prefabs to set the baselines of the components.&#x20;
* Some components have variants in a form of Prefab Variants. These components are customized using the Primitive Prefabs. In these cases, use the variant in your scene.

{% hint style="info" %}
**Find Primitive prefabs in**\
FloatGrids/Design System/Customization/Primitive UI Components

**Find the components in**\
FloatGrids/Design System/UI Components
{% endhint %}

For example, there are 10 different styles of buttons, and each style has three variants, Large, Medium and Small. So, at the end of the day you have 30 different buttons. All these buttons are variants of only 3 prefabs, the primitive prefabs. So, you can change font style, corners or sizes to all these 30 buttons just by editing the 3 primitives prefabs.&#x20;

* Edit Primitive prefabs to change size, spaces, structure and font styles to all Alerts at once.&#x20;
* Edit each variant to customize color and icons.&#x20;
* Find Primitive prefabs in FloatGrids/Design System/Customization/Primitive UI Components

{% hint style="info" %}
Some components, such as Dropdown for instance, don't have variants, so there is no primitive prefab for them. If you want to customize these components, just edit the prefab.
{% endhint %}

{% embed url="<https://youtu.be/M0EwV1bg4mk>" %}
Example of primtives applied to Buttons
{% endembed %}


# Icons

FloatGrids uses the Material Icons set. However you can perfectly use your own.

Find the icons in FloatGrids/Design System/Customization/Icons

<figure><img src="/files/WYzqpvUNblnoj5BxLVAc" alt=""><figcaption></figcaption></figure>


# Logo

Assign your logo sprite in the prefab Product Logo so it'll get applied automatically to the menu.

## How to add my logo

* Name your PNG logo file as: product\_logo.png
* Delete the file product\_logo.png in FloatGrids/Design System/Customization/Logo
* Add the your new file product\_logo.png in FloatGrids/Design System/Customization/Logo
* Select product\_logo.png and in the inspector:
  * Texture type: Sprite (2D and UI)&#x20;
  * Sprite Mode: Single
* All set!

Find the Product Logo prefab in FloatGrids/Design System/Customization/Logo/Product Logo

<figure><img src="/files/DEYikOUh2v9YRLyBO0UE" alt=""><figcaption></figcaption></figure>


# UX Resources

FloatGrids includes UX features to ensure that panels are properly positioned relative to the user's point of view and that their size fits perfectly within the user's field of vision.

### Resources

* Canvas Placement Unity component
* Panel Size Guidelines prefab

## Canvas Placement Unity component

The Canvas Placement component allows you to control the three key parameters of a canvas when positioning it in front of the user: distance, scale, and height. Canvas Placement utilizes the DMM system to scale the canvas proportionally to the distance.&#x20;

We recommend using a 4º angle for UIs placed between 0.65 cm and 2 meters.

{% hint style="info" %}
Remember to synchronize the scale with the distance to utilize the DMM system, where a pixel in Figma corresponds to a millimeter in Unity. Nevertheless, you can experiment with different scales if required.
{% endhint %}

<figure><img src="/files/GotHpTnPY26gIFvkAyoM" alt=""><figcaption></figcaption></figure>

### Watch it in action

<figure><img src="/files/FY83IrZzoiWhtrwdQV3V" alt=""><figcaption></figcaption></figure>

## Panel Size Guidelines prefab

The Panel Size Guidelines prefab serves as your assistant in managing the size of the UI relative to the user.

### How does it work?

Simply drag and drop the Panel Size Guidelines prefab into your scene, and it will automatically position itself to your camera using the [Canvas Placement component](#canvas-placement-unity-component). The prefab provides a visual representation of a grid with comfort zones, allowing you to position your UI accordingly and adjust as needed.

*Find it in FloatGrids/Design System/UX Resources*

<figure><img src="/files/eMuiGyOgIhFfljt4Bklz" alt=""><figcaption></figcaption></figure>

### Watch it in action

<figure><img src="/files/zQCNpW9ZahXADYpBeHNN" alt=""><figcaption></figcaption></figure>


# Overview

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-type="content-ref"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Alert</td><td><a href="/files/NBtwK9vEwlRfCGj191ui">/files/NBtwK9vEwlRfCGj191ui</a></td><td><a href="/pages/gHlo5lbwoJJhSAxBVMrk">/pages/gHlo5lbwoJJhSAxBVMrk</a></td><td><a href="/pages/gHlo5lbwoJJhSAxBVMrk">/pages/gHlo5lbwoJJhSAxBVMrk</a></td></tr><tr><td>Badge</td><td><a href="/files/GJmbcy06HnGxVjkKU14y">/files/GJmbcy06HnGxVjkKU14y</a></td><td></td><td><a href="/pages/2aDaB7MimignZIziEB2H">/pages/2aDaB7MimignZIziEB2H</a></td></tr><tr><td>Button</td><td><a href="/files/ic1sFu1423YfVTJFnzq4">/files/ic1sFu1423YfVTJFnzq4</a></td><td><a href="/pages/axzNX8GDQpV10Aue7TVW">/pages/axzNX8GDQpV10Aue7TVW</a></td><td><a href="/pages/axzNX8GDQpV10Aue7TVW">/pages/axzNX8GDQpV10Aue7TVW</a></td></tr><tr><td>Card</td><td><a href="/files/9STPev3jY2AGmjP2ipTy">/files/9STPev3jY2AGmjP2ipTy</a></td><td><a href="/pages/8AsGLiDY516dyi4HLaFW">/pages/8AsGLiDY516dyi4HLaFW</a></td><td><a href="/pages/8AsGLiDY516dyi4HLaFW">/pages/8AsGLiDY516dyi4HLaFW</a></td></tr><tr><td>Checkbox</td><td><a href="/files/sJZball5geVKnvJU8386">/files/sJZball5geVKnvJU8386</a></td><td><a href="/pages/eGBWg2j3mV4PGFGIvDjs">/pages/eGBWg2j3mV4PGFGIvDjs</a></td><td><a href="/pages/eGBWg2j3mV4PGFGIvDjs">/pages/eGBWg2j3mV4PGFGIvDjs</a></td></tr><tr><td>Contextual menu</td><td><a href="/files/kSFc7kWIdQFnJntXgMRQ">/files/kSFc7kWIdQFnJntXgMRQ</a></td><td></td><td><a href="/pages/IXKRXaHL7bO4hiE31vHf">/pages/IXKRXaHL7bO4hiE31vHf</a></td></tr><tr><td>Dropdown</td><td><a href="/files/9VePg4T7KjlGnwbKEcB9">/files/9VePg4T7KjlGnwbKEcB9</a></td><td><a href="/pages/vHmtU3JDm8JCIxW7xnwV">/pages/vHmtU3JDm8JCIxW7xnwV</a></td><td><a href="/pages/VGWOiRJIENu1GEhHSUWc">/pages/VGWOiRJIENu1GEhHSUWc</a></td></tr><tr><td>Empty State</td><td><a href="/files/8G2J7woFiFi37jq2ty7S">/files/8G2J7woFiFi37jq2ty7S</a></td><td></td><td><a href="/pages/GYF1XEmYrfgNLGnplSDQ">/pages/GYF1XEmYrfgNLGnplSDQ</a></td></tr><tr><td>Hero image (Coming soon in the Unity packge)</td><td><a href="/files/FDuEtFSZbSa3YLKNNPUa">/files/FDuEtFSZbSa3YLKNNPUa</a></td><td></td><td></td></tr><tr><td>Keyboard</td><td><a href="/files/HZlUfXaj4R3st0G9YNs9">/files/HZlUfXaj4R3st0G9YNs9</a></td><td></td><td><a href="/pages/n5oP9Np0bcZNU7pQGgPu">/pages/n5oP9Np0bcZNU7pQGgPu</a></td></tr><tr><td>Keypad</td><td><a href="/files/2jq0duhHe3D8jDIGBzgy">/files/2jq0duhHe3D8jDIGBzgy</a></td><td></td><td><a href="/pages/n5oP9Np0bcZNU7pQGgPu">/pages/n5oP9Np0bcZNU7pQGgPu</a></td></tr><tr><td>List</td><td><a href="/files/3BKhzikWkmKdCZ8COzXc">/files/3BKhzikWkmKdCZ8COzXc</a></td><td><a href="/pages/THIO5UCUWxT7L7OQGp5X">/pages/THIO5UCUWxT7L7OQGp5X</a></td><td><a href="/pages/THIO5UCUWxT7L7OQGp5X">/pages/THIO5UCUWxT7L7OQGp5X</a></td></tr><tr><td>Modal</td><td><a href="/files/TrK4XXRN4AnXWDjOFUKo">/files/TrK4XXRN4AnXWDjOFUKo</a></td><td><a href="/pages/xlrXKAAsI31CXjxSYozi">/pages/xlrXKAAsI31CXjxSYozi</a></td><td><a href="/pages/xlrXKAAsI31CXjxSYozi">/pages/xlrXKAAsI31CXjxSYozi</a></td></tr><tr><td>Panels</td><td><a href="/files/IZDWIhCtoGYhvIqmoKmd">/files/IZDWIhCtoGYhvIqmoKmd</a></td><td><a href="/pages/eQdvEtQ8zhHYNLhZIFNA">/pages/eQdvEtQ8zhHYNLhZIFNA</a></td><td><a href="/pages/eQdvEtQ8zhHYNLhZIFNA">/pages/eQdvEtQ8zhHYNLhZIFNA</a></td></tr><tr><td>Profile Image</td><td><a href="/files/g28QTQqX8v4cvAoWcEn1">/files/g28QTQqX8v4cvAoWcEn1</a></td><td><a href="/pages/ysMU6CyzkqMEkRrSMxB9">/pages/ysMU6CyzkqMEkRrSMxB9</a></td><td><a href="/pages/ysMU6CyzkqMEkRrSMxB9">/pages/ysMU6CyzkqMEkRrSMxB9</a></td></tr><tr><td>Progress</td><td><a href="/files/RB7d90wDzFldOCnO0HdE">/files/RB7d90wDzFldOCnO0HdE</a></td><td><a href="/pages/8CR8EHENqF97nNInsXt2">/pages/8CR8EHENqF97nNInsXt2</a></td><td><a href="/pages/8CR8EHENqF97nNInsXt2">/pages/8CR8EHENqF97nNInsXt2</a></td></tr><tr><td>Radio Group</td><td><a href="/files/0PieORyyYrScSQhbpLoT">/files/0PieORyyYrScSQhbpLoT</a></td><td><a href="/pages/zz6ssqGcECo1Ju2CheQj">/pages/zz6ssqGcECo1Ju2CheQj</a></td><td><a href="/pages/eGBWg2j3mV4PGFGIvDjs">/pages/eGBWg2j3mV4PGFGIvDjs</a></td></tr><tr><td>Slider</td><td><a href="/files/FdNzIMdO8hHYiKCwv3sn">/files/FdNzIMdO8hHYiKCwv3sn</a></td><td><a href="/pages/TZfjhS823fOM66JBWRGI">/pages/TZfjhS823fOM66JBWRGI</a></td><td><a href="/pages/TZfjhS823fOM66JBWRGI">/pages/TZfjhS823fOM66JBWRGI</a></td></tr><tr><td></td><td><a href="/files/vQS7o94eijQE37orG5ja">/files/vQS7o94eijQE37orG5ja</a></td><td></td><td></td></tr><tr><td>Text Field</td><td><a href="/files/tFRsZtkZU88PIGdRoYwW">/files/tFRsZtkZU88PIGdRoYwW</a></td><td><a href="/pages/VGWOiRJIENu1GEhHSUWc">/pages/VGWOiRJIENu1GEhHSUWc</a></td><td><a href="/pages/VGWOiRJIENu1GEhHSUWc">/pages/VGWOiRJIENu1GEhHSUWc</a></td></tr><tr><td>Tooltip</td><td><a href="/files/FVj0boVv2gKW2wMsAYUK">/files/FVj0boVv2gKW2wMsAYUK</a></td><td><a href="/pages/1Zy1zkFfHhCFvRXzAxEf">/pages/1Zy1zkFfHhCFvRXzAxEf</a></td><td><a href="/pages/1Zy1zkFfHhCFvRXzAxEf">/pages/1Zy1zkFfHhCFvRXzAxEf</a></td></tr></tbody></table>


# Alert

Use alerts to give feedback to your user. Alerts can be placed either in the space or on the panels.

{% hint style="info" %}
Use Primitives prefabs to customize all the variants at once

Use the variants in your scene
{% endhint %}

<figure><img src="/files/9PdLhxk53MFFBCZBTFOD" alt=""><figcaption></figcaption></figure>

## Alert structure in Unity

### Primitive Alert prefab

* Primitive Alert

*Find it in FloatGrids/Design System/Customization/Primitive UI Components/Alerts Primitive*

### Alert variants

*Find them in FloatGrids/Design System/UI Components/Alert*

<figure><img src="/files/o6e6kFzfF9C50VhMXJTk" alt=""><figcaption></figcaption></figure>

## Customization

* Edit the Primitive Alert prefab to change size, spaces, structure, corners and font styles to all Alerts at once.&#x20;
* Edit each variant to customize icons.&#x20;

###


# Badges

Badges are utilized to indicate states atop other components. FloatGrids offer 10 variants of badges for you to utilize, depending on the case.

<figure><img src="/files/GbcDv4sxjegO8Imd5IIS" alt=""><figcaption></figcaption></figure>

## Badge structure in Unity

### Prefabs

**Primitive**

* Badge Primitive

*Find it in FloatGrids/Design System/Customization/Primitive UI Components*

**Variants**

* Primary Badge
* Secondary Badge
* Toned Badge
* White Badge
* Black Badge
* Contrast Badge
* Success Badge
* Error Badge
* Warning Badge
* Info Badge

*Find them in FloatGrids/Design System/UI Components/Badge*


# Button

FloatGrids has 10 different styles of buttons plus three styles for icon buttons.

{% hint style="info" %}
Use Primitives prefabs to customize all the variants at once

Use the variants in your scene
{% endhint %}

{% tabs %}
{% tab title="Default" %}

<figure><img src="/files/tIbissrnMcGbeTXttWPS" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Icon Left" %}

<figure><img src="/files/sdCElQ0b1JF69tD6U7WP" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Icon Right" %}

<figure><img src="/files/I8HmUWgXXJaKRO1dermQ" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Icon Only" %}

<figure><img src="/files/5BDBHZBw4N33ZxI5FROs" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Button structure in Unity

### Primitive Button prefabs

* Primitive Large
* Primitive Medium
* Primitive Small&#x20;

*Find them in FloatGrids/Design System/Customization/Primitive UI Components/Button Primitive*

### Button variants

*Find them in FloatGrids/Design System/UI Components/Button*

## Using icons in buttons in Unity

You can add icons to your button by activating the game object Icon Left/Right. It'll automatically align and respect margins.

{% embed url="<https://youtu.be/zvC9SW5glcg>" %}

## Customization in Unity

{% embed url="<https://youtu.be/M0EwV1bg4mk>" %}

* Edit the Primitive Button prefab to change size, spaces, corners and font styles to all buttons at once.&#x20;
* Use -Filled sprites to change corners. Ex: use corners-8px-Filled sprite in the primitive prefabs to change all the corners to 8px.
* Edit each variant to customize color and icons.&#x20;

{% hint style="info" %}
**Good to know**

Editing the corners in the Primitive Button prefabs won't work for Secondary and Outlined variants since they use outlined borders. You must edit the variants instead.
{% endhint %}

###


# Card

Cards help in organizing content in a more visual way. Use Cards to visually separate one content to the other and make scanning easier for your users.

{% tabs %}
{% tab title="Title Card" %}

<figure><img src="/files/7YHcu0QeF9Vr432rxeJT" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Image Card" %}

<figure><img src="/files/wVSloRBq8UawzAW9i40d" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Solid Color Card" %}

<figure><img src="/files/ZXksIbnuudWsFOkqX35t" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Empty Card" %}

<figure><img src="/files/oaxFKI2FtppqLv47BcXq" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Card structure in Unity

### Prefabs

* Empty Card
* Image Card
* Solid Color Card
* Title Card
  * Variant: Title Card Long

*Find them in FloatGrids/Design System/UI Components/Card*


# Checkbox

{% hint style="info" %}
The Checkbox UI component doesn't use the Primitive/Variant system. Instead it uses two prefabs combined.
{% endhint %}

<figure><img src="/files/NhKoXTMU97kUKuAHpzI2" alt=""><figcaption></figcaption></figure>

## Checkbox structure in Unity

### Checkbox prefabs

* Checkbox Label
* Checkbox Mark

*Find them in FloatGrids/Design System/UI Components/Checkbox*

## Customization

* Edit the Checkbox prefabs to change size, spaces, structure, corners to all variants at once.


# Contextual Menu

<figure><img src="/files/wwWJwToQvOLtIY8L03nm" alt=""><figcaption></figcaption></figure>

## Contextual Menu structure in Unity

### Prefabs

* Contextual Menu
* Contextual Menu Item

*Find it in FloatGrids/Design System/UI Components/Contextual Menu*


# Divider

{% hint style="info" %}
The Divider UI component doesn't use the Primitive/Variant system. Instead it uses just one prefab
{% endhint %}

<figure><img src="/files/4YTjFmz1MUTjsPSL1zVR" alt=""><figcaption></figcaption></figure>

## Divider structure in Unity

### Divider prefab

* Divider

*Find it in FloatGrids/Design System/UI Components/Divider*


# Dropdown

{% hint style="info" %}
Use Primitives prefabs to customize all the variants at once

Use the variants in your scene
{% endhint %}

<figure><img src="/files/jcWqww8ywmYNVRjig2Tj" alt=""><figcaption></figcaption></figure>

## Dropdown structure in Unity

### Prefab

* Dropdown

*Find it in FloatGrids/Design System/UI Components/Dropdown*


# Empty State

Empty states are used to guide users towards an action. They take over a screen before items have been edded to it. Empty states have 4 main sections: Icon, title, description and actions.

<figure><img src="/files/4tFfbuG9iUGrzZr2zYGB" alt=""><figcaption></figcaption></figure>

## Adaptable

The Empty State component is fully customizable in both Figma and Unity. You can easily combine its sections and they will adapt to each other.

<figure><img src="/files/JtVzHAqGA1PcmqMWAl5G" alt=""><figcaption></figcaption></figure>

## Empty States structure in Unity

### Prefabs

* Empty State

*Find it in FloatGrids/Design System/UI Components/Empty State*


# Keyboard and keypad (WIP)

We're still working on the keyboard but so far you have it assembled in both Figma and Unity

<figure><img src="/files/pKP0MmTQWhujaLiJdpzv" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Use Primitives prefabs to customize all the variants at once

Use the variants in your scene&#x20;
{% endhint %}

## Keyboard structure in Unity

<figure><img src="/files/3AnCIHXJq70wL4O1apgN" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/8W9f5y8Z7v6O8vTZ7Wmk" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/hcVu02JfhkrRCtr3oVRH" alt=""><figcaption></figcaption></figure>

### Prefabs

<figure><img src="/files/ok1M2v9OwC9Qi0mbuZG9" alt=""><figcaption></figcaption></figure>

* Primitive Key
* Primitive Keyboard
* Primitive Keypad

**Find them in**&#x20;

* *FloatGrids/Design System/UI Components/Keyboard*
* *FloatGrids/Design System/Customization/Primitive UI Components*


# List

{% hint style="info" %}
Use Primitives prefabs to customize all the variants at once

Use the variants in your scene
{% endhint %}

{% tabs %}
{% tab title="List Group" %}

<figure><img src="/files/GJYsEfNVWyYpw2Yb1tQl" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="List Item Bolean" %}

<figure><img src="/files/PVo1YKTwwAGtBHSjWVbo" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="List Item Navigation" %}

<figure><img src="/files/hWt55nPAnZP4rHQCYNCm" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## List structure in Unity

### Primitive List prefabs

* Primitive List Item

*Find it in FloatGrids/Design System/Customization/Primitive UI Components/List Primitive*

### Prefab variants

* List Group
* List Item Bolean
* List Item Navigation

*Find them in FloatGrids/Design System/UI Components/List*

{% embed url="<https://youtu.be/_MkaJ3I4Cgk>" %}


# Navigation

{% hint style="info" %}
The Menu UI component doesn't use the Primitive/Variant system. Instead it uses two prefabs combined.&#x20;
{% endhint %}

<figure><img src="/files/Zj9xmvCCGNmebR8vbnJ5" alt=""><figcaption></figcaption></figure>

## Menu structure in Unity

### Menu prefabs

#### **Sidebar**

* Sidebar
* Sidebar Item

*Find them in FloatGrids/Design System/UI Components/Navigation/Sidebar*

#### **Navbar**

* Navbar
* Navbar Item

*Find them in FloatGrids/Design System/UI Components/Navigation/Navbar*

{% embed url="<https://youtu.be/sgkm7hi2HXk>" %}


# Modal

{% hint style="info" %}
The Modal UI component doesn't use the Primitive/Variant system. Instead it uses two prefabs combined.&#x20;
{% endhint %}

<figure><img src="/files/HzYmAlLElsN42HrPNStV" alt=""><figcaption></figcaption></figure>

## Modal structure in Unity

### Modal prefab

* Modal

*Find them in FloatGrids/Design System/UI Components/Modal*


# Panel

Panels are where the UI resides. Use the empty panel to create new views or utilize the pre-made panels to fill them with your content. Pre-made panels adjust in size so they can be used in any layout

{% hint style="info" %}
Use Primitives Panel prefab to customize color and border to all the variants of the panels at once. Use the variants in your scene.
{% endhint %}

{% tabs %}
{% tab title="Panel Main" %}

<figure><img src="/files/CKoJX8GV6kj0GbvMyedX" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Panel Column" %}

<figure><img src="/files/Br00BFUacPM2DypLf2Qh" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Panel Empty" %}

<figure><img src="/files/SRTYV3sEJ05o4UJoPsAh" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Panel Action bar" %}

<figure><img src="/files/w49hXkthfuH6wz4lkTv0" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Panel structure in Unity

### Primitive Panel prefab

* Primitive Panel

*Find them in FloatGrids/Design System/Customization/Primitive UI Components/Panel Primitive*

### Panel variants

*Find them in FloatGrids/Design System/UI Components/Panel*

## Scroll View

Use scroll prefab to be able to scroll your content in the panels.

* *Find the primitive scroll view prefab in FloatGrids/Design System/Customization/Primitive UI Components/Scroll View Primitive*
* *Find the Scroll View variant in FloatGrids/Design System/UI Components/Scroll View*


# Profile Image

{% hint style="info" %}
Profile Image UI component doesn't use the Primitive/Variant system. Instead it uses two prefabs combined.&#x20;
{% endhint %}

<figure><img src="/files/aflfTTlYOMbQ7Wb11tEE" alt=""><figcaption></figcaption></figure>

## Profile Image structure in Unity

### Profile Image prefab

* Profile Image

Profile Image uses a mask so you just have to change the sprite.

*Find it in FloatGrids/Design System/UI Components/Profile Image*

> We are working on making Profile Image smarter so that it can get attached to a database and display the initials of the user. The goal is to be generated automatically.&#x20;

<figure><img src="/files/kzWh3B64ElijNu8KY1sx" alt=""><figcaption></figcaption></figure>


# Progress

{% hint style="info" %}
The Progress Bar UI component doesn't use the Primitive/Variant system. Instead it uses two prefabs combined.&#x20;
{% endhint %}

<figure><img src="/files/27XkoqFidtazvcDEDL3U" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Bxop5HtPLUyAMWTdxKVx" alt=""><figcaption></figcaption></figure>

## Progress bar structure in Unity

### Progress Bar prefab

* Progress Bar

*Find it in FloatGrids/Design System/UI Components/Progress Bar*

## Spinner structure in Unity

{% hint style="info" %}
The Spinner UI component doesn't use the Primitive/Variant system. Instead it uses two prefabs combined.&#x20;
{% endhint %}

### Spiner prefab

* Spinner (Spinner prefab has a rotation already applied)

*Find it in FloatGrids/Design System/UI Components/Spinner*


# Radio Group

{% hint style="info" %}
The Radio Group UI component doesn't use the Primitive/Variant system. Instead it uses two prefabs combined.&#x20;
{% endhint %}

<figure><img src="/files/v6NlfB36DIXx1qMulCM7" alt=""><figcaption></figcaption></figure>

## Radio Group structure in Unity

### Radio Group prefabs

* Radio Group
* Radio Button Mark

*Find them in FloatGrids/Design System/UI Components/Radio Group*


# Slider

{% hint style="info" %}
The Slider UI component doesn't use the Primitive/Variant system. Instead it uses two prefabs combined.&#x20;
{% endhint %}

<figure><img src="/files/u3vVbE4wJN8k7OHsP56N" alt=""><figcaption></figcaption></figure>

## Slider structure in Unity

### Slider prefabs

* Slider

*Find it in FloatGrids/Design System/UI Components/Slider*


# Text Field

{% hint style="info" %}
Use Primitives prefabs to customize all the variants at once

Use the variants in your scene
{% endhint %}

{% tabs %}
{% tab title="Text Field" %}

<figure><img src="/files/QNGpKesjFX8kE2lFo7E8" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Text Area" %}

<figure><img src="/files/sCQvInQjNkxNJqCgVgfY" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Text Field structure in Unity

### Primitive Text Field prefabs

* Text Field and Text Area

*Find it in FloatGrids/Design System/Customization/Primitive UI Components/Text Field Primitive*

### Prefab variant

*Find it in FloatGrids/Design System/UI Components/Text Field and Text Area*

## Customization

* Edit the Primitive prefabs to change size, spaces, structure and corners to the main variant.


# Table

The FloatGrids table component is a versatile feature that enables you to swiftly generate various types of tables containing badges, profile images, action sections, or plain text.

{% hint style="info" %}
The Table UI component uses primitive prefabs in Unity for content and header cells, for content and headers rows and for the table as such.
{% endhint %}

<figure><img src="/files/sXZmdyVsuzTlVXM8Kn1U" alt=""><figcaption></figcaption></figure>

## Features

**Responsiveness**\
The prefab "Table" is responsive, meaning it will adapt its size to any width you decide for your table.

<div align="center" data-full-width="false"><figure><img src="/files/KSgjZkLtjcZ0vdKhA8GH" alt="" width="375"><figcaption></figcaption></figure></div>

**Cell orientation**\
You have the flexibility to change the orientation of the cells to better align the content with the header.

**Number of columns**\
You can add as many columns as you wish; they will automatically adapt and fit to the container.

## Table structure in Unity

### Primitive prefabs

* Content Cell
* Content Row
* Header Cell
* Header Row

*Find them in FloatGrids/Design System/Customization/UI Components/Table*

### Final Prefab

This is the final prefab that includes all the primitives, use it as a container for your content

* Table

*Find it in FloatGrids/Design System/UI Components/Table*


# Tooltip

{% hint style="info" %}
The Tooltip UI component doesn't use the Primitive/Variant system. Instead it uses two prefabs combined.&#x20;
{% endhint %}

<figure><img src="/files/o4iyOEXcVZMabphWa0y1" alt=""><figcaption></figcaption></figure>

## Tooltip structure in Unity

### Tooltip prefab

* Tooltip

*Find it in FloatGrids/Design System/UI Components/Tooltip*


# Toggle

{% hint style="info" %}
The Tooltip UI component doesn't use the Primitive/Variant system. Instead it uses two prefabs combined.&#x20;
{% endhint %}

<figure><img src="/files/msep2Rwb8THWoGedDbK1" alt=""><figcaption></figcaption></figure>

## Toggle structure in Unity

### Toggle prefab

* Toggle

*Find it in FloatGrids/Design System/UI Components/Toggle*


# Onboarding View

Onboarding template is ready for you to use. Just change images and texts and indicate the steps.

<figure><img src="/files/YLG49MkdPMhORuxh3N0f" alt=""><figcaption></figcaption></figure>

{% embed url="<https://youtu.be/kRNJmwYvVBY>" %}

## How to customize it?

* Change font styles, distances, button styles, etc

*Find it in FloatGrids/Design System/Views/Onboarding*


# Gallery View

Add as many images as you want, they will organize automatically

<figure><img src="/files/p39DL3TmlbK2BwzJ1EJU" alt=""><figcaption></figcaption></figure>

*Find it in FloatGrids/Design System/Views/Gallery*


# Sidebar view

Responsive Sidebar panel

<figure><img src="/files/s7qylDCNv3StU7WrG1Xh" alt=""><figcaption></figcaption></figure>

* Change font styles, distances, button styles, etc

*Find it in FloatGrids/Design System/UI Components/Views/Sidebar Panel*


# Settings View

Add as many images as you want, they will organize automatically

<figure><img src="/files/TVqtYTUObIJVXO902mFn" alt=""><figcaption></figcaption></figure>

*Find it in FloatGrids/Design System/Views/Settings View*


# Navbar Panel

<figure><img src="/files/jLpSSdn0C5unlU2KODs3" alt=""><figcaption></figcaption></figure>

* Change font styles, distances, button styles, etc

*Find it in FloatGrids/Design System/UI Components/Views/NavbarPanel*


# Layouts

FloatGrids has 7 ready to use layouts for you to choose which one fits best your app. They are ready in a scene.

Find the layout scenes in FloatGrids/Design System/Templates/Layouts

## Layout 1

<figure><img src="/files/WUtLKh2MXAEh43YeSVRD" alt=""><figcaption></figcaption></figure>

## Layout 2

<figure><img src="/files/qO2S5tAYM9GVQ9RhlNaE" alt=""><figcaption></figcaption></figure>

## Layout 3

<figure><img src="/files/FDDZAmIZ4kcMp6MMRshG" alt=""><figcaption></figcaption></figure>

## Layout 4

<figure><img src="/files/YrGTc510Y4eLSEO7wKkh" alt=""><figcaption></figcaption></figure>

## Layout 5

<figure><img src="/files/cokccgCFG3H4wZGsFuak" alt=""><figcaption></figcaption></figure>

## Layout 6

<figure><img src="/files/VAXsoqKwoQUTbl3blNYT" alt=""><figcaption></figcaption></figure>

## Layout 7

<figure><img src="/files/oexCfjwlk5jNJA0kWYOC" alt=""><figcaption></figcaption></figure>