The third dimension in Figma is finally here: Vectary 3D plugin

It has never been easier to get photorealistic 3D visuals without ever leaving Figma.

Install Vectary 3D plugin in Figma
Blog-figma-cover-vectary.jpg

Vectary is often called “Figma for 3D design”. Imagine how awesome would it be if you could manipulate and place photorealistic 3D objects in Figma with any view and perspective you like. The dream is becoming a reality today! Vectary is bringing customizable and interactive 3D elements and mockups right into your design process.

Control photorealistic 3D elements in Figma with Vectary

Vectary 3D plugin for Figma is here to add the missing third dimension to your 2D designs. Set your desired perspective in the actual 3D viewport and place it into the scene with one click. The plugin lets you place pre-defined 3D elements into your design, load a custom 3D object, or place your Figma design into predefined 3D mockups such as mobile devices, desktops, or soda cans.

lemonade-figma-plugin-vectary

Create 3D design systems in Figma

This way, a whole 3D design system can be made in Figma. Say you are using a 3D element as a part of your brand identity, or you have a product in 3D - just create a link in Vectary and let your designers decide which perspective works best for them during the creative process. 

design-system-figma-vectary

How to use Vectary 3D plugin for Figma

To place your Figma design into mockups:

  1. Open Vectary 3D plugin in Figma.
  2. Choose a 3D mockup.
  3. Select your Figma frame.
  4. Click the “Use selected frame” button to replace the existing content with your design - it could be a screen of a mobile device, depending on the mockup you selected.
  5. Customize the mockup perspective: using left click, drag to rotate the mockup or scroll to zoom in.
  6. Click on “Save view as image” to add a render with a transparent background to your project.

To load any custom 3D object or element

  1. Open www.vectary.com, create your 3D object from scratch, import a 3D model, or use millions of assets in the Vectary library.
  2. Go to the Viewer tab and click on “Generate”.
  3. In the Viewer’s format setting, choose a link from the dropdown. Copy the link.
  4. Go back to Figma and open the Vectary 3D plugin.
  5. Click on the Load tab and paste the link - your custom 3D design will load.
  6. Customize the 3D design perspective: using left click, drag to rotate the mockup or scroll to zoom in.
  7. Click on “Save view as image” to add a screenshot with a transparent background to your project.

Pro tip: If you want to have a replaceable texture in your own Vectary model in Figma, name the object and its material as “_switchable” before generating the Viewer in Vectary.

_switchable

How to create a custom 3D elements in Vectary

Have an idea for a 3D object, and you’d like to place it to your Figma design? Creating objects from scratch is easy. When you have your 3D design ready, follow the instructions above. Watch the tutorial:

Our 3D elements and mockup gallery will grow with time to give you plenty of ready-to-use 3D elements and mockups.

Please let us know what you like or miss in Vectary Figma plugin, just drop us a message, we’re eager to hear your feedback.