Sharing and embedding
Work with your 3D projects directly in Figma with Vectary 3D Elements plugin!
Here's what you can do with the plugin
You get a 3D editor with a layout library and many customization features — all without leaving Figma! Transfer your design from frame to mockup with the one click of a mouse. Customize the model, change materials, lighting or even change the geometry. Total freedom! Here's a list of features:
- Free and constantly updated library with mockups.
- Editor that allows you to customize models.
- Customize textures or material using Figma frames.
- Modify surface metalness and roughness.
- Adjust and change environment lighting.
- Change any part of the object with ease.
- Change field of view.
- Add shadows.
- Synchronize your Vectary projects with the plugin.
- With one click, go from the plugin directly into Vectary to make any changes you want.
- You can import any model from the web into Vectary and then transfer it to the plugin with two clicks.
Link your Vectary account – create a Token
You can use the plugin without an account in Vectary. But if you want your projects from Vectary to automatically become available in the plugin, you only need a couple of clicks to enable synchronization. The Vectary token is generated in the Profile settings on your Dashboard.
Open the video below to see the process step by step:
Create Access Token and Link with the Figma plugin (video)
How to use the Plugin in Figma
Publishing a project for Figma Plugin
There are two ways to publish a project:
➕ The advantage of this method is that you can get real-time rendering with support for all materials. The scene will look exactly like it does in Vectary Studio, including custom backgrounds, post-processing settings, and Floating UI.
➖ The downside is that only the feature of exporting an image to a frame (when you click on Finish) is available.
Read more about Sharing your projects
- Publish Legacy (the old method of publishing a project) ➕ The benefit of this method is that you will have access to all the plugin's features. ➖ However, the downside is that the outdated rendering engine is used, which means that the materials and the entire scene won't look as visually appealing as they would with the real-time rendering engine, and more complicated materials (like glass, subsurface scattering, etc.) will be simplified.
In this library tab, you will find 3D objects and mockups, they are completely free for commercial use (CC0).
Any 3D object can be used as a mockup (read about it below in the material settings).
By clicking the Edit in Vectary button, you can jump from Figma to Vectary Studio, the 3D editor where you can edit anything you need on your own cloned project. Save and Publish changes and reopen your own project in the Figma plugin.
Edit in Vectary button (video)
From here you can load a published project directly from Vectary using the “viewer link” which looks like this:
Preparing a model in Vectary to load a link (two ways):
This library tab will list all projects located in all your Vectary Workspaces, which were previously published and have a generated link.
For your projects to be shown on this tab, two conditions must be met:
- You need to enter a valid Access Token.
- The project must be published in one of two ways.
Get Layout — allows you to download a texture from an object to a new frame. Then you can change the texture directly in Figma and put it back on the object with Load Frame. To make this work with your own model, you need to rename the material in Vectary — change it to _switchable. Then Get Layout will be able to figure out where to import the texture from.
Apply Frame — this button helps to place a Figma frame on the object. First, select the frame in Figma, then click apply.
If you apply a frame from the Material Settings, it will be used only on the currently selected material. Notice, that a 3D asset can have multiple materials, select the one you need from the Materials > Dropdown list.
Finish — exports the image into a new Frame and closes the plugin window.
Adjust environment lighting
There are different lighting options at your disposal. These range from options that accentuate your 3D object's appearance to ones that add more intensity. Rotate the 3D object's environment to change how it will reflect its environment or the lighting angle for added definition.
Modify surface metalness and roughness
You can affect the surface appearance of your 3D model from within the plugin. For example, lower the roughness setting to make the surface glossier or achieve a metallic look by adjusting the object's metalness.
Edit color and texture by selection
Select the particular part of the 3D model you'd like to customize or edit, then easily change its color or texture without having to leave the plugin editor.
The object part in the plugin corresponds to the material name in Vectary Studio. That is, in Studio you can have several parts with the same material name (e.g. Body), respectively in the plugin it will be one part called Body.
Changing between texture or material options with Figma frames is also simpler, so you can easily select from thousands of texture options.
Field of view
By changing the Field of view, you can get a completely different view
You can also change the size of the plugin window.
Turn the shadow plane ON for added realism, or OFF to make an object “float”.