> 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/getting-started/figma-file.md).

# Figma file

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