> For the complete documentation index, see [llms.txt](https://docs.floatgrids.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.floatgrids.com/features/ux-resources.md).

# UX Resources

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

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>