# Figma integration

There are two ways you can import your Figma files into ShapesXR - you can use the ShapesXR plugin in Figma or upload them manually.

{% hint style="warning" %}
**Figma import limitations**

Figma has updated its API rules and introduced stricter rate limits. As a result, importing files from Figma may be limited or temporarily unavailable.

These limitations depend on your Figma plan and permissions and are enforced by Figma.

Learn more:\
<https://developers.figma.com/docs/rest-api/rate-limits/><br>
{% endhint %}

## ShapesXR plugin in Figma&#x20;

{% hint style="info" %}
As a Free user, you have 20 exports via the plugin.

For [paid plans](https://www.shapesxr.com/plans), it's unlimited.
{% endhint %}

1. In the Figma app, open your project, go to the Plugins tab -> Manage plugins, type ShapesXR in the search field, select the plugin, and click on Run.
2. Log in to your ShapesXR account.
3. Paste the file link (you can find it in the Share menu of your Figma project) and click on Continue.

<div><figure><img src="https://1564817110-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2F61W8nr9ZSuFNphP5rKrK%2Fimage%20(1).png?alt=media&#x26;token=28ef026f-273c-4b23-a20d-8843090d33e0" alt=""><figcaption></figcaption></figure> <figure><img src="https://1564817110-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FccuUBzr3iwyJJU0Cku25%2Fimage%20(2).png?alt=media&#x26;token=a3613968-afbf-4eae-879c-7a2fadebdd3b" alt=""><figcaption></figcaption></figure></div>

4. If you are using Figma Integration for the first time, you need to add a Figma account token. Here is the video on how to find it in Figma:

{% embed url="<https://youtu.be/WiHyCvAzzBI?feature=shared>" %}

5. Select files in your project that you want to export into ShapesXR - they will be shown in the plugin.
6. The default folder for export is the My Files folder in the [Dashboard](https://shapes.app/files/), but you can pick another target folder. Click on the folder button to do it.

<figure><img src="https://1564817110-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FhDE8Dbg9IK6GjKkVgBF2%2Fimage%20(3).png?alt=media&#x26;token=2cb5f9ae-a9bf-49fc-a450-c82a242a8f7d" alt="" width="375"><figcaption></figcaption></figure>

7. Click on the Export button and wait for the export to be complete. Now your files are available in ShapesXR - you can find them in the Dashboard and use them in the space.

<figure><img src="https://1564817110-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FQWaZ5sABdZ1op97hgTUA%2F03-Export-Figma-Files-to-Shapes.gif?alt=media&#x26;token=a999add7-39e1-4748-b4f6-31a9a10c4934" alt=""><figcaption></figcaption></figure>

8. You can easily update your files after you change them in Figma - click on the "Sync all" button to update all your files in the folder, or click on the update button next to a specific file.&#x20;

<figure><img src="https://1564817110-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2Fj1NHoGhV82EY39e2Wi60%2F06-Changes-are-Synced.gif?alt=media&#x26;token=d85c5d96-6de1-49ff-b0d3-52af12c6bce9" alt=""><figcaption></figcaption></figure>

## How to upload Figma files manually

### How to add a Figma token

If you are using Figma Integration for the first time, you need to add a Figma account token.&#x20;

Copy the token in Figma, then go to the Dashboard -> Profile -> Integration tab -> Add Figma token to sync -> paste the token into the field and sync it.

In this [video](https://youtu.be/WiHyCvAzzBI?feature=shared), you can find step-by-step instructions on how to find the token in Figma.

{% hint style="info" %}
Sometimes the token needs to be refreshed, so if you're having trouble loading Figma files, revoke the token and sync it again.
{% endhint %}

### How to upload Figma files manually

Once you add a Figma token, you can upload Figma files using their links.&#x20;

1. Copy the link to the frame you want to import into Figma. There is a video tutorial on how to get the Figma link:

{% embed url="<https://youtu.be/7Yq85ofBdIU?feature=shared>" %}

2. Go to the Dashboard -> My Files, click on the Upload button, and choose Figma import. Paste the link in the field and press Import.&#x20;

<figure><img src="https://1564817110-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FreSn4iEmfgiR0rt08cyC%2FUntitled.gif?alt=media&#x26;token=49c650f1-85e9-4877-8ab2-ad9a56f3503d" alt=""><figcaption></figcaption></figure>

### How to update Figma files

Click on the Figma file to select it. Additional options for Figma files will be available:

* Sync - allows you to update the file with the changes you've made in Figma.
* Edit link  - for changing the link to the file in Figma.
* Open in Figma - opens the file in Figma.

## Figma playable prototype

{% hint style="info" %}
Available for: [paid plans](https://www.shapesxr.com/plans)
{% endhint %}

You can upload your Figma prototype into ShapesXR and play and interact with it in VR.&#x20;

#### How to upload Figma playable prototypes

1. Copy the link to your prototype in Figma (Share -> Copy link).&#x20;

<figure><img src="https://1564817110-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FLxJHfXP9Rzt125sFT6xM%2Fcopylink.gif?alt=media&#x26;token=5ac71619-d194-4c2c-a6e2-80967b91522b" alt=""><figcaption></figcaption></figure>

2. Go to the Dashboard -> My Files, click on the Import button, and choose Figma Prototype. Paste the link in the field and press Import.&#x20;

<figure><img src="https://1564817110-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FCjp49Z6cFIQwDBBPSwb0%2F12635421.gif?alt=media&#x26;token=8d87eb54-0261-4e68-b503-72f19a735b24" alt=""><figcaption></figcaption></figure>

### How to use a Figma playable prototype in VR

1. After you’ve successfully uploaded your Figma prototype through the Dashboard, you can **use it in VR** - go to any space, **open the Assets menu -> My Files**, hover over the prototype in the list, and **grab it with the grip button** to set it in the space.

<figure><img src="https://1564817110-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2F7SrFF0E5OEIg2gBZbeUj%2Fgrabprototype-ezgif.com-video-to-gif-converter.gif?alt=media&#x26;token=e06cf4d0-a2ce-43b4-b7b9-bc931cb8ec8b" alt=""><figcaption></figcaption></figure>

2. If the link to your prototype is private, a Figma login form will appear after it loads. Click on the input field to activate the keyboard and enter your login credentials.

<figure><img src="https://1564817110-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FYqgpezJHHMd0iXxmAbx7%2Ffigma%20login-gif.gif?alt=media&#x26;token=0c812b41-ac91-4132-82f4-1b9107db752d" alt=""><figcaption></figcaption></figure>

3. The prototype will be loaded and started, so **you can interact with it by clicking the trigger button.**&#x20;

<figure><img src="https://1564817110-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2Ft4a78p5w5qYFe5aFuwo0%2Fprototypeusing-ezgif.com-optimize.gif?alt=media&#x26;token=13ea2d2b-0590-43dc-800d-4fb10ee48fc5" alt=""><figcaption></figcaption></figure>

4. Click the prototype's bottom bar with the trigger to select it. In the Inspector, you can set the prototype's pixel density, reload it, or activate the Chroma key option.&#x20;

### Chroma key for Figma prototype

1. Add chroma color to your prototype in Figma.

<figure><img src="https://1564817110-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2FnEeE5ha006cUJZ4F9Obv%2Fchromacolorfigma-ezgif.com-video-to-gif-converter.gif?alt=media&#x26;token=16485d03-df4f-4465-a71a-87d27d725071" alt=""><figcaption></figcaption></figure>

2. Upload the prototype into ShapesXR.
3. In the app, go to My files and grab the prototype into the space.
4. Select the prototype by clicking on the bottom bar and turn on the Chroma keying option. Then, choose the same color as the prototype's background.&#x20;

<figure><img src="https://1564817110-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV5IFh3rk5kqfCwJPPYhE%2Fuploads%2Fm3zxb2SYvCsxjWbJSnPD%2Fchromakey-ezgif.com-optimize.gif?alt=media&#x26;token=12740019-7c84-457f-8597-d5e67486abeb" alt=""><figcaption></figcaption></figure>


---

# 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://learn.shapesxr.com/import/figma-integration.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.