# Figma frames import

## Overview

Designs from Figma can be easily imported into Vectary as textures or stickers. Any changes made to the frame after its import can be synchronized with a single click.

{% embed url="<https://screen.studio/share/bEUErb0u>" %}

## **Importing a Frame as a Texture**

{% stepper %}
{% step %}
Frame selection <mark style="color:blue;">(Figma)</mark>

Ensure that the design to be imported is wrapped in a frame\
\
![](https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2FRRrNh11Se5rApVglLMFl%2Fimage.png?alt=media\&token=97cd64cc-a40d-4688-8905-1ff8f2f27251)
{% endstep %}

{% step %}
Copy link to selection <mark style="color:blue;">(Figma)</mark>

Copy the link to the selected frame\
\
![](https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2FsoQDZG1DcJdRV9gCSv5l%2Fimage.png?alt=media\&token=fa4c091f-0611-44e4-906d-fe38eec3211c)
{% endstep %}

{% step %}
Choose Figma fame <mark style="color:purple;">(Vectary)</mark>

Select the object and material property where the texture should be imported, then choose *Figma frame* instead of *Texture*\
\
![](https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2FdcsT1VggasH8fbAvNg0b%2Fimage.png?alt=media\&token=4c610bbc-9db9-41b1-94d0-d0ba96407bbc)
{% endstep %}

{% step %}
Paste Figma frame link <mark style="color:purple;">(Vactary)</mark>

Paste the copied frame link into the provided field and press *Enter*\
\
![](https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2F65JWjuUetPPRxhn2n4A6%2Fimage.png?alt=media\&token=fdd3ea59-d92c-4cb6-a0eb-9b7e7790ec79)
{% endstep %}
{% endstepper %}

## **Importing a Frame as a Sticker**

A Figma frame can be imported not only as a texture but also as a separate object that can be attached to another object (learn more [decals](https://open-2v.gitbook.com/url/help.vectary.com/documentation/design-process/decals "mention"))

To do this, copy the link to the frame ([follow the first two steps](#importing-a-frame-as-a-texture)) and simply paste it onto the canvas by pressing *`Ctrl+V`*.

This creates a separate object (a plane) that can be applied to any surface.

{% embed url="<https://screen.studio/share/htoSWOvv>" %}

## **Synchronizing changes**

If the frame was modified in Figma, click the synchronization icon next to the frame link in Vectary to update it.

<div align="left"><figure><img src="https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2FZQYUzdNs8uv0xZLw54Jf%2Fimage.png?alt=media&#x26;token=3f301a7b-850f-4c98-93f1-2274aa9865d1" alt="" width="563"><figcaption></figcaption></figure></div>

## **Reusing the frame**

To use the imported image in other settings, there is no need to import it again—simply select the texture from the existing list.

<div align="left"><figure><img src="https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2FSO04ROqNR0TXZQY9V3aN%2Fimage.png?alt=media&#x26;token=5298705c-1668-449f-a44a-9fb4cfa08b7d" alt="" width="563"><figcaption><p>Click on the frame name to open the list of all frames</p></figcaption></figure></div>

## Token&#x20;

A token needs to be generated only once in Figma and linked to Vectary to connect the Figma account.

{% stepper %}
{% step %}
Open Figma account settings

<div align="left"><figure><img src="https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2Fd1EDcsyACiEKlXoHNgF5%2Fimage.png?alt=media&#x26;token=9e0f0292-2381-4864-aa6b-0ff6abd34a0b" alt="" width="563"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
Navigate to the `Security` tab and generate new token

<div align="left"><figure><img src="https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2FNj3YzkrnjSgmVEseVeOt%2Fimage.png?alt=media&#x26;token=66cf8f97-ca30-4acd-83df-4bf9ab4a9399" alt="" width="563"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
Enter any name for the token, set its expiration date, and click `Generate token`

<div align="left"><figure><img src="https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2FAQ8ash48R2ptCfqzZxFx%2Fimage.png?alt=media&#x26;token=8f9f7265-d4d7-4f5a-b869-75a749735dc6" alt="" width="375"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
Copy the generated token

<div align="left"><figure><img src="https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2FxZlRZZSVCNSrMeXPCmjl%2Fimage.png?alt=media&#x26;token=c238602c-2f11-4496-9e2e-bee85d872c7e" alt="" width="563"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
Paste the generated token into Vectary

Paste the token and press `Enter`&#x20;

{% hint style="info" %}
the token input field in Vectary appears after attempting to use a frame.
{% endhint %}

<div align="left"><figure><img src="https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2FRV1vglvMVgu6TwlEQaBn%2Fimage.png?alt=media&#x26;token=16c50dd5-3a98-4c9b-a9cf-fc0b9167f5c7" alt=""><figcaption></figcaption></figure></div>
{% endstep %}
{% endstepper %}

Done! Frames can now be imported.

## **Tutorials**

{% embed url="<https://youtu.be/bijGn9ib7Po?si=OdnWCgtYkrle4PX8>" %}

{% embed url="<https://www.youtube.com/watch?v=NRvHIUcYw4c>" %}