# Vectary Plugin for Figma

## Overview

The Vectary plugin for Figma enables seamless integration of 3D projects into Figma workflows. It allows applying designs to 3D models, real-time fitting on the canvas, exporting high-quality renders, and accessing AR features directly within Figma.

#### Key Capabilities

* Apply design to a 3D project with just two clicks.
* Real-time 3D model fitting on the canvas using Preview mode
* Export rendered image to the Figma canvas
* Immediate texture reflection in AR (AR can be activated from Figma)
* Save all applied textures for use in configurators without altering the original project
* Quickly open a 3D project in Figma with interactions, animations, AR, and UI elements
* Modify existing project textures
* Change background (including transparent option)
* Add a shadow to the scene

## Getting started

\
No tokens are required. A Vectary project link is sufficient to begin.

Upon launching the plugin, a field appears for pasting a Vectary project link, along with options to load demo projects.

<figure><img src="https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2FcINjiYGy3KEUHMt5k7cq%2Fimage.png?alt=media&#x26;token=bbb5073d-b25b-4a6a-aed3-ca4efbf47a4a" alt=""><figcaption></figcaption></figure>

#### Loading a 3D Project

\
**Option 1:** use demo projects\
\
Select one of the available demos and start working immediately.

\
**Option 2:** use a custom Vectary project<br>

1. Sign up on the [Vectary platform](https://www.vectary.com/)
2. Create a new project
3. [Share](https://help.vectary.com/documentation/sharing-exporting-embedding/sharing) the project and copy the link
4. Paste the link into the plugin

{% hint style="success" %}
When a custom project is loaded, all configurations (interactions, animations, AR, Floating UI) will remain functional.
{% endhint %}

## Features

<figure><img src="https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2FsLFvvv8zeFXaS29Z5oYD%2Fimage.png?alt=media&#x26;token=a4d91700-3b2a-4e80-825c-e52710a6ca71" alt=""><figcaption></figcaption></figure>

### Material picker

Enables applying a Figma frame to a material selected from a 3D object.

<div align="left"><figure><img src="https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2FkUl6vTHfdc1JrU4FsBEo%2Fimage.png?alt=media&#x26;token=47c44dd0-8fc2-49cc-9e85-c23b1b7c2e7d" alt=""><figcaption></figcaption></figure></div>

**How to use:**<br>

1. Select the Material Picker tool
2. Use the dropper to hover over and select a material (material name appears near cursor)
3. Once selected, the material name appears next to the dropper icon
4. Click on a Figma frame to apply the selected material

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

### Get material frame from object

Exports the object's texture as a frame to the Figma canvas.

* Only the [**Color**](https://help.vectary.com/documentation/design-process/materials-and-textures/basic-materials/color) texture is exported (Opacity, Emission, Normal maps are not included)
* If the texture was replaced using the Material Picker, the original texture will still be used for export

<div align="left"><figure><img src="https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2F46toynjbOLn1DvTKeLAv%2Fimage.png?alt=media&#x26;token=9f3e86e6-1924-4448-aff1-96fbee5360f5" alt=""><figcaption></figcaption></figure></div>

**How to use:**<br>

1. Select the Get Material Frame from Object tool
2. Hover over the object to reveal the material name
3. Click to extract the texture
4. A Figma frame with the texture will appear on the canvas

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

### Ground shadow

Activates the [ground plane](https://help.vectary.com/documentation/design-process/ground-plane), which can be further customized in the Vectary Studio.

<div align="left"><figure><img src="https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2Fn0R8o4omi02ADE74gcqg%2Fimage.png?alt=media&#x26;token=62fd4cd6-75f2-4e39-91f3-ae4016c7f5d1" alt=""><figcaption></figcaption></figure></div>

### Background

Allows enabling/disabling the background. A transparent background is available.

<div align="left"><figure><img src="https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2Fd3hPwaIblL8uvOxes9l2%2Fimage.png?alt=media&#x26;token=7fbcfdea-f2d9-4dce-95e1-0c6684a74843" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Note: Background color is affected by the [Adjustment effect](https://help.vectary.com/documentation/design-process/effects/adjustments).
{% endhint %}

## Preview&#x20;

Enables real-time model preview within the Figma frame.<br>

* Preview quality is low for performance; high-quality image is generated during export
* Requires use of **Create Image** to activate
* Preview Mode is disabled automatically after creating or updating an image
* Plugin is linked to a single frame; for multiple instances, duplicate the frame

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

## Create image - Update image

* **Create Image**: Captures the current project view and creates a frame on the canvas

<figure><img src="https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2FlICWg20PsOGouTDHRPZB%2Fimage.png?alt=media&#x26;token=a4ff053a-f987-412e-a90b-cf23b77d3688" alt=""><figcaption></figcaption></figure>

* **Update Image**: Refreshes an existing plugin-generated frame with current model view

<figure><img src="https://2973737105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAXNLyKVZ2tvtyDr8sVES%2Fuploads%2FI74wNmipg5DLa7z19NcC%2Fimage.png?alt=media&#x26;token=4df5b582-7a24-4c7b-8ce7-d8f94163c92b" alt=""><figcaption></figcaption></figure>

## Reopen Plugin&#x20;

The plugin retains memory of existing frames and associated settings.

\
**Two reopen scenarios:**<br>

1. **Frame selected**: Plugin reopens the same project, preserving view and settings (including texture/configurator changes)
2. **No frame selected**: Plugin starts a new session and creates a new frame upon image creation

## Tutorials

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